|
<!DOCTYPE html>
<html>
?? ?<head>
?? ??? ?<meta charset="utf-8" />
?? ??? ?<title>常用标签</title>
?? ?</head>
?? ?<body>
?? ??? ?<!--
?? ??? ??? ?标题标签
?? ??? ??? ?h1~h6 ? 大小依次递减
?? ??? ?-->
? ??
?? ?<h1>标题1</h1>
?? ??? ?<h2>标题2</h2>
?? ??? ?<h3>标题3</h3>
?? ??? ?<h4>标题4</h4>
?? ??? ?<h5>标题5</h5>
?? ??? ?<h6>标题6</h6>
?? ??? ?
?? ??? ?
?? ??? ?<!--
?? ??? ??? ?段落标签
?? ??? ??? ??? ?p标签 ? ? 会自动换行
?? ??? ??? ??? ?块级元素?? ??? ?
?? ??? ?-->
? ? ??
?<p>这是一个段落1</p>
?? ??? ?<p>这是一个段落2</p>
?? ??? ?
?? ??? ?
?? ??? ?<!--
?? ??? ?换行标签
?? ??? ?br ? 单行标签
?? ??? ?<br><br/>
?? ??? ?-->
? ? ? ?
?? ??? ?
?? ??? ?? ? ? ??
?? ??? ?<!--
?? ??? ?水平线标签
?? ??? ??? ?hr ?单标签
?? ??? ??? ?常用属性
?? ??? ??? ??? ?color ?颜色
?? ??? ??? ??? ?size ?粗细
?? ??? ??? ??? ?width ?长度<百分比 ? 或 ? 像素值>
?? ??? ?-->?? ??? ??? ?
? ? ??
?<hr>
?? ??? ?<hr color="aqua" size="3" width="50%" align="left">
?? ??? ?
?? ??? ?
?? ??? ?<!--
?? ??? ?列表
?? ??? ??? ?有序列表
?? ??? ??? ??? ?<ol><li></li></ol>
?? ??? ??? ?无序列表
?? ??? ??? ??? ?<ul><li></li><ul>
?? ??? ?-->
? ? ? ?
?<ul type="square">
?? ??? ??? ?<li>周杰伦</li>
?? ??? ??? ?<li>林俊杰</li>
?? ??? ?</ul>
?? ??? ?<ol type="1">
?? ??? ??? ?<li>周杰伦</li>
?? ??? ??? ?<li>林俊杰</li>
?? ??? ?</ol>
?? ??? ?
?? ??? ?<!--
?? ??? ?div标签
?? ??? ??? ?块级元素
?? ??? ??? ?默认占全部的宽度 ?有多少内容高度占多少
?? ??? ??? ?可以设置div的宽 width ?高 height
?? ??? ??? ?对齐方式---align---left---right--center
?? ??? ?-->
? ? ?
? ?<div style="width:100px;height: 100px;"align="center">这是一个div</div>
?? ??? ?1111
?? ??? ?
?? ??? ?
?? ??? ?<!--
?? ??? ??? ?span标签
?? ??? ??? ??? ?行内元素（不会自动换行）?? ??? ??? ??? ?
?? ??? ?-->
? ? ? ?
?<span>这是一个span</span>
?? ??? ?
?? ??? ?
?? ??? ?
?? ??? ?<!--
?? ??? ??? ?格式化标签
?? ??? ??? ??? ?color ?字体颜色
?? ??? ??? ??? ?size ?字体尺寸
?? ??? ??? ??? ?face ?字体风格
?? ??? ??? ??? ?pre
?? ??? ??? ??? ??? ?欲格式化标签 ? 保留空格和换行
?? ??? ??? ??? ?b ?加粗
?? ??? ??? ??? ?i 倾斜
?? ??? ??? ??? ?u 下划线
?? ??? ??? ??? ?del 中划线
?? ??? ??? ??? ?sup 上标
?? ??? ??? ??? ?sub 下标
?? ??? ?-->
? ? ? ?
?<font color="aqua"size="5"face="楷体">Hello World</font>?? ??? ?
?? ??? ?<pre>
?? ??? ??? ?Hello World
?? ??? ?</pre>
?? ??? ?<p><b>烦死</b><i>了一</i><u>天天</u>的</p>
?? ??? ?H<sub>2</sub>O
?? ??? ?
?? ??? ?
?? ??? ?<!--
?? ??? ?a标签
?? ??? ??? ?超链接标签，由于链接到一个新的URL
?? ??? ??? ?常用属性：
?? ??? ??? ??? ?href：需要跳转的地址(必须属性)）
?? ??? ??? ??? ?target：窗口打开的方式
?? ??? ??? ??? ??? ?_self：当前窗口(默认)
?? ??? ??? ??? ??? ?_blank:在空白窗口
?? ??? ??? ?作为锚点：
?? ??? ??? ??? ?a标签的name属性
?? ??? ??? ??? ??? ?<a name="top"></a>
?? ??? ??? ??? ?其他的id属性值
?? ??? ??? ??? ??? ?<div id="top"></div>
?? ??? ??? ??? ?锚点的使用
?? ??? ??? ??? ??? ?<a href="#top"></a>
?? ??? ?-->
? ? ?
? ?<a href="http://www.baidu.com" target="_blank">百度</a>
?? ??? ?<hr>
?? ??? ?<h2 id="znjl">早年经历<br>
?? ??? ?*****************
?? ??? ?**************
?? ??? ?***********</h2>
?? ??? ?<a href="#">回到到顶部</a>
?? ??? ?<a href="#znjl">早年经历</a>
?? ??? ?
?? ??? ?
?? ??? ?<!--
?? ??? ?img标签
?? ??? ??? ?向网页中嵌入一张图片
?? ??? ??? ?
?? ??? ??? ?常用属性：
?? ??? ??? ??? ?src:需要引入的图片的地址（必须属性）
?? ??? ??? ??? ?alt：当图片破损或不存在时，显示的文本
?? ??? ??? ??? ?title：当图片悬停在图片上时显示的文本
?? ??? ??? ??? ?width：图片的宽度
?? ??? ??? ??? ?height：图片的高度
?? ??? ??? ??? ?border：图片的边框
?? ??? ?-->
? ? ? ?
?<img src="img/bd.png"width="500" height="500" border="2" title="点击了解更多">
?? ??? ?
?? ??? ?<!--
?? ??? ?表格标签：
?? ??? ??? ?table：表格
?? ??? ??? ?tr：行
?? ??? ??? ?td：标准单元格
?? ??? ??? ?th：表头（字体居中、加粗效果）
?? ??? ??? ?
?? ??? ??? ?table的属性
?? ??? ??? ??? ?width ?表的宽度
?? ??? ??? ??? ?border 边框
?? ??? ??? ??? ?align ?对齐方式
?? ??? ??? ??? ?style="border-collapse:collapse;合并表格的边框
?? ??? ?-->
? ? ? ?
?<table width="400px" align="center"border="1"style="border-collapse:collapse;">
?? ??? ??? ?<tr>
?? ??? ??? ??? ?<th>编号</th>
?? ??? ??? ??? ?<th>姓名</th>
?? ??? ??? ??? ?<th>年龄</th>
?? ??? ??? ?</tr>
?? ??? ??? ?<tr align="center" bgcolor="aqua">
?? ??? ??? ??? ?<th>1</th>
?? ??? ??? ??? ?<th>张三</th>
?? ??? ??? ??? ?<th>18</th>
?? ??? ??? ?</tr>
?? ??? ??? ?<tr>
?? ??? ??? ??? ?<th>2</th>
?? ??? ??? ??? ?<th>宣传</th>
?? ??? ??? ??? ?<th>22</th>
?? ??? ??? ?</tr>
?? ??? ??? ?
?? ??? ?</table>
?? ??? ?
?? ??? ?
?? ??? ?
?? ??? ?
?? ?</body>
</html>
|