内容注释：ctrl+？(快捷方式)
HTML
HTML5，超文本标记语言，搭建框架结构
HTML标签语法分类
单标签
又叫自闭和标签，没有结束标签
双标签
双标签包括开始标签和结束标签，标签内容在两者中间
结构分类
HTML标签分为两大类，块级元素和内联元素（行内元素）
块级元素
特点：独占一行
常见块级元素
| 标签 | 描述 |
|---|---|
~ | 标题标签，会将⽂字加粗 |
| 段落标签 | |
| 定义预格式文本，地方空出来可以写后续代码 | |
| 短文本应用，网页显示实会将文字用引号包裹 | |
| 长文本引用，浏览器对该标签的解释是缩进样式 | |
| 块级元素，可用于组合其他HTML标签的容器 |
块级元素特点
- 无论是否用换行标签，块级元素都会自动换行
- 块级元素高宽可变
- 块级元素可以嵌套块级元素或内联元素
内联元素
也叫行内元素，主要特点不换行
- 和其它元素同一行显示
- 内联元素高宽不能改变
- 内联元素的宽度就是其中内容的宽度，且不能改变
- 内联元素的高度height设置无效，但可以通过line-height来设置行高
| 标签 | 描述 |
|---|---|
| 斜体标签 | |
| 斜体标签 | |
| 显示小字体 | |
| 加粗文字 | |
| 强调文本，本加粗文字 | |
| 高亮显示（背景默认黄色） | |
| 定义上标文字 | |
| 定义下标文字 | |
| 定义内在被插入文档中的文本，下划线 | |
| 行内元素，不会换行 |
和标签的区别：
相同：加粗字体
- :仅加粗效果，不具备HTML语义
- ：不仅加粗，具备HTML语义，表示强调
和标签的区别：
- 用来强调标签中的内容很重要，同时标签中的字体显示为斜体
- 标签没有强调作用，仅样式起到明显效果，标签中字体为斜体
超链接a链接
标签 语法格式
<a href="" target="">百度一下</a>
href属性
可以使用绝对路径和相对路径
- 相对路径：不带盘符，通常是以HTML网页文件为原点，通过层级关系描述目标文件位置
- 绝对路径：带有盘符的路径或者完整的网络地址
-
href属性可以指向一个网页,实现页面跳转
<a href="http//:baidu.com">百度一下</a>实现跳转百度页面
-
href属性可以实现下载功能
<a href="../test.txt">文本文件</a>实现下载test.txt文本文件
-
href属性实现锚点功能：点击跳转当前页面指定位置
<a href="#six">跳转</a> <h1 id="six">第六个标签</h1>点击跳转实现锚点功能，所谓锚点功能是点击超链接文本时跳转到当前页面的指定元素位置
-
href属性打开邮箱
<a href="mailto:2303987920@qq.com">发送邮件</a>实现给2303987920@qq.com发送邮件
target属性
可选属性，用来指明新页面打开方式，默认情况下，新页面在当前浏览器窗口打开
- _self:默认打开方式，省略不写，现有窗口打开新页面，原页面覆盖
- _blank:在窗口打开新页面，原页面保留
<a href=" " target="_blank">跳转</a>
打开新页面，原页面保留
特殊符号
| HTML源代码（&+内容+；） | 显示效果 | 描述 |
|---|---|---|
| nbsp | 空格 | 不断行的空白 |
| ensp | 空格 | 半个空白位 |
| emsp | 空格 | 一个空白位 |
| lt | < | 小于号 |
| gt | > | 大于号 |
| quot | “” | 双引号（英） |
| apos | ‘’ | 单引号（英） |
| copy | © | 版权 |
| reg | ® | 注册商标 |
插入图片音频视频
图片
常见图片格式：jpg，bmp，gif，png，webp
标签 语法格式
<img src="图片路径" alt="图片无法显示">
-
src必选属性：相对路径或绝对路径都可以
-
alt可选属性：图片无法加载时显示
-
title可选属性：鼠标移动在图片上方时显示文字
-
设置图片光度高度：
width：宽度，可用百分比，可用像素px
height：高度，只能用像素
音频
audio 标签 语法格式
<audio src="音频路径" controls autoplay loop></audio>
标签属性
- src:音频路径
- controls:播放器
- autoplay:自动播放
- loop：循环播放
视频
video 标签 语法格式
<video src="视频路径"></video>
标签属性
- src:视频路径
- autoplay:自动播放
- controls:播放器
- loop：循环播放
- poster属性:用于指定一张图片作为视频封面图，无法加载视频数据时也会显示该图片
列表
三种：有序列表，无序列表，自定义列表；列表可放文本，图像， 链接；列表可嵌套
有序列表
ol标签+li标签，ol标签可选type属性选择序号样式
无序列表
ul标签+li标签，可选type属性
自定义列表
dl标签+dt标签+dd标签
- 表示列表中的每⼀项，
列表分类 说明 有序列表 默认使⽤阿拉伯数字 无需列表 默认使⽤ ● 符号 自定义列表 -
表示定义列表，
表示定义术语、
- 表示定义描述。
⼀般情况下，每个
搭配⼀个- ，⼀个
-
可以包含多对
和
- 。
表格
标签属性
table标签:表示表格，表格所有内容写在table标签中
- border：属性值单位px
- cellspcaing控制相邻线距离
caption标签：为表格设置标题
thead标签：表头内容
tbody标签：表格内容
tr标签：表格的行，表格有多少个tr就有多少行数据
td标签：表格的单元格，真正存放表格数据的标签
th标签：表格的表头，一般位于第一行充当每一行的标题，浏览器会把标题的字体加粗居中
单元格合并
-
rowspan：表示跨行合并；rowspan=“2” 表示合并2行
-
colspan：表示跨列合并；colspan=“3” 表示合并3列
-
合并单元格三部曲
先确定跨行合并还是跨列合并
找到目标单元格，标签中写合并方式=”合并单元格数量“
删除多余单元格
表单
form标签
语法格式
- action：表单提交的页面
- method:数据提交的方式：get/post
- get：提交信息在页面地址栏显示，不安全，不需要后台支持，url地址栏有限
- post：不显示提交信息，相对安全,需要后台支持，url地址栏无限
input元素
<input type="">type类
-
name:表单元素的名字，是每个表单元素都有的属性值，主要给后台传递数据
-
value：设置输入框中的默认值
-
placeholder：设置文本框中的提示信息，当输入框中输入内同时，提示信息会被覆盖
（一）
- text文本框：表单输入字母数字等内容
- maxlengh：文本框中的最大输入字符
- disabled：禁用
- required：必填，若值为空，浏览器会自动弹出提示
- readonly：只读，添加readonly属性的输入框无法改变
- password：填写密码
- emial：填写邮箱，可自动验证email输入格式
- url：填写url地址，可自动验证url输入格式
- number：输入包含数值的输入域
- max属性：允许输入的最大值
- min属性：允许输入的最小值
- step属性：规定数字变化的幅度，默认值是1
- search：搜索域，比如站点所搜或Google搜索
- hidden：代表隐藏域，隐藏域对用户不可见，通常用来传递参数，按钮将表单发送到后台时，隐藏域的数据也会一起发送到服务器上
（二）单选、多选、文件、颜色
- radio单选：表单单选框选项
- name：元素名
- value：代表空间中携带的值，提交时传到后台
- checked：代表默认选项，可选属性
- checkbox复选：多选框
- file文件上传：用于在网页中上传文件
- color：选取字段颜色
- range：选择区间
（三）时间选择器
- time：选择一个时间
- date：选择一个日期
- datetime-local：选择一个日期和时间
- week：选择周和年
- month：选择一个月份
下拉列表
select元素
用来定义下拉列表，不支持搜索
- option 写数据
- disable：不可选取属性
- selected：默认选中属性
datalist元素
支持搜索
- datalist元素：规定输入域的选项列表以下拉列表形式存在 通过id与input联系，input中list属性写id
- chicked：默认选取属性
- disable：不可选取属性
- option： 写datalist元素中的数据
textarea元素
代表多行文本框，又叫文本域；双标签，内筒可以写在开始和结束标签之间
- cols：每行可以显示的字符数，也就是文本域的宽度
- rows：文本域的可见行数，也就是文本域的高度
按钮元素
- submit提交按钮:input标签中的submit，带有提交功能的按钮
- value属性可以设置按钮上要显示的文字
- button普通按钮：input标签中的input，普通按钮
- value属性可以设置按钮上要显示的文字
- button标签（双标签）：
- submit类型：提交按钮
- button类型：普通按钮
- reset重置按钮：
- input中reset类型不需要设置文字，默认重置二字
- button需要设置reser，若不设置不显示任何文字
label标签
绑定一个表单元素，当点击label标签内的文本时，浏览器会自动将光标转到对应的表单元素上，增加用户体验
<input type="radio" name="gender" id="man" checked> <label for="man">男</label>
8966
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
