You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
|
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"><!--定义字符集为UTF-8--> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--设置自适应视口以确保响应式设计--> <title>HTML学习1</title>
<!--外部样式表--> <link rel="stylesheet" type="text/css" href="mystyle.css"> <!--内部样式表--> <style type="text/css"> h1 {color: red} p {color: blue}
.cities { background-color:black; color:white; margin:20px; padding:20px; }
#myHeader { background-color: lightblue; color: black; padding: 40px; text-align: center; } </style>
</head><body><!--<body> 元素定义了 HTML 文档的主体-->> <!--标题 h1(大)到h6--> <h1>学习笔记</h1> <!--段落--> <p>今天学习了很多新的知识，感觉收获颇丰。</p>
<!--水平线--> <hr/> <!--插入空行/换行--> <p>This is<br />a para<br />graph with line breaks</p> <br /> <p>今天学习了很多新的知识，感觉收获颇丰。</p>
<!--链接--> <a href="http://www.w3school.com.cn">这是web学习网站</a> <br /> <a name="label" href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a> <br /> <a href="#label">在同一个文档中创建指向该锚的链接</a> <br /> <a href="http://www.w3school.com.cn/#label">在其他页面中创建指向该锚的链接</a>
<br />
<!--图片--> <img src="http://www.w3school.com.cn/images/boat.gif" alt="Big Boat" width="104" height="142"/>
<!--HTML元素：从开始标签（start tag）到结束标签（end tag）的所有代码-->
<!--HTML属性：提供有关元素的附加信息 始终为属性值加引号
class = "value"：为元素指定类名 id="value"：为元素指定唯一的标识符 style="property:value;"：为元素添加内联样式 title="text"：为元素添加提示文本
<table border="1">：为表格添加边框 -->
<!--HTML样式--> <h1 style="text-align:center;">水平居中对齐</h1> <p style="font-family:arial; color:red; font-size:20px;">A paragraph.</p>
<!--预格式文本，保留了空格和换行--> <pre> for i = 1 to 10 print i next i </pre>
<!--地址--> <address> Written by <a href="Wugh5200@163.com">Donald Duck</a>.<br> Visit us at:<br> Example.com<br> Box 564, Disneyland<br> USA </address>
<br />
<!--缩写和首字母缩写--> <abbr title="etcetera">etc.</abbr> <br /> <acronym title="World Wide Web">WWW</acronym> <p><dfn><abbr title="World Health Organization">WHO</abbr></dfn> 成立于 1948 年。</p>
<br /> <!--引用--> <q>学习使我快乐。</q> <br /> <blockquote cite="http://www.w3school.com.cn"> 学习使我快乐。 </blockquote>
<!--表格
<table>：定义表格 <tr>：定义表格行 <th>：定义表格头单元格 <td>：定义表格数据单元格 cellspacing：单元格间距 cellpadding：单元格内边距 --> <table border="1" cellpadding="10" cellspacing="5" bgcolor="#FAEBD7"> <caption>标题</caption>
<tr> <th colspan="2">Heading</th><!--横跨两列--> <th rowspan="2">Another Heading</th><!--横跨两行--> </tr>
<tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr>
<tr> <td> </td> <td>row 2, cell 2</td> </tr>
<tr> <td>这个单元包含一个表格： <table border="1"> <tr> <td align="left">A</td> <td align="right">B</td> </tr> <tr> <td>C</td> <td>D</td> </tr> </table> </td> </tr>
<tr> <td>这个单元包含一个列表： <ul> <li>苹果</li> <li>香蕉</li> <li>菠萝</li> </ul> </td> <td>HELLO</td> </tr> </table>
<!--列表--> <h2>无序列表</h2> <!--type="disc" type="circle" type="square"--> <ul type="disc"> <li>Coffee</li> <li>Milk</li> </ul>
<h2>有序列表</h2> <ol type="A"> <!--type="A" type="a" type="I" type="i"--> <li>Coffee</li> <li>Milk</li> </ol>
<h2>嵌套列表：</h2> <ul> <li>咖啡</li> <li>茶 <ul> <li>红茶</li> <li>绿茶</li> </ul> </li> <li>牛奶</li> </ul>
<h2>定义列表：</h2> <dl> <!--自定义列表以 <dl> 标签开始--> <dt>计算机</dt> <!--每个自定义列表项以 <dt> 开始--> <dd>用来计算的仪器 ... ...</dd> <!--每个自定义列表项的定义以 <dd> 开始--> <dt>显示器</dt> <dd>以视觉方式显示信息的装置 ... ...</dd> </dl>
<!--块级标签默认独占一行:<div>、<h1>-<h6>、<p>、<form>、<ul>、<dl>；
行内标签:<span>、<input>、<img>。-->
<!--同一个类名可以由多个 HTML 元素使用，而一个 id 名称只能由页面中的一个 HTML 元素使用：--> <!--类--> <div class="cities"> <h2>London</h2> <p> London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants. </p> </div>
<!--id--> <h1 id="myHeader">My Header</h1>
<!--通过 ID 和链接实现 HTML 书签--> <h2 id="C4">第四章</h2> <a href="#C4">跳转到第四章</a> <!--或者，在另一张页面中，添加指向这个书签的链接（“跳转到第四章”）--> <a href="html_demo.html#C4">Jump to Chapter 4</a>
</body></html>
|
