1.结构介绍
1.标签的分类
<单词> :元素标签 <元素 单词>:首先<>中至少有两个单词,那第一个肯定是元素标签,元素标签后跟的都是属性标签
2.文本元素
- 段落元素
-
段落元素
-
-
换行标签 br
- 水平线标签
-
标签会在页面上产生一个水平线 - 常用属性
- align:可取值有left right center 代表水平线位置
- size: 代 表 水 平 线 厚 度 ( 粗 细 )
- width:代表水平线宽度
- color:水平线的颜色
-
- 分区标签
- div是一个块标签,用来进行布局的;独占一行!
- div与span都是“容器”的作用,具体区别:
- div会自动换行,我们也叫这样的标签为块级元素
- span标签它不会自动换行,我们也叫它为行内元素
- div:整体划分区块
- span:局部划分
3.字体标签
- 字体标签
- 标签可以设置字体,字的大小及颜色,常用属性:
- face:用于设置字体
- size:用于设置字的大小
- color:用于设置字的颜色
- 英文:red,blue等
- 十六进制:#000000-#FFFFFF
- RGB颜色表示
- 标签可以设置字体,字的大小及颜色,常用属性:
- 标题标签 1-6号大小不同
- 格式化标签
- :字体加粗
- :字体倾斜
- :删除线
- :下划线
-
4.列表标记
ol:有序列表- type='A':字母排序
- type='I':罗马排序
- start=“3” 序列从几开始
- ul:无序列表
- type="disc":默认,实心圆
- type="square":方块
- type="circle":空心圆
5.多媒体元素
- 图片标签:image
- 的常用属性
-
- src的三种类型
- 文件地址
- data URL
- object URL
- width 图片的宽度
- height 图片的高度
- border 用于设置图片的边框
- alt 默认显示的文本信息
- title 鼠标悬停,默认显示的文本信息
- align 图片附件文字的对齐
- left:
- right
- middle
- top
- bottom
- src的三种类型
- 视频标签:video width 宽 controls 进度条
- 音频标签:audio 与视频标签类似
6超链接标签
- 锚,超链接(anchor)
- 超链接文本
- 图片标签
- target属性:规定在何处打开连接
- _blank 新窗口打开
- _self,默认,在本窗口打开
- 地址分为
- 本地网址
- 互联网网址
- 页面内锚点
7.表格
-
:定义一个表格 - border:边框,取值是像素为单位
- width 代表的表格的宽度
- align 代表表格的对齐方式
- left
- right
- center
- cellspacing:单元格间距(通常设置0表示单线表格)
-
- align
- left
- right
- center
- colspan 指示列的合并
- rowspan 指示行的合并
:表格中的行 (Table Row):表格中的数据单元格 (Table DataCell)
8表单标签
- 负责向后端提交数据
- 登录
- 注册
- action:整个表单提交的目的地
- method:表单提交的方式
- get:提交时,传输数据量少(传递普通文字信息,传递照片会失败),明文提交(在浏览器的url后面会显示提交的数据,不适合用于登录)
- post:提交时,传输数据量大(传递文字和图片都行),密文提交(浏览器的url后面看不到提交的数据)
- enctype:数据格式
9.表单中的元素(控件)
- 元 素 的 type 属 性
- text:默认值,普通的文本输入框
- placeholder属性:提示文本
- maxlength属性:最多能输入字符数量
- password:密码输入框
- checkbox:多选框/复选框
- checked:默认选中
- radio:单选按钮
- file:上传文件
- reset:重置按钮
- submit:提交按钮
- button:普通按钮
- text:默认值,普通的文本输入框
- :下拉列表/下拉框
-
- selected:默认选中
-
- :文本域
- 可以通过 cols 和 rows 属性来规定行数和列数
- :按钮
- 在form表单中,作用和submit一样
- 不在form表单中,就是普通按钮
- : 元素标签
- 与控件形成关联,为 input 元素定义标注(标记)
- for中的内容与控件中的id关联。
- 小案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action="" method="POST"> <label for="">账号:</label> <input type="text" name="account"> <br><br> <label for="">密码:</label> <input type="password" name="password"> <br><br> <label for="">性别:</label> <input type="radio" name="gender" value="male">男 <input type="radio" name="gender" value="female">女 <br><br> <label for="">爱好:</label> <input type="checkbox" checked name="hobby" value="lanqiu">篮球 <input type="checkbox" name="hobby" value="zuqiu">足球 <input type="checkbox" name="hobby" value="paobu">跑步 <br><br> <label for="">生日:</label> <input type="date" name="brithday"> <br><br> <label for="">邮箱地址:</label> <input type="email" name="email"> <br><br> <label for="">电话:</label> <input type="tel" name="tel"> <br><br> <label for="">地址:</label> <select> <option value="shanxi">山西省</option> <option value="jiangsu">江苏省</option> <option value="shanghai">上海市</option> </select> <label for="">验证码:</label> <input type="text"><button>获取验证码</button> <br><br> <!-- <input type="button"> --> <label for="">备注:</label> <textarea name="description" id="" cols="30" rows="10"></textarea> <br><br> <input type="checkbox">同意<a href="#">《隐私条款》</a>和<a href="#">《隐私权相关政策》</a> <br><br> <input type="submit" value="提交"> <input type="reset" value="重置"> <br><br> </form> </body> </html>
10.HTML5新特性
10.1新特性
- 大小写不敏感
- 对于标签、属性、属性的值大小写都可以,没有影响
- 引号可省略
<input type="password"> <input type=password>
- 省略了结尾标签
- html是自动补全了
10.2 新增语义化标签
html4中,所有的容器标签95%都会使用div,div过多的话,很难区分彼此 新增许多语义化标签,让div“见名知意”
- section标签:表示页面中的内容区域,部分,页面的主体部分
- article标签:文章
- aside标签:文章内容之外的,标题
- header标签:头部,页眉,页面的顶部
- hgroup标签:内容与标题的组合
- nav标签:导航
- figure标签:图文并茂
- foot:页脚,页面的底部
10.3媒体标签
于3.0多媒体标签中,这里补充一下属性
- autoplay:自动播放(谷歌失效,360浏览器可以)
- loop:循环播放
10.3新增表单空间
- ,修改type属性
- color:调色板
- date:日历
- month:月历
- week:周历
- number:数值域
- min:最小值(默认值是1)
- max:最大值(默认值无上限)
- step:递增量
- range:滑块
- search:搜索框
- (带×号,可一键删除框中内容) 进度条
- 高亮
- 模糊查找