一、什么是html
hypertext markup language超文本标记语言
超文本：
超越普通文本，能够在文本内插入图片、音频、视频、超链接等。
二、html的特点
1.从上到下依次解析
2.容错性/宽松性
3.大小写不敏感
三、文档结构
默认文档结构利用快捷键html:4t/html:5生成
html为父元素/最大根元素；
head与body为子元素；
head中的meta为孙元素，用于设置字符编码，title为孙元素，用于设置标签页名称。第三方外部引入文件建议写入head。
body用于写入想要在浏览器展示的内容。
四、元素
1.元素的组成
开始标签<标签名称>+元素内容+结束标签</标签名称>
有一部分标签没有结束标签，叫做单标签/空元素。
标签不能交叉嵌套使用。
2.元素的分类*区别
块级元素：div 0px
独占一行空间/不与其他元素共享一行空间
可以直接设置宽高（宽度占满整个父级元素，高度由子级元素撑起）
块级元素可以包含块级元素和行内元素
行内元素：span 0px
可以与其他元素共享一行空间
不可以在html内直接设置宽高，在css中可以通过display：inline-block设置其宽高
行内元素只能包含行内元素
后期布局主要用div与span（它俩没有实际意义，是html中的无意义元素），其他具有实际意义的标签最后再使用
五、属性
1.属性的设置
写在开始标签内部，与标签名称使用空格隔开，属性名key（键）和属性值value（值）之间使用等号连接，多对属性之间用空格隔开。
2.属性的分类
按照公有性分类
公有属性：所有标签都能设置的属性
id：元素的唯一标识
class：按类标识元素
style：设置行内样式
title：设置提示
……
私有属性：只有当前标签才能设置的属性
按照属性特性分类
基本属性：属性值使用字符串类型。“ ” ’ '应注意交叉使用。
布尔值属性：属性值只有true或false。不写即为false，即写了即为true。
六、语法
1.空白
在文档中无论出现多少个空白或换行，浏览器都解析为一个空白。
解决办法
- pre标签：段落标签。保留用户所输入的格式。
- 2.字符实体
2.字符实体
使用&开头，使用;结尾，中间写实体名称。
& nbsp;->空格
& lt;->小于号
& gt;->大于号
& quot;->引号
& copy;->圈c 版权声明
& reg;->圈R
& times;->×
3.注释
注释的作用：提升代码的可读性，便于代码的维护和管理。
注释的表现形式：< !–注释内容-- >
被注释掉的内容不会被浏览器所解析，被注释掉的内容不会展示在页面上。
html中的注释可以嵌套使用吗？
不可以。
七、标签
一个标签相当于一个盒子，相当于是隐形的。
查看器内是浏览器解析出来的我写的代码，不是我写的代码。
body：8px的外边距
p：16px
**img：图片。*一种特殊的行内元素aka替代元素，既能设置宽高，又能和其他元素共享一行空间。
-
alt：当图片找不到或图片加载失败时替换图片内容。
-
src：引入图片地址/路径。
http/盘符下 为绝对路径
./当前文件夹内（同一级）
…/当前文件的上一层目录
…/…/当前文件的上一层的上一层目录
为相对路径 -
width：设置图片宽度
-
height：设置图片高度
strong加粗标签。通常的推荐用法，浏览器可将其当做关键字处理
b加粗标签。只做样式的改变。但如今效果一样。
em斜体标签。同上。
i斜体标签
del删除线
u下划线
br换行标签
hr水平线
- 常用私有属性
- size：设置水平线高度
- width：设置水平线宽度
- align：设置水平线位置
left center right
sub下标
log< sub >10< /sub >2——》log102
sup上标
10< sup >2< /sup >——》102
a：超链接标签
- 私有属性
- href：设置链接地址
1.url。绝对路径相对路径都可以。
2.锚点（可联想蜘蛛侠吐丝，定位一个点）
通过id属性设置锚点位置，#id属性值，即#=id属性名
< a href=“1.html#test”>跳转到test< /a >
3.邮箱地址
mailto：邮箱地址 - target：设置页面打开方式
_self：当前页面打开（默认）
_blank：打开新页面
_parent：在父框架中打开
_top：在顶级框架中打开
table：表格
- caption：设置表格标题
- thead：设置表格头部
- tbody：设置表格体部
- tfoot：设置表格脚部
tr：一行
td（普通单元格）/th（有样式的单元格）：一个单元格
table的私有属性
align
border
cellpadding单元格边距（表格填充）：代表单元格外面的一个距离,用于隔开单元格与单元格空间
cellspacing单元格间距（表格间距）：代表表格边框与单元格补白的距离,也是单元格补白之间的距离
width
bgcolor
td/th的私有属性
width
colspan：跨列合并（原则上是修改了当前单元格的宽度）
rowspan：跨行合并（原则上是修改了当前单元格的高度）
colgroup：对表格中的列元素进行设置
必须在table元素之内，在任何caption元素之后，任何thead、tbody、tfoot、tr元素之前使用。
私有标签span：number表示当前col标签控制/标示几列
列表标签：都是块级元素
ul：无序列表
li：子标签
ol：有序列表
- 私有属性
- start：开始的序号。默认序号从1开始。
- reversed：颠倒顺序（布尔值）
dl：标题列表
dd：标题标签
dt：列表项
form：表单
客户端和服务器端发生数据交互时需要使用表单。
----------私有属性----------
action：表单提交地址
target：表单打开方式
_self
_blank
_parent
_top
method：设置表单提交方式
get：（默认提交方式）（可理解为送礼时不贵重的财物）
- 将数据拼接在浏览器的地址栏上
- 安全性较低
- 只能提交轻量级数据
post：（可理解为银行卡）
- 将数据封装在请求体中
- 安全性较高
- 可以提交重量级数据
enctype：设置表单提交的数据类型/编码格式
----------子组件----------
input：
私有属性
-
type
text：单行文本框
password：密码框
submit：提交按钮
reset：重置按钮
image：图片按钮
redio：单选框
checkbox：多选框
button：普通按钮
hidden：隐藏区域
file：文件上传域 -
value
1.写在按钮上，代表修改按钮名称。
2.写在输入框上，代表输入框的默认值。
3.写在单选或多选框上，代表交互数据的value（属性值） -
name
设置前后台交互数据的key（属性名） -
src、alt、width、height。只有type=image才能用
-
checked：默认选中效果。只针对单选框和多选框。
-
size：设置文本框的宽度。默认为20px。
-
maxlength：文本框的最大输入字符个数
-
readon：只读
-
disabled：禁用
-
autofocus：自动聚焦
-
placeholder：提示用户输入
-
required：必填项
-
pattern：设置正则表达式
-
max/min：type=number时才能用
-
step：步长。同上
label：关联文字和组件。下面展示了两种用法。
<label>
男：<input type="radio" name="gender" checked value="man">
</label>
<label for="woman">
女：
</label>
<input type="radio" name="gender" value="woman" id="woman">
fieldset：给单选/多选框划分区域
- legend：设置区域标题
button：按钮
- type
submit
reset
button
如果button写在form标签内，type默认为submit；
如果button写在form标签外，type默认为button。
select：下拉框
-
私有属性
-
size：设置每次展示的项数
-
multiple：是否可以多选。
-
disabled
-
子组件
-
option：选项
disabled
selected：默认选中值 -
optgroup：分组option
label属性：设置分组标题
textarea：多行文本输入框
cols
rows
disabled
readonly
warp：表示是否自动换行
- off：关闭自动换行
- hard：硬换行。换行元素会被自动传送到服务器中。
- soft：软换行。换行元素不会被传送到服务器中。
八、html5新增的表单元素及属性
progress：表示任务的完成情况，常用于进度条。
-
max 定义进度元素所要求的任务的工作量，默认值为1
-
value 定义已经完成的工作量，如果max值为1，该值必须是介于0~1之间的小数。
meter：表示规定范围内的数量值
- value：在元素中特地表示出来的实际值，该值在min与max之间，如果未指定，该值默认为1
- min：指定规定范围时允许使用的最小值，默认为0
- max：指定规定范围时允许使用的最大值，默认为1
- low：规定范围的下限值必须小于或等于high属性的值
- high：规定范围的上限值（表示较高危险的意思）
- optimum：最佳值，最优值
如果optimum<low，value越低越好
如果low<=optimum<=high，或者没有optimum，value在中间最好
如果optimum>high，value越高越好
扫一扫
168
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
