day21-HTML5

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)强制换行：
  加在网页中需要强制换行的地方
• 2)空格符号：
  •  ：表示空一个像素
  •  ：表示空一个空格

---

4.font标签

• font：表示一段文字，这段文字可以和别的网页内容同行显示

---

5.水平线

• ---

  ：单标签，表示水平分割线

---

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标签：可以点击后跳转到其他网页的内容基本都是超链接
• 语法：标签内容
• 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标签中所有相关标签的状态重置为初始状态
• name属性：a.只有设置了name属性值的表单相关的标签，内容才能被提交
• value属性：提交的时候以'name=value'形式进行提交的
• disabled属性：设置为'disabled'可以让当前input标签不可用

---

3.按钮标签：button

---

4.下拉列表：select、option

• select标签：代表整个下拉列表
• option标签：每一个option标签对应一个选项
• optgroup标签：选项分组，通过label属性来设置分组的名字

---

5.多行文本域：textarea

• 双标签的内容相当于input中文本输入框的value属性

---

6.无语义标签

• div和span都是无语义标签
• div是块级，span是行列级

---