目录
HTML
首先我们要了解HTML是一个骨架，用于搭建我们前端的框架出来；明白这一点后开始正式学习HTML。（我们在学习时候用的开发软件是Visual Studio Code 下载地址：http://vscode.bianjiqi.net/）
HTML-注释：
首先了解html的注释，注释是给程序员看的 所以我们首先要学习他 ，它可以使得我们更加了解我们写的程序，（需注意的是 html注释是写在body里面的）
HTML- 标签的结构：
标签是我们网页构成非常重要的 所有的内容都和标签有关，（标签也可以称作为元素等等）当然标签分为双标签和单标签
双标签：
单标签：
这里只是给大家看看2个例子 以后的学习 会遇到很多很多的标签 他们基本就分为单标签和双标签
HTML-标题和段落：
标题<h></h>标签：
代码：标签都是h系列的标签
特点：1文字加粗 2文字变 3独占一行
场景：在新闻和文章页面标题可以凸显出文章的主题
段落标签：
代码：在p标签里面
特点：1段落之前有间隙 2独占一行
HTML-换行和水平线:
换行标签：
水平线 : 
HTML-文本格式化标签：
这些标签主要应用在：让文字 加粗 ，下划线， 倾斜， 删除线等效果
这2个表效果都一样，后面这个突出重要性强调语境
HTML-图片标签：
应用场景：在网页中显示图片
特点：单表签
img标签需要展示对应的效果，需要借助标签属性进行设置（属性会在css里面详细的说明）
HTML-路径：
在前面学的我们加载图片需要加载图片 需要图片的路径 这就涉及到了路径的有关问题；路径主要分为主要路径和相对路径我们用的最多的基本上是相对路径；
绝对路径:
指目录下的绝对位置，通常从盘符开始，这个基本用的很少因为每个人的盘符可能路径不一样 例如：有些人没有D盘或者不同系统的电脑路径都不一样 所以我们要重点掌握相对路径；
相对路径:
指从当前开始出发找文件的过程；主要分为同级目录，下级目录，上级目录；在Visual Styduo Code里面利用./可以找目录；
同级目录：
下级目录：
上级目录：
HTML-音频标签：
主要应用场景：在页面中插入音频
特点：双标签
HTML-视频标签：
主要应用场景：在页面中插入视频
特点：双标签
HTML-超链接：
主要应用场景：点击之后，从一个页面跳转到另外一个页面
特点：双标签
如果需要a标签点击后可以去指定页面，需要设置a标签的href属性
HTML-无序列表：
主要应用场景：在网页中表示一组无顺序之分的列表。
显示特点：列表的每一项前默认显示圆点标识
注意点：ul标签中只允许包含li标签
li标签可以包含内容
HTML-有序列表：
主要应用场景：在网页中表示一组有顺序之分的列表。
显示特点：列表的每一项前默认显示序号标识
注意点：ol标签中只允许包含li标签
li标签可以包含内容
HTML-自定义列表：
主要应用场景：在网页底部导航中通常会使用在自定义列表实现
显示特点：dd前会默认显示缩进效果
注意点：dd标签中只允许包含dt/dd标签
dd/dt 标签可以包含内容
HTML-表格标签：
主要应用场景：在网页中以行+列的单元格的方式整齐展示数据。如：学生信息表
注意点：嵌套关系table>tr>td
表格标题和表头单元格标签：
主要应用场景：在表格中表示整体大标题和一系列小标题
注意点：caption标签在书写时在table标签内部
th标签书写在tr标签内部
表格的结构标签（了解一下就好了）：
主要应用场景:让表格结构分组，突出表格的不同部分（头部，主题，底部）使语句更加清晰
注意点：表格结构标签内部包裹tr标签
表格结构标签可以省略
表格合并单元表格：
主要应用场景:将水平或垂直多个单元格合并成一个单元格
合并步骤：1.明确合并那几个单元格
2.通过左上原则，确定保留谁删除谁
上下合并->只保留最上面的删除其他
左右合并->只保留最左边的删除其他
3.给保留的单元格设置：跨行合并（rowspan）或者跨列合并（colspan）
注意点：只有同一个结构标签中的单元格才能合并，不能跨结构标签合并（不能跨thead，tbody，tfoot）
HTML-表单：
input系列标签：
主要应用场景:在网页中手机用户信息的表单效果
标签名：input
input标签可以通过type属性值不同，展示不同的效果
type属性值：
input标签-提示占位符 ：
主要应用场景:在网页中显示输入单行文本的表单控件
type属性值：text
常用属性：
input标签-单选框：
主要应用场景:在网页中显示多选一的表单控件
type属性值：radio
常用属性：
注意点：
name属性对于单选框有分组功能
有相同name属性值的单选框为一组，一组中只能同时有一个被选中
input标签-按钮：
主要应用场景:在网页中显示不同功能的按钮表单控件
type属性值：
注意点：
如果需要实现以上暗流功能，需要配合from标签使用
from使用方法：用form标签吧表单标签一起包裹起来即可
button按钮标签：
主要应用场景:在网页中显示用户点击的按钮
标签名：button
type属性值（同input的暗流系列）：
注意点：
谷歌浏览器中button默认是提交暗流
button标签是双标签，便于包裹其他内容：文字，图片等
select下拉菜单标签：
主要应用场景:在网页中提供多个选择项的下拉菜单表单控件
标签组成：
select标签：下拉菜单的整体
option标签：下拉菜单的每一项
常见属性：
selected:下拉菜单的默认选中
textarea文本域标签：
主要应用场景:在网页中提供可输入多行文字的表单控件
标签名：textarea
常见属性：
cols：规定了文本域内可见宽度
rows：规定文本域内可见行数
注意点：
右下角拖拽改变大小
实际开发时正对与样式推荐使用css设置
label标签：
常用于绑定内容与表单标签的关系
标签名：label
使用方法①:
1.使用label标枪吧文本包裹起来
2.在表单标签上面添加id属性
3.在label标签的for属性中设置对应的id属性值
使用方法②：（推荐）
1.直接使用label标签吧内容和表单标签一起包裹起来
2.需要把label标签的for属性删除即可
HTML-语意化标签：
1.没有语义的布局标签div和span：
主要应用场景:实际开发网页时候会大量用到div和spn这2个标签
div标签：一行只显示一个
span标签：一行可以显示多个
2.拓展有语义的布局标签(手机端的开发)：
才HTML5版本中推出的，这些标签和div的显示特点一致，但是比div多了不同的语意
HTML-字符实体：
主要应用场景:在网页中展示特殊符号时候，需要使用字符实体替代
结构：&英文
常见字体：（我们一般用的比较多的是空格）
这里是本人学习HTML5的一些笔记，可以供大家一起学习和交流！！！
扫一扫
773
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
