├── FlowerFire.mp3 ├── HTML_Note.html ├── README.md ├── gameplay.mp4 ├── tel.png ├── violet.jpg └── 资料说明.txt /FlowerFire.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AndyofJuly/HTML_Study/7c68ebab88f8234657952dccb02a1219b6d64787/FlowerFire.mp3 -------------------------------------------------------------------------------- /HTML_Note.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Node_of_HTML 6 | 7 | 8 |

提醒：学习时右键查看源代码

9 |
10 |

第一部分-简单标签元素

11 | 1.超链接（默认替换链接） 12 |

13 | 2.新建窗口跳转至链接 14 |

15 | 3.原窗口替换链接 16 |

17 | 4.这一行是没有粗体、斜体时的效果，对比下面 18 |

19 | 5.这个是粗体 20 |

21 | 6.斜体效果 22 |

23 | 7.下划线效果 24 |

25 | 8.删除效果 26 |

27 | 9.粗体、斜体、下划线、删除效果叠加 28 | 29 |

30 |

第二部分-表格------------------------华丽的分割线---------------------------------

31 |

1.普通表格
32 |
33 | 34 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 |
名字性别密码
Admin男啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊123
Violet女456
Andy男xxx
名字性别密码
71 |
72 | 73 |

2.合并表格
74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 |
aaaaaaaaaaaa
aaaaaa
aaaaaaaaaaaa
94 | 95 |

3.列表-分别为顺序、倒序和英文字母顺序排列
96 |
97 | (1)顺序排列 98 |
    99 |
  1. 你好
    2. 100 |
  2. 我好
    3. 101 |
  3. 大家好
    4. 102 |
103 |
104 | (2)倒序排列 105 |
    106 |
  1. 你好
    2. 107 |
  2. 我好
    3. 108 |
  3. 大家好
    4. 109 |
110 |
111 | (3)英文字母顺序排列 112 |
    113 |
  1. 你好
    2. 114 |
  2. 我好
    3. 115 |
  3. 大家好
    4. 116 |
117 | 118 |

4.列表嵌套
119 |
    120 |
  1. 图像处理
    2. 121 |
      122 |
    1. java
      2. 123 |
    2. python
      3. 124 |
    3. PHP
      4. 125 |
    126 | 127 |
  2. 大数据处理
    3. 128 |
      129 |
    1. java
      2. 130 |
    2. python
      3. 131 |
    3. PHP
      4. 132 |
    133 |
  3. 自然语言处理
    4. 134 |
      135 |
    1. java
      2. 136 |
    2. python
      3. 137 |
    3. PHP
      4. 138 |
    139 |
140 | 141 |

5.无序标签
142 |
143 | 148 | 149 | 150 |

151 |

第三部分-表单------------------------华丽的分割线---------------------------------

152 | 153 |
154 |

1.普通文本框（可以输入信息）
155 | 156 | 157 | 158 |

2.含占位符的文本框
159 | 160 | 161 |

3.不含占位符的文本框（有提示）
162 | 163 |
164 | 165 | 166 |

4.限定输入字符数大小的文本框
167 | 168 | 169 |

5.拓宽了的的文本框
170 | 171 | 172 |

6.只读的文本框
173 | 174 | 175 |

7.密码隐藏的文本框
176 | 177 | 178 |

8.多行表单，任意拉伸
179 | 181 | 182 |

9.按钮
183 | 184 |
185 | 186 |
187 | 188 | 189 |

10.范围选择
190 | 191 | 192 | 193 |
194 | 195 | 196 |

11.选择框
197 | 选择 198 | 199 |

12.单选框
200 | 那个语言天下第一
201 | java 202 | PHP 203 | JavaScript 204 | 205 |

12.下拉选择表单
206 | 你最喜欢的手机品牌是什么 207 |
208 | 213 | 214 |

13.下拉选择表单及手动输入
215 | 216 | 217 | 218 | 219 | 220 | 221 | 222 | 223 |

14.邮件、电话、url、日期颜色等
224 | 225 | 226 | 227 | 228 | 229 | 230 |

15.隐藏表单
231 | 232 | 233 |

16.图片按钮及选择文件
234 | 薇尔莉特永远喜欢我！
235 | 236 |
237 | 238 |
239 | 240 |

241 |

第四部分-插入图片------------------------华丽的分割线---------------------------------

242 |

1.创建图片
243 | 244 | 薇尔莉特 245 | 246 |

2.找不到图片时
247 | 薇尔莉特 248 | 249 |

3.点击图片跳转到某个网站
250 | 251 | 薇尔莉特 252 | 253 | 254 |

4.分区响应图（大家可以点击任意一个app来玩一玩，很有意思吧）
255 | 256 | 257 | 260 | 261 | 262 | 263 | 264 | 265 | 266 | 267 | 268 | 269 | 270 | 271 | 272 | 273 | 274 | 275 | 276 | 277 | 278 | 279 | 280 |

第五部分-插入视频------------------------华丽的分割线---------------------------------

281 |

点击进行播放
282 | 283 | 284 | 285 |

第六部分-插入音频------------------------华丽的分割线---------------------------------

286 |

提醒：调节好音量后点击进行播放
287 | 288 | 289 | 290 | 291 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # HTML_Study 2 | HTML入门学习及笔记 3 | 这是配套视频的源代码及笔记，欢迎访问，制作不易，希望大家能多star或者fork！ 4 | 相信该资料会对大家有所帮助，感兴趣的可以下载来玩一玩或者学一学。 5 | 6 | 效果展示请点击： 7 | HTML源码，点我，复制以后存为html文件，即可访问，有需要的也可以直接下载，求给个start 8 | 9 | 10 | 源代码： 11 | ``` 12 | 13 | 14 | 15 | 16 | Node_of_HTML 17 | 18 | 19 |

提醒：学习时右键查看源代码

20 |
21 |

第一部分-简单标签元素

22 | 1.超链接（默认替换链接） 23 |

24 | 2.新建窗口跳转至链接 25 |

26 | 3.原窗口替换链接 27 |

28 | 4.这一行是没有粗体、斜体时的效果，对比下面 29 |

30 | 5.这个是粗体 31 |

32 | 6.斜体效果 33 |

34 | 7.下划线效果 35 |

36 | 8.删除效果 37 |

38 | 9.粗体、斜体、下划线、删除效果叠加 39 | 40 |

41 |

第二部分-表格------------------------华丽的分割线---------------------------------

42 |

1.普通表格
43 |
44 | 45 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 |
名字性别密码
Admin男啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊123
Violet女456
Andy男xxx
名字性别密码
82 |
83 | 84 |

2.合并表格
85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 |
aaaaaaaaaaaa
aaaaaa
aaaaaaaaaaaa
105 | 106 |

3.列表-分别为顺序、倒序和英文字母顺序排列
107 |
108 | (1)顺序排列 109 |
    110 |
  1. 你好
    2. 111 |
  2. 我好
    3. 112 |
  3. 大家好
    4. 113 |
114 |
115 | (2)倒序排列 116 |
    117 |
  1. 你好
    2. 118 |
  2. 我好
    3. 119 |
  3. 大家好
    4. 120 |
121 |
122 | (3)英文字母顺序排列 123 |
    124 |
  1. 你好
    2. 125 |
  2. 我好
    3. 126 |
  3. 大家好
    4. 127 |
128 | 129 |

4.列表嵌套
130 |
    131 |
  1. 图像处理
    2. 132 |
      133 |
    1. java
      2. 134 |
    2. python
      3. 135 |
    3. PHP
      4. 136 |
    137 | 138 |
  2. 大数据处理
    3. 139 |
      140 |
    1. java
      2. 141 |
    2. python
      3. 142 |
    3. PHP
      4. 143 |
    144 |
  3. 自然语言处理
    4. 145 |
      146 |
    1. java
      2. 147 |
    2. python
      3. 148 |
    3. PHP
      4. 149 |
    150 |
151 | 152 |

5.无序标签
153 |
154 | 159 | 160 | 161 |

162 |

第三部分-表单------------------------华丽的分割线---------------------------------

163 | 164 |
165 |

1.普通文本框（可以输入信息）
166 | 167 | 168 | 169 |

2.含占位符的文本框
170 | 171 | 172 |

3.不含占位符的文本框（有提示）
173 | 174 |
175 | 176 | 177 |

4.限定输入字符数大小的文本框
178 | 179 | 180 |

5.拓宽了的的文本框
181 | 182 | 183 |

6.只读的文本框
184 | 185 | 186 |

7.密码隐藏的文本框
187 | 188 | 189 |

8.多行表单，任意拉伸
190 | 192 | 193 |

9.按钮
194 | 195 |
196 | 197 |
198 | 199 | 200 |

10.范围选择
201 | 202 | 203 | 204 |
205 | 206 | 207 |

11.选择框
208 | 选择 209 | 210 |

12.单选框
211 | 那个语言天下第一
212 | java 213 | PHP 214 | JavaScript 215 | 216 |

12.下拉选择表单
217 | 你最喜欢的手机品牌是什么 218 |
219 | 224 | 225 |

13.下拉选择表单及手动输入
226 | 227 | 228 | 229 | 230 | 231 | 232 | 233 | 234 |

14.邮件、电话、url、日期颜色等
235 | 236 | 237 | 238 | 239 | 240 | 241 |

15.隐藏表单
242 | 243 | 244 |

16.图片按钮及选择文件
245 | 薇尔莉特永远喜欢我！
246 | 247 |
248 | 249 |
250 | 251 |

252 |

第四部分-插入图片------------------------华丽的分割线---------------------------------

253 |

1.创建图片
254 | 255 | 薇尔莉特 256 | 257 |

2.找不到图片时
258 | 薇尔莉特 259 | 260 |

3.点击图片跳转到某个网站
261 | 262 | 薇尔莉特 263 | 264 | 265 |

4.分区响应图（大家可以点击任意一个app来玩一玩，很有意思吧）
266 | 267 | 268 | 271 | 272 | 273 | 274 | 275 | 276 | 277 | 278 | 279 | 280 | 281 | 282 | 283 | 284 | 285 | 286 | 287 | 288 | 289 | 290 | 291 |

第五部分-插入视频------------------------华丽的分割线---------------------------------

292 |

点击进行播放
293 | 294 | 295 | 296 |

第六部分-插入音频------------------------华丽的分割线---------------------------------

297 |

提醒：调节好音量后点击进行播放
298 | 299 | 300 | 301 | 302 | ``` 303 | -------------------------------------------------------------------------------- /gameplay.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AndyofJuly/HTML_Study/7c68ebab88f8234657952dccb02a1219b6d64787/gameplay.mp4 -------------------------------------------------------------------------------- /tel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AndyofJuly/HTML_Study/7c68ebab88f8234657952dccb02a1219b6d64787/tel.png -------------------------------------------------------------------------------- /violet.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AndyofJuly/HTML_Study/7c68ebab88f8234657952dccb02a1219b6d64787/violet.jpg -------------------------------------------------------------------------------- /资料说明.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AndyofJuly/HTML_Study/7c68ebab88f8234657952dccb02a1219b6d64787/资料说明.txt --------------------------------------------------------------------------------