day21-HTML5
一、认识web
1.认识web - web开发指的就是写网页
- web标准中将网页开发规范分为三个标准
- 1)结构标准：html，决定网页中的内容
- 2)表现标准：css，决定网页中内容的样式和布局
- 3)行为标准：js，决定网页中内容动态变化
2.什么是html
- html又叫超文本标记语言(注意不是编程语言)
- 大小写不敏感，h1和H1一样的
- html就是由各种各样的标签组成的
- html标签：代表整个网页
- head标签：代表网页的顶部和内部核心的东西
- body标签：代表网页整个内容部分
二、认识标签
1.标签的语法
- html中的标签分为两种：双标签、单标签
- 1)语法
- 双标签：<标签名 属性名1=属性值1 属性名2=属性值2...>标签内容</标签名>
- 单标签：<标签名 同上/> 或 <标签名 同上>
- 2)说明
- 标签名：a.标签名不能自己随便命名，而是使用当前版本提供的标签名；不同的内容对应的标签不一样。b.哪些标签是单标签，哪些标签是双标签，是固定的。c.标签名前不能随便加空格。
- 属性：a.哪些标签有哪些属性是确定的，属性名和属性值之间用=连接，多个属性之间用空格隔开。b.如果有多个属性，属性顺序可以随意。c.html中所有属性的值都必须用引号引起来，不管类型。
- 标签内容：值指的是双标签开始标签和结束标签中的部分；双标签的内容中可以放任何东西(可以是文字，也可以是别的一个或多个标签)
2.head中的标签
- meta标签：元数据，主要做一些网站设置性的工作
- title标签：设置网页标题
- link标签：导入文件(设置网页图标、导入外部样式)
- style标签：定义html文档的样式信息
- script标签：用于定义客户端脚本，比如js
- base标签：为页面上所有的相对链接规定默认URL或默认目标
- 设置网页图标说明：
- rel：被导入的文件的作用，例如：stylesheet(样式表)、icon(网页图标)
- type：对被导入的文件类型进行说明，文件类型/文件后缀，text/css(文本文件/后缀是.css)
- href：被导入的文件路径
三、文本标签
1.标题标签
- h1~h6：当文本内容意义是标题的时候才选择标题标签
2.段落标签
- p：一段文字如果表示一个段落就用p标签
3.网页中换行和空格
- 在html中手动输入换行和空格无效
- 1)强制换行：<br /> 加在网页中需要强制换行的地方
- 2)空格符号：
-
：表示空一个像素 -
 ：表示空一个空格
-
4.font标签
- font：表示一段文字，这段文字可以和别的网页内容同行显示
5.水平线
- <hr>：单标签，表示水平分割线
6.文字效果
- 1)加粗：b标签和strong标签，strong有强调的意思
- 2)斜体：i标签和em标签，em有强调的意思
四、列表标签
1.列表标签
- 网页中多个内容意义是一样的，或者表示一个分类下面的具体内容等
- 1)无序列表：
- ul标签：表示整个容器
- li标签：代表列表中的元素
- 2)有序列表：
- ol标签：表示整个容器
- li标签：代表列表中的元素
- 3)自定义列表：
- dl标签：代表整个容器
- dt标签：代表分组名
- dd标签：代表每个元素
五、图片标签
1.图片标签
- img：单标签
- src属性：图片的地址(可以是网络图片地址也可以是本地图片地址)
- title属性：设置图片的标题
- alt属性：图片加载失败的提示语
2.超链接
- a标签：可以点击后跳转到其他网页的内容基本都是超链接
- 语法：
<a href="跳转地址">标签内容</a> - 1)标签内容：决定点击谁可以跳转
- 文字超链接
- 图片超链接
- 2)href属性：决定跳转到哪个位置
- a.网络地址：跳转到指定的页面
- b.本地html文件地址：跳转到指定的本地页面
- c.选择器：在当期页面中跳转到指定的位置
- d.空：刷新页面(有兼容性问题)
- 3)target属性：
- _self(默认)：在当前页面中加载新的内容
- _blank：在新页面中加载新的内容
六、表格标签
1.表格标签：table、tr、th、td
- 1)table标签：代表整个表格
- border属性：边框线的宽度
- cellspacing属性：单元格与单元格之间的间隙
- align属性：设置对应方式-left(默认)、right、center；设置整个表格在其父标签中对齐的方式
- width属性：设置整个表格的宽度(单位是像素)
- height属性：设置整个表格的高度
- cellpadding属性：设置内容到单元格边框的间距
- bordercolor属性：边框线的颜色
- bgcolor属性：设置整个表格的背景颜色
- 2)tr标签：代表一行
- align属性：设置当前行中所有的单元格中的内容的对齐方式
- height属性：设置一行的高度
- bgcolor属性：设置一行的背景颜色
- 3)td标签：代表一个单元格
- align属性：设置当前单元格中内容的对齐方式
- width属性：设置一列的宽度
- bgcolor属性：设置当前单元格的背景颜色
- 4)补充：html中的颜色值
- a.颜色单词，例如-red
- b.#RGB十六进制，0~255 -> 00~ff
2. 复杂表格
- td标签中的合并属性
- colspan属性：列合并
- rowspan属性：行合并
七、表单标签
1.表单标签：form
- form标签单独使用没有意义，主要是用来将其他的表单相关的标签放在form标签中作整体提交和重置的功能
- action属性：提交的路径
- method属性：http请求方式
2.表单相关的标签1：input标签
- 单标签
- type属性：属性不同，input表现出来的功能完全不一样
- 1)文本输入框：text
- value属性：文本框中输入的内容；给这个属性赋值可以设置输入框中的默认显示，获取这个属性的值能够得到输入框最新的内容
- placeholder属性：设置输入框的占位符(提示信息)
- maxlength属性：限制输入内容的最大长度
- 2)密码输入框：password
- 同上
- 3)单选按钮：radio
- name属性：同一组数据对应的name必须一样
- value属性：这儿的value只能提交不能显示
- checked属性：将这个属性值设置为checked可以让指定按钮默认选中
- 补充：可以通过设置label标签的for属性和其他标签的id属性一致，来让label标签和其他标签进行绑定
- 4)复选按钮：checkbox
- 同上
- 5)普通按钮：button
- value属性：属性的值就是显示在按钮上的文字
- 6)提交按钮：submit
- 点击这个按钮会自动将提交按钮所在的form标签中设置了name属性值的所有的标签内容都提交
- 7)重置按钮：reset
- 点击这个按钮会自动将当前form标签中所有相关标签的状态重置为初始状态
- 1)文本输入框：text
- name属性：a.只有设置了name属性值的表单相关的标签，内容才能被提交
- value属性：提交的时候以'name=value'形式进行提交的
- disabled属性：设置为'disabled'可以让当前input标签不可用
3.按钮标签：button
<button></button>
4.下拉列表：select、option
- select标签：代表整个下拉列表
- option标签：每一个option标签对应一个选项
- optgroup标签：选项分组，通过label属性来设置分组的名字
5.多行文本域：textarea
- 双标签的内容相当于input中文本输入框的value属性
6.无语义标签
- div和span都是无语义标签
- div是块级，span是行列级
