这篇博客详细整理了HTML5的学习笔记，包括HTML的结构生成、网页基础知识、Web标准、HTML标签规范和常用标签。此外，还深入介绍了VSCode工具的使用，如插件安装，以及HTML中的表格、列表和表单元素，如input、select、textarea的使用。同时，强调了标签语义化和注释标签的重要性。
HTML学习笔记整理
目录
HTML结构快速生成
- 生成标签，英文半角下shift+1,得到!，按下tab键
- 多个相同标签： * 【eg:div*3】
- 父子级标签：> 【eg:ul>li】
- 兄弟标签：+ 【eg:div+p】
- 带有类名的：.类名 【eg:.pink】
- 带有ID名的：#类名 【eg:#name 若为p#name则得到<p id='name'></p>】
- 生成的类名有顺序的，可用自增符号：$
- 【eg:name$*2得到<name1></name1> <name2></name2>】
- 【eg:p{$}*2得到<p>1</p> <p>2</p>】
- 花括号{}：【eg:p{你好}得到<p>你好</p>】
Day1
问：
网页的基本组成
什么是html
常用的浏览器
什么是WEB标准的三大组成部分
目录：
网页、常用浏览器、web标准组成部分
00-03.网站、网页
网站：多个网页的集合
网页：是构成网站的基本元素。是网站中的一“页”，为html格式的文件，需要通过浏览器阅读。一般由 图片+文字+音频等元素组成。常见以.html或.htm后缀结尾，即俗称为html文件。
.html：指超文本（超越了文本限制，超级链接文本）标记语言，专门描述网页的一种语言。是一种标记语言，由标签组成。
04.常用浏览器、内核
常用浏览器（五大）：微软（IE、edge）、火狐（Firefox）、谷歌（Chrome）、Safari、Opera...
浏览器内核（渲染引擎）：负责读取网页内容，整理讯息，计算网页的显示情况
| 内核 | 备注（其余浏览器） | |
|---|---|---|
| IE | Trident | IE、猎豹安全、360极速、百度 |
| FireFox | Gecko | FireFox |
| Safari | Webkit | 苹果 |
| Chrome/Opera | Blink（Webkit的分支） | Chrome/Opera、UC、QQ、搜狗、360... |
05.Web标准
Web标准：将结构、表现、行为独立分开
W3C标准：网页 = 结构(html) + 表现(css) + 行为(js)
Web标准由W3C（万维网联盟）阻止和其他标准化组织指定的一系列标准集合。
为什么需要：发展前景广、内容能被更广泛的设备访问、易被搜索、降低网站费用、易于维护、提高浏览速率。
Web标准的构成（三大部分）：
- ①.结构(似身体)：HTML 用于网页元素进行整理和分类。
- ②.表现(似装饰外观)：CSS 用于设置网页元素的版式、颜色、大小...等外观样式。
- ③.行为(似行为动作)：JS 网页模型的定义以及交互的编写。
06.HTML标签
问：
标签书写规范
html骨架标签
写出超链接标签
写出图片标签alt和title的区别
相对路径的三种形式
目录：
html的语法规范、基本结构标签、开发工具、常用标签、注释和特殊字符。
07.HTML语法规范
都包含在<>里，大部分都是成对出现的。
双标签：<开始></结束>，例如：<html></html>，
单标签：不需要结束标签，例如：<br />
- 标签关系
双标签关系可分为：包含关系、并列关系
| 包含关系（eg:父子关系） | 并列关系（eg:兄弟关系） |
|---|---|
| eg：<head> <title></title> </head> | eg: <head></head> <body></body> |
08.HTML基础结构标签
html页面也称为html文档，每个网页都有一个基本的结构标签（即：骨架标签）。文档后缀名为.html或.htm
| 标签名 | 定义 | 备注 |
|---|---|---|
| <html></html> | HTML标签 | 页面中最大的标签，也称为：根标签 |
| <head></head> | 文档头部 | head标签中必须设置title标签 |
| <title></title> | 文档标题 | 设置网页标题 |
| <body></body> | 文档主体 | 包含文档所有内容，基本都放在body里 |
09—10.VSCode工具创建页面
使用的网页开发工具：visual studio code（简称：VSCode）
插件使用（推荐安装）：
| Chinese Language | 中文语言包 |
| open in Brower | 右击选择浏览器打开html文件 |
| JS-CSS-HTML Formatter | 每次保存，会自动格式化js、css和html代码 |
| Auto Rename Tag | 自动重命名配对的html/XML标签 |
| CSS Peek | 追踪主样式 |
其余注意事项：
- <!DOCTYPE>：处于<html>标签之前，不是html标签，而是文档类型声明标签
- lang语言种类：定义当前文档显示的语言（常用 en：英文、zh-Ch：中文），告诉大家这个是英文网站or中文网站or....网站
- 【eg：<html lang = "en">，告诉浏览器or搜索引擎，这是英文网站】
- 字符集charset，常用的值：GB2312、BIG5、GBK、UTF-8(这个最常用，称之为万国码)
- ※必要代码，否则页面可能会乱码：<meta charset = "UTF-8"/>
11.标签语义
标签语义：即这个标签的用途是什么。
12—18.html中常用的标签
-
标题标签(作用：作标题使用)：
<h1>——<h6>，六个等级的网页标签，字体大小效果递减。块级元素，独占一行。
-
段落标签(作用：把html文档分割为若干段)：
<p>，
自动换行：ctrl+z 特点：根据窗口大小自动换行，段与段之间有空隙
-
换行标签(作用：强制换行)：
<br />，其为单标签
-
文本标签(作用：突出重要性)
| 加粗 | <strong></strong>或<b></b> |
|---|---|
| 倾斜 | <em></em>或<i></i> |
| 删除线 | <del></del>或<s></s> |
| 下划线 | <ins></ins>或<u></u> |
-
盒子(无语义，用于布局)
| <div></div> | 块级元素，一行只能放一个<div>，大盒子 |
| <span></span> | 行内元素，一行可放多个<span>，小盒子 |
-
图像标签和路径
※单标签：<img key = "value">
【<img src = "图像URL">，src为必须属性，用于指定图像文件的路径和文件名】
| 属性 | 属性值 | 说明 |
|---|---|---|
| ※src | 图片路径 | 必须属性 |
| alt | 文本（替换） | 图像未显示时，alt的值替换 |
| title | 文本（提示） | 鼠标放在上面，显示title的值 |
| border | 像素 | 设置图片边框粗细 |
| width | 像素 | 设置图片宽度 |
| height | 像素 | 设置图片高度 |
注：width和height只用设置其中一个即可，系统会自动按比例缩放图片大小。
<body>
字体<strong>加粗</strong> 字体<br />
<em>倾斜</em> 字体<br />
<del>删除线</del> 字体<br />
<ins>下划线</ins><br />
<div>div标签我是一个人独占一行</div>
<span>baidu</span>
<span>sina</span>
<span>sohu</span>
</body>19—20.目录文件夹和根目录
目录文件夹 > 根目录
21—23.路径
相对路径：以某一个文件作为参考。
- 同一级：<img src = "...... .gif">
- 下一级：<img src = "....../...... .gif">
- 上一级：<img src = "../...... .gif">
绝对路径：在电脑中的地方
<body>
<p><br />相对路径
<br />同一路径：
<img src="green01.jpg" />
<br />上一级路径：
<img src="../图片文件夹/上0.gif" />
<br /> 下一级路径：
<img src="图片文件夹/1.gif" />
</p>
<p><br />绝对路径：
<img src="C:\Pictures\壁纸\84903.jpg" />
</p>
</body>24—26.链接标签
※双标签：
<a href="跳转目标" target="目标链接页面的打开方式">文本或图像</a>
| href | 为必须属性，用于指定链接目标的url地址 |
|---|---|
| target | 指定目标链接页面的打开方式。 _self ：为默认值，用当前窗口打开 _blank：在新窗口中打开 |
链接分类：
| 外部链接 | 跳转目标需要以 http://......开头 |
|---|---|
| 内部链接 | 网站内部页面的相互链接 |
| 空链接 | # (即：href="#") |
| 下载链接 | 当地址链接为文件.exe 或 压缩包.zip 形式时 (即：href="...... .exe" 或 href="...... .zip") |
| 网页元素链接 | 通过多媒体即可打开 (即：<a href="......"><img src="......"/></a>) |
| 锚点链接 | 点击链接即可快速定位到页面中的某个位置 步骤： 1.在链接文本href中设置 #名字。eg:<a href="#two"> 2.找到目标位置，添加ID属性。eg:<h3 id="one"> |
<body id="mulu">
<h4>1.外部链接</h4>
<a href="https://www.qq.com/" target="_blank">腾讯</a>
<h4>2.内部链接</h4>
<a href="06-新闻报告.html" target="_blank">新闻报告</a>
<h4>3.空链接</h4>
<a href="#">空的链接</a>
<h4>4.下载链接</h4>
<a href="图片文件夹.zip">下载链接</a>
<h4>5.网页元素链接</h4>
<a href="https://baidu.com" target="_blank"><img src="green01.jpg"> 空的链接</a>
<br />
<br />
<h4>6.锚点链接</h4>
<h2>目录</h2>
<a href="#jibenxinxi">
<h4>1 基本信息</h4>
</a><br />
<h4>2 演艺经历</h4><br />
<h4>3 主要作品</h4><br />
<a href="#renwupingjia">
<h4>4 人物评价</h4><br />
</a>
<h4 id="jibenxinxi">1 基本信息</h4><br /></a> 谭松韵出生于泸州叙永，从小就喜欢看书、跳舞。2001年，谭松韵到四川省舞蹈学校学习古典舞和民间舞 [113] 。谭松韵考北京电影学院时，家里亲戚都不看好，但是父母却支持她的决定。在她复读的一年，家里经济负担很重 [114] 。 谭松韵十五岁就开始接触表演，小时候就特别有艺术天分，与其他小朋友在一起也非常显眼 [18] 。
<h4>2 演艺经历</h4><br /> 2005年，拍摄电视剧《好好过日子》开始接触表演 [1] 。 2007年，考入北京电影学院表演系 [2] 。 2008年，拍摄电影《5.12汶川不相信眼泪》。 2009年，接拍青春军旅剧《我的燃情岁月》，在剧中饰演温婉善良的小妹 [19] 。 2010年，首次尝试情景喜剧，在中国版《搞笑一家人》中饰演有着“特殊身份”的高中生蒋贝迪 [14] [20] ；随后加盟都市情感剧《幸福攻略》，形象乖巧的她扮演叛逆倔强的菲儿 [21] ；同年，还在郑晓龙指导的清宫剧《后宫·甄嬛传》中出演可爱单纯的淳儿
[3] 。 2011年，接拍电影《梦回鹿鼎记》，饰演沐剑屏。 2012年，拍摄陈凯歌指导的电影《搜索》 [22] ，并在多部影视剧中出演角色，如《林师傅在首尔》中的权锦绣 [23] ，《民国警花》中的女警花伍月，《金太狼的幸福生活》中的彤彤等。 2013年，与刘德华、林志玲等拍摄电影《富春山居图》，扮演双子座魔女；随后与郭富城、孙红雷等合作电影《全民目击》 [24] 。 2014年，主演电视剧《大当家》，饰演单纯直率的桂花香 [25] ；随后与宋丹丹合作出演电视剧《幸福请你等等我》，饰演宋丹丹的女儿何朵朵
[26] 。 2015年，主演电视剧《孙老倔的幸福》，饰演欢欢 [27] ；4月，参演电视剧《旋风少女》，并在剧中饰演古灵精怪惹人爱的范晓萤 [28] ；12月11日，主演的校园清新喜剧电影《最美的时候遇见你》上映 [29] 。2016年4月8日，由其主演的根据同名小说改编的校园青春网络剧《最好的我们》在爱奇艺播出，她在剧中饰演乐观大方、热心体贴的耿耿，并凭借该剧获得2017爱奇艺尖叫之夜年度最具潜力演员奖。 [4] [15] [30] ；7月，主演青春励志电视剧《旋风少女第二季》 [31]
；8月12日，参演的爱情电影《微微一笑很倾城》上映，在片中饰演性格爽朗的二喜 [5] ；11月，在都市爱情剧《特化师》中饰演个性率真的化妆品销售陈真 [32] 。
</body>27.注释标签、特殊字符
注释标签：<!--注释语句-->
快捷键用：ctrl+/
特殊字符：
| 特殊字符 | 意义 | 写法 |
|---|---|---|
| 空格 |   | |
| < | 小于 | < |
| > | 大于 | > |
| & | 和 | & |
| ￥ | 人民币 | ¥ |
| © | 版权 | © |
| ® | 注册商标 | ® |
| ° | 摄氏度 | ° |
| ± | 正负号 | ± |
| × | 乘号 | × |
| ÷ | 除号 | ÷ |
| ² | 平方 | ² |
| ³ | 立方 | ³ |
<body>
<!-- 注释语句：以 小于号感叹号两个中间小横 开头 以两个中间小横和大括号结束--> -->
<!-- 首页 -->
<br />特殊字符：<br />
<br />空格：
<br /> 小于号：<
<br /> 大于号：>
<br />和：&
<br />人民币：¥
<br />版权：©
<br />注册商标：®
<br />摄氏度：°
<br />正负号：±
<br />乘号：×
<br />除号：÷
<br />平方：²
<br />立方：³
</body>Day2
目录：
写表格、写无序列表、写3—4个常用input表单类型、写下拉列表表单、使用表单元素实现注册页面、独立查阅W3C文档
00—03.表格标签
作用：显示、展示数据
基本语法：
<table>
<tr>
<th>标头标题(文本内容加粗居中显示)</th>
......
</tr>
<tr>
<td>单元格内文字</td>
......
</tr>
......
</table>标头标签：<th>姓名</th>：文本内容加粗居中显示
04.表格属性（了解即可，css用）
| 属性名 | 属性值 | 描述 |
|---|---|---|
| align | left、center、right | 规定表格相对周围元素的对齐方式 |
| border | 1 或 "" | 规定表格单元是否有边框，默认为""无边框 |
| cellpadding | 像素值 | 文字与单元边框之间的空白，默认为1像素 |
| cellspacing | 像素值 | 单元格之间的空白，默认为2像素 |
| width | 像素值or百分比 | 规定表格的宽度 |
| height | 像素值or百分比 | 规定表格的长度 |
05.表格标签
先做表格结构，再进行美化，再写表格属性<table align="..." cellpadding="..."...>
<table>
<tr>
<th>标头标题(文本内容加粗居中显示)</th>
......
</tr>
<tr>
<td>单元格内文字</td>
......
</tr>
......
</table>- <thead></thead>：用于定义表格的头部。<thead>内部必须拥有<tr>标签，一般位于第一行。
- <tbody></tbody>：用于定义表格的主体，主要用于放数据文本。
<table>
/*头部*/
<thead>
<tr>
<th>标头标题(文本内容加粗居中显示)</th>
......
</tr>
</thead>
/*主体*/
<tbody>
<tr>
<td>单元格内文字</td>
......
</tr>
......
</tbody>
</table>06—08.合并单元格
合并单元格步骤：弄清是跨行还是跨列——>找到目标单元格——>删除多余的单元格
1.合并单元格方式：
- 跨行合并：rowspan="合并单元格的个数"
- 跨列合并：colspan="合并单元格的个数"
2.目标单元格：
- 跨行：最上侧单元格为目标单元格。
- 跨列：最左侧单元格为目标单元格。
3.删除多余的单元格
09—12.列表标签
无序标签（※重要※）
列表：是用来布局的。其特点：整洁、有序。
列表标签可分为三类：无序列表、有序列表、自定义列表
| 基本语法格式 | 特点 | |
|---|---|---|
| 无序列表 （重点） | <ul> <li>列表项</li> ...... </ul> | 1.无序列表的各列表项之间无顺序之分，是并列的。 2.<ul></ul>里只能嵌套<li></li>，不止一个<li> 3.但是<li></li>可容纳所有元素，相当于一个容器。 4.无序列表会带有自己的样式属性，但在实际使用时，我们用CSS设置。 |
| 有序列表 （理解） | <ol> <li>列表项</li> ...... </ol> | 1.<ol></ol>里只能嵌套<li></li>，不止一个<li> 2.有排序的 3.但是<li></li>可容纳所有元素，相当于一个容器。 4.有序列表会带有自己的样式属性，但在实际使用时，我们用CSS设置。 |
| 自定义列表 （重点） | <dl> <dt>名词1</dt> <dd>名词2解释1</dd> <dd>名词2解释2</dd> ...... </dl> | 1.<dl></dl>里只能嵌套<dt>和<dd> 2.<dt>和<dd>没有个数限制，但通常是一个<dt>对应多个<dd> 3.<dt>和<dd>其实并列关系（兄弟关系）。 4.<dt>和<dd>里可以放任何标签 |
<body>
<h2>无序列表</h2>
<h4>水果</h4>
<ul>
<li>葡萄
<p>葡萄的种植</p>
</li>
<li>车厘子</li>
<li>榴莲</li>
</ul>
<h2>有序列表</h2>
<h4>喜欢的水果排序</h4>
<ol>
<li>榴莲</li>
<li>车厘子</li>
<li>葡萄
<p>葡萄所含营养成分</p>
</li>
</ol>
<h2>自定义列表</h2>
<h4>水果简介</h4>
<dl>
<dt>榴莲</dt>
<dd>糖分含量</dd>
<dd>水分含量</dd>
<dd>维生素含量</dd>
</dl>
</body>13—21.表单标签
为什么需要表单？为了收集用户信息，即表单的目的。
表单的组成（三部分）：表单域、表单控件(也称为表单元素)、提示信息
-
表单域（form标签）
表单域<form>包含表单元素的区域，用以实现用户信息的收集和传递。会把它范围内的表单元素信息提交给服务器。
<form action="url地址" method="提交方式" name="表单域名称">
//action="url地址"：指定接收处理表单数据的服务器程序的url地址。
//method="提交方式"：设置表单数据的提交方式，属性值为get/post。
//name="表单域名称"：用于指定表单名称，以区分同一个页面中的多个表单域。
......//各元素控件
</form>-
表单控件（表单元素）
单标签：<input type="属性值" />
<input>标签用于收集用户信息，其type的属性值以及其余可补充的有以下12种：
| text | 文本框，可输入任何文字 |
|---|---|
| password | 密码框，输入密码（用户看不见） |
| radio | 单选按钮，可实现多选一。 <input type="属性值" name="独一无二的名字"> |
| checkbox | 复选框，可实现多选。 |
| name | 定义元素的名称，区别不同表单。 |
| value | 规定元素的值。可用placeholder。 |
| checked | 主要针对单选按钮和复选框。一打开页面就可默认选中某个表单元。 |
| maxlength | 规定输入字段中的字符的最大长度（可自行学习正则表达）。 |
| submit | 提交按钮，可把form表单元素里的值提交给后台服务器。 |
| reset | 重置按钮，将表单元素还原初始的默认状态。 |
| button | 普通按钮button，可结合JS使用。 |
| file | 文件域，使用场景：上传文件（eg：上传头像） |
22.label标签
当点击<label>标签时，浏览器会自动选择对应表单元素。增加用户体验。
eg：点击某张图时，浏览器自动选该图反应的表单元素。
<label for = "sex">......</label>
<input type="radio" nme="sex" id="sex" />注：<label>标签的for属性应该与相关元素的id属性相同。
23.select下拉表单元素标签
特点：1.<select>中至少有一对<option>
2.<option>中定义selected，selected="selected"时，当前项即为默认选中（类似input中的checked）
<select>
<option>选项1</option>
......
<option>选项n</option>
</select>24.textarea文本域元素表单元素
目的：可轻松创建多行文本输入框。
<textarea rows='3' cols='20'>
//其中 rows显示行数，cols显示每行中的字符数。少用，一般用css。
文本内容
</textarea>25—29.实例操作
表单元素input标签，label标签
<body>
<form>
<label for='text'>用户名（有label标签）：</label><input type='text' id='text'><br>
<!-- text 文本框 -->
用户名：<input type="text" name='username' value='请输入用户名'><br>
<!-- password 密码框 -->
密码：<input type="password" name='pwd' placeholder='请输入密码'><br />
<!-- radio 单选按钮 可实现多选一 -->
<!-- name是表单元素名字。其中，单选按钮必须有相同的名字name,才可以实现多选一 -->
<!-- 单选按钮和复选框可以设置checked属性，当页面打开时就可以默认选中这个按钮 -->
性别：男<input type="radio" name='sex'>女<input type="radio" name='sex' checked='checked'><br>
<!-- checkboX 复选框 可实现多选 -->
爱好：音乐<input type='checkbox' name='hobby'>绘画<input type='checkbox' name='hobby'>手工<input type='checkbox' name='hobby' checked='checked'>运动<input type='checkbox' name='hobby'><br>
<!-- 点击了提交按钮，把表单域form里面的表单元素 里面的值 提交给后台服务器 -->
<input type="submit" value='免费注册'><br>
<!-- 重置按钮可以还原表达元素初始的默认值 -->
<input type='reset' value='重新填写'><br>
<!-- 普通按钮button 后期结合js搭配使用 -->
<input type='button' value='获取短信验证码'><br>
<!-- 文件域 使用场景 上传文件使用的 -->
上传头像：<input type='file'>
</form>
</body>select下拉表单元素
<body>
请选择：
<select>
<option value="">休息</option>
<option value="">健身</option>
<option selected='selected' value="">学习</option>
</select>
</body>textarea文本域元素表单元素
<body>
<form>
今日反馈：
<textarea row='6' cols='68'>
今日反馈的内容留言是textarea做的
</textarea>
</form>
</body>综合案例
<body>
<h4>青春</h4>
<!-- 第一行 单选-->
<table width='600' border="1" cellspacing='0'>
<tr>
<td>性别</td>
<td>
<input type='radio' name='sex' id="man"><label for="man"><img src="图片/man.png" height="20">男</label>
<input type='radio' name='sex' id="girl"><label for="girl"><img src="图片/girl.png" height="20">女</label>
</td>
</tr>
<!-- 第二行 下拉-->
<tr>
<td>生日</td>
<td>
<select name="" id="">
<option selected ='selected'>--请选择年--</option>
<option>1996</option>
<option value="">1997</option>
<option value="">1998</option>
<option value="">1999</option>
<option>20000</option>
</select>
<select name="" id="">
<option selected ='selected'>--请选择月--</option>
<option>07</option>
<option value="">08</option>
<option value="">09</option>
<option value="">10</option>
<option>11</option>
</select>
<select name="" id="">
<option selected ='selected'>--请选择日--</option>
<option>05</option>
<option value="">06</option>
<option value="">08</option>
<option value="">20</option>
<option>21</option>
</select>
</td>
</tr>
<!-- 第三行 文本-->
<tr>
<td>所在地区</td>
<td><input type="text" value='北京市'> </td>
</tr>
<!-- 第四行 -->
<tr>
<td>结婚</td>
<td>
<input type="radio" name='marry'>未婚
<input type="radio" name='marry'>结婚
<input type="radio" name='marry'>其他
</td>
</tr>
<!-- 第五回 单选-->
<tr>
<tr>学历</tr>
<tr>
<select>
<option>研究生</option>
<option>本科生</option>
</select>
</tr>
</tr>
<!-- 第六行 复选-->
<tr>
<td>喜欢的类型</td>
<td>
<input type='checkbox' name='style' checked='checked'> 元气可爱范
<input type='checkbox' name='style'>成熟御姐范
<input type='checkbox' name='style'>青春鲜肉范
<input type='checkbox' name='style'>深沉腊肉范
</td>
</tr>
<!-- 第七行 -->
<tr>
<td>个人简介</td>
<td>
<textarea rows="3" cols="52" type='placeholder'>请输入个人简介
</textarea>
</td>
</tr>
<!-- 第八行 -->
<tr>
<td></td>
<td><input type="submit" value="免费注册"></td>
</tr>
<!-- 第九行 -->
<tr>
<td></td>
<td><input type='checkbox' name='agree' checked='checked'> 我同意免费注册条款和会员加入标准</td>
</tr>
<!-- 第十行 -->
<tr>
<td></td>
<td>
<a href="我是会员，立即登录"></a>
</td>
</tr>
<!-- 第十一行 -->
<tr>
<td></td>
<td>
<h4>我郑重承诺</h4>
<ul>
<li>年满18岁</li>
<li>真诚不虚假</li>
<li>准守道德准则</li>
</ul>
</td>
</tr>
</table>
</body>
30.查找文档
百度
菜鸟教程：W3C 教程 | 菜鸟教程
W3C：World Wide Web Consortium (W3C)
W3School：w3school 在线教程
MDN：MDN Web Docs
扫一扫
9167
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
