Web前端基础 ——【01】HTML和HTML5

一、浏览器介绍
- 1.1 认识网页
- 1.2 常见浏览器
- 1.3 浏览器内核
- 1.4 web标准
二、HTML基本结构
- 2.1 HTML初识
- 2.2 HTML骨架格式
三、HTML常用标签
- 3.1 快速生成html骨架（vscode为例）
- 3.2 文档类型DOCTYPE
- 3.3 字符集charset
- 3.4 排版标签
  - 3.4.1 标题标签
  - 3.4.2 段落标签
  - 3.4.3 水平线标签
  - 3.4.4 换行标签
  - 3.4.5 div span标签
- 3.5 文本格式化标签
- 3.6 标签属性
- 3.7 图像标签
- 3.8 链接标签
- 3.9 锚点定位
- 3.10 base标签
- 3.11 特殊字符标签
- 3.12 注释标签
四、路径
- 4.1 相对路径
- 4.2 绝对路径
五、列表
- 5.1 无序列表
- 5.2 有序列表
- 5.3 自定义列表
六、表格
- 6.1 表格属性
- 6.2 表头标签
- 6.3 表格结构
- 6.4 表格标题标签
- 6.5 合并单元格
  - 6.5.1 跨列合并(colspan)
  - 6.5.2 跨行合并
七、表单和表单控件
- 7.1 表单
- 7.2 文本框和密码框
- 7.3 单选按钮和复选按钮
- 7.4 默认选中表单属性
- 7.5 input按钮组
- 7.6 label标签
- 7.7 文本域
- 7.8 下拉菜单
- 7.9 表单域
八、HTML5新增的标签和属性
- 8.1 文档类型和字符集
- 8.2 查看手册及其新增标签
- 8.3 datalist标签
- 8.4 fieldset元素
- 8.5 HTML5新增的input表单
- 8.6 HTML5新增的属性
- 8.7 多媒体标签
  - 8.7.1 embed引入网上视频
  - 8.7.2 音频audio
  - 8.7.3 视频video

一、浏览器介绍

1.1 认识网页

在这里插入图片描述

1.2 常见浏览器

1.3 浏览器内核

①IE内核：Trident
在这里插入图片描述
②Firefox内核：Gecko

③Safari内核：Webkit

④Chrome内核：Webkit→Blink

⑤Opera内核：Presto→Blink

Notes：移动端浏览器内核
在这里插入图片描述

1.4 web标准

在这里插入图片描述

二、HTML基本结构

2.1 HTML初识

HTML：Hyper Text Markup Language
在这里插入图片描述

2.2 HTML骨架格式

HTML语法格式

三、HTML常用标签

3.1 快速生成html骨架（vscode为例）

在这里插入图片描述
①html:5

②!

3.2 文档类型DOCTYPE

在这里插入图片描述

3.3 字符集charset

在这里插入图片描述

3.4 排版标签

在这里插入图片描述

3.4.1 标题标签

在这里插入图片描述

3.4.2 段落标签

3.4.3 水平线标签

3.4.4 换行标签

在这里插入图片描述

3.4.5 div span标签

在这里插入图片描述

3.5 文本格式化标签

在这里插入图片描述

3.6 标签属性

在这里插入图片描述

3.7 图像标签

在这里插入图片描述

3.8 链接标签

超链接

在这里插入图片描述

3.9 锚点定位

 个人生活
个人生活

在这里插入图片描述

3.10 base标签

在这里插入图片描述

3.11 特殊字符标签

在这里插入图片描述

3.12 注释标签

四、路径

4.1 相对路径

在这里插入图片描述

4.2 绝对路径

在这里插入图片描述

五、列表

5.1 无序列表

在这里插入图片描述

	
    我喜欢的水果：
    
        苹果
        香蕉
        橘子

在这里插入图片描述

5.2 有序列表

在这里插入图片描述

5.3 自定义列表

    籍贯
    
        北京
        昌平区
        海淀区
        大兴区

在这里插入图片描述

六、表格

6.1 表格属性

在这里插入图片描述

在这里插入图片描述

6.2 表头标签

在这里插入图片描述

姓名	性别	年龄
小光光	男	52

在这里插入图片描述

6.3 表格结构

姓名	性别	年龄
小光光	男	52
小光光	男	52

在这里插入图片描述

6.4 表格标题标签

在这里插入图片描述

表格的标题
姓名	性别	年龄
小光光	男	52

6.5 合并单元格

在这里插入图片描述

6.5.1 跨列合并(colspan)

表格的标题
姓名	性别	年龄
小光光1	男	52
小光光2	男	52
小光光3	男，52

在这里插入图片描述

6.5.2 跨行合并

表格的标题
姓名	性别	年龄
小光光1	男	52
小光光2	男
小光光3	男	52

在这里插入图片描述

七、表单和表单控件

7.1 表单

在这里插入图片描述

7.2 文本框和密码框

	 
    用户名：
    
    密   码：

在这里插入图片描述

7.3 单选按钮和复选按钮

在这里插入图片描述

	
    爱 好：
     足球 
     篮球 
     游泳

在这里插入图片描述

7.4 默认选中表单属性

在这里插入图片描述

7.5 input按钮组

    
    搜 索： 



    
    提 交： 



    
    重 置： 



    
    图片按钮： 



    
    上传文件：

在这里插入图片描述

7.6 label标签

在这里插入图片描述
①label直接包裹input

    
    输入账号：

②label内有多个input，通过for id来具体定位

	
    输入账号：

7.7 文本域

在这里插入图片描述

留言板：请输入留言

7.8 下拉菜单

在这里插入图片描述

    
    籍贯：

7.9 表单域

在这里插入图片描述

    
        用户名： 

        密   码：

Notes：
get速度快，但是会显示表单里面的内容，不安全，不能用作密码提交；
post速度慢一些，但是不会显示表单内容，安全一些。

八、HTML5新增的标签和属性

8.1 文档类型和字符集

在这里插入图片描述

8.2 查看手册及其新增标签

w3c手册中文官网：HTML5中的新标签

     页面头部-页眉     
     导航栏 
     页面底部-页脚 
     文章 
     小区块 
     侧边

8.3 datalist标签

datalist标签定义选项列表，与input元素配合使用。

在这里插入图片描述

8.4 fieldset元素

fieldset元素可将表单内的相关元素分组，打包。

      
        用户登录
        用户名： 


        密   码：

在这里插入图片描述

8.5 HTML5新增的input表单

在这里插入图片描述

    
        HTML5新增的input表单
        
            邮箱：

            手机号码：

            url：

            数字：

            搜索：

            自由拖动滑块：
            
            小时分钟：

            年月日：

            时间：

            月年：

            星期 年：

            颜色：

在这里插入图片描述

8.6 HTML5新增的属性

在这里插入图片描述

8.7 多媒体标签

在这里插入图片描述

8.7.1 embed引入网上视频

在这里插入图片描述

8.7.2 音频audio

在这里插入图片描述

loop="-1"或者loop 无限循环播放。

在这里插入图片描述

8.7.3 视频video

在这里插入图片描述

web前端 web