1 <!DOCTYPE html>
2 <html lang="ch-zn">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="keyword" content="HTML">
6 <meta name="description" content="学习HTML的各种标签">
7 <title>学习HTML标签</title>
8 <style></style>
9 <link rel="stylesheet" href="">
10 <script></script>
11 </head>
12 <body>
13
14 <!--输入h1*4 用TAB键可自动补全 且乘以4的效果为4个<h1></h1>-->
15 <h1>我是最大标题 属于块级标签 </h1>
16 <h2>我是二级大标题 宽度为浏览器宽度 所以我独占一行</h2>
17 <h3>我是三级标题 我和二级标题比较常见 </h3>
18 <h4>我是四级标题 我有1~6六个兄弟</h4>
19 <h5>我是五级标题 你知道吗 所有的HTML标签都默认自带三个固有属性 id class style </h5>
20 <h6>我是六级标题 我告诉你 用hr标签可以画出水平分割线</h6>
21 <hr>
22 <!--块级标签可以嵌套行内标签（内联标签） 行内标签之间可灵活嵌套-->
23 <div>
24 <b>原价<s>999</s>元 现价只要<u>99</u>元</b>
25 <p>请先用换行标签br换行</p>
26 <br>
27 <i>上面是 u下划线文本标签 s删除线文本标签 的常见应用 并且用b文本标签对文本进行了加粗<br>我就没加粗 我自己是i斜体文本标签 </i>
28 </div>
29 <hr>
30 <p>我想告诉你 div标签是块级标签 span标签是行内标签 他们都如同白纸一张 自身没有任何样式</p>
31 <hr>
32 <a id="label1">标签一 我不跳转</a>
33 <!--段落p标签 属于块级标签 和标题标签 两者并列 不能互相嵌套-->
34 <p>介绍说明img标签的两个属性：alt属性和title属性的区别是前者是在图片无法加载的时候才会显示的其值,而title是在图片正常加载鼠标划上去显示的值,虽然alt也有后者的功能,但是只是在低版本的ie浏览器才支持,高版本及标准浏览器不支持这个功能了</p>
35 <p>下面用img标签引入一张本地图片</p>
36 <!--图片img标签的 三个特有属性 src alt title-->
37 <img src="timg.jpg" alt="这是一个图标" title="点我">
38 <p>下面用a标签做文本跳转 通过其特有的target属性 可以实现当前网页内不同位置的跳转 也可以实现从当前网页跳转到新开网页</p>
39 <!--文本a标签的两个特有属性 href target-->
40 <a href="https://wwww.baidu.com" target="_blank">跳转到百度</a>
41 <p>再 来 一 个 文 本 标 签</p>
42 <!--特殊字符   解决了html的对文本的空格问题-->
43 <p>下 面 标 签 可以 跳转到当前网页上部的标签一 借助了target的_self属性</p>
44 <a id="label2" href="#label1" target="_self">标签二 可以跳转到标签一</a>
45 <hr>
46 <p>下面我们来使用列表标签</p>
47 <p>一、带序号的列表标签 ol     orderlist 的缩写</p>
48 <p>列表的特殊属性有type :1阿拉伯数字 A大写字母 a小写字母 I大写罗马数字 i小写罗马数字</p>
49 <p>列表的特殊属性有start 序号从几开始 </p>
50 <ol type="I" start="3">
51 <li>列表1行</li>
52 <li>列表2行</li>
53 <li>列表3行</li>
54 </ol>
55 <hr>
56 <p>二、无序号的列表标签 ul</p>
57 <p>列表的特殊属性有type : circle空心圆 square实心方块 disc实心圆点-默认值 none无样式</p>
58 <!--emmt 插件 li{无序号列表￥}*4 +TAB键-->
59 <ul>
60 <li>无序号列表1</li>
61 <li>无序号列表2</li>
62 <li>无序号列表3</li>
63 <li>无序号列表4</li>
64 </ul>
65 <hr>
66 <p>三、标题列表标签 dl</p>
67 <dl>
68 <dt>标题1</dt>
69 <dd>内容1</dd>
70 <dt>标题2</dt>
71 <dd>内容2</dd>
72 <dt>标题3</dt>
73 <dd>内容3</dd>
74 <dt>标题4</dt>
75 <dd>内容4</dd>
76 </dl>
77 <hr>
78 <p>表格标签table 表格有头部标签thead 表格有身体标签tbody</p>
79 <p>表格标签table的属性 border边框 cellpadding内边距 cellspacing </p>
80 <br>
81 <p>表格二维 tr元素定义表格行，th元素定义表头，td元素定义表格单元</p>
82 <p>列标签td 属性： rowspan将行合并 colspan将列合并</p>
83
84 <hr>
85 <p>下面，用表格展示的形式，介绍HTML中的常用特殊符号</p>
86 <table border="1">
87 <theand>
88 <tr>
89 <th>序号</th>
90 <th>特殊字符</th>
91 <th>含义</th>
92 </tr>
93 </theand>
94 <tbody>
95 <tr>
96 <td>1</td>
97 <td>& nbsp;</td>
98 <td>空 格</td>
99 </tr>
100 <tr>
101 <td>2</td>
102 <td>& copy;</td>
103 <td>版权©</td>
104 </tr>
105 <tr>
106 <td>3</td>
107 <td>& reg;</td>
108 <td>注册®</td>
109 </tr>
110 <tr>
111 <td>4</td>
112 <td>& lt;</td>
113 <td>小于号<</td>
114 </tr>
115 <tr>
116 <td>5</td>
117 <td>& gt;</td>
118 <td>大于号></td>
119 </tr>
120 </tbody>
121 </table>
122 <hr>
123 <p>下面展示表格中单元格的合并</p>
124 <table border="1">
125 <thead>
126 <tr>
127 <td>星期一</td>
128 <td>星期二</td>
129 <td>星期三</td>
130 <td>星期四</td>
131 <td>星期五</td>
132 <td>星期六</td>
133 <td>星期七</td>
134 </tr>
135 </thead>
136 <tbody>
137 <tr>
138 <td>学习课程1</td>
139 <td colspan="2">学习课程2</td>
140 <!--<td>学习课程3</td>-->
141 <td>学习课程4</td>
142 <td>学习课程5</td>
143 <td>学习课程6</td>
144 <td rowspan="2">学习课程7</td>
145 </tr>
146 <tr>
147 <td>写作业1</td>
148 <td>写作业2</td>
149 <td>写作业3</td>
150 <td>写作业4</td>
151 <td>写作业5</td>
152 <td>写作业6</td>
153 <!--<td>写作业7</td>-->
154 </tr>
155 </tbody>
156 </table>
157
158 </body>
159 </html>
浙公网安备 33010602011771号