使用环境

• VS Code编译器
• 浏览器(谷歌或Microsoft Edge)

注释

• 注释标签：
• VsCode注释快捷键： Ctrl + /

一.HTML基本框架

如何快速生成VS Code基本框架：在VS Code中输入'!'并回车生成一个HTML基本骨架

• html:整个网页
• head:网页头部，存放给浏览器看的代码，例如CSS
• body:网页主体，存放给用户看的代码，例如图片、文字等
• title:网页标题

二.标题标签

• 标签名： h1~h6（双标签）
• 显示特点：文字加粗，且标签数字越大，标题的文字大小越小；一个标题标签独占一行；
• 注意：h1标签在一个网页中只能用一次，而h2~h6标签没有使用次数的限制

代码示例

    
一级标题
    
二级标题
    
三级标题
    
四级标题
    
五级标题
    
六级标题

结果展示：

三.段落标签

标签名：p（双标签）
显示特点：独占一行；段落之间存在间隙

代码示例

    
我我我我我我嚄嚄嚄嚄嚄嚄嚄嚄嚄嚄嚄嚄嚄我我我我我嚄嚄嚄嚄嚄嚄嚄嚄嚄嚄嚄嚄嚄嚄嚄嚄嚄我我
    
你你你你你你你你你
    
她她她她她她她她她她她她她她她她她她她

运行结果：

四.换行与水平线标签

• 换行：br（单标签）
• 水平线：hr （单标签）

代码示例

    
这里展示换行与水平线标签
    

    第一行内容
    

    第二行内容
    

    第三行内容

运行结果：

五.文本格式化标签(加粗、倾斜、下划线、删除线)

• 加粗：strong或b
• 倾斜：em或i
• 下划线：ins或u
• 删除线：del或s

代码示例

    
这里展示文本格式化标签
    加粗标签
    加粗标签
    

    倾斜标签
    倾斜标签
    

    下划线标签
    下划线标签
    

    删除线标签
    删除线标签

结果展示：

六.图像标签

• 作用：在网页中插入图片
• 语法：

src用于指定图像的位置和名称，是img的必须属性

代码示例

    
这里展示图片的标签
    

        

运行结果：

常用属性

扩展：相对路径,绝对路径与在线网址

• 相对路径：从当前文件位置出发查找目标文件
• 绝对路径：从盘符出发查找目标文件
• 在线网址：路径为网址的形式

相对路径：./map.jpg
绝对路径：C:imgesmap.jpg
在线网址：src="https://www.baidu.com/images/logo.png"

七.超链接标签

• 作用：跳转到其他页面
• 标签名：a(双标签)
• 必须属性：href-跳转地址

开发时，如果不知道超链接的跳转地址，则href属性值写#，表示空链接，点击不会跳转

默认是点击链接在当前页面打开网址，如果想新建页面打开网址，则需要添加属性 target="_blank"

代码示例

    
这里展示超链接跳转标签
    点击我跳转到百度

八.音频标签

• 标签名：audio(双标签)

常用属性

属性	作用	说明
src(必须属性)	音频URL	支持格式：MP3,Ogg,Wav
controls	显示音频控制面板
loop	循环播放
autoplay	自动播放	通常禁用

代码示例

运行结果

九.视频标签

• 标签名：video(双标签)

常用属性

属性	作用	说明
src(必须属性)	视频URL	支持格式：MP4,WebM,Ogg
controls	显示视频控制面板
loop	循环播放
muted	静音播放
autoplay	自动播放

代码示例

十.列表标签

• 列表的分类：无序列表，有序列表，定义列表
• 无序列表标签：ul嵌套li,ul是无序列表，li是列表条目。ul标签里面只能包含li标签，li标签里面可以包裹任何内容
• 有序列表标签：ol嵌套li,ol是有序列表，li是列表条目。ol标签里面只能包含li标签，li标签里面可以包裹任何内容
• 定义列表标签：dl嵌套dt和dd,dl是定义列表，dt是定义列表的标题，dd是定义列表的描述。dl里面只能包含dt和dd,dt和dd可以包含任何内容

代码示例

    
展示无序列表
    

        
第一项
        
第二项
        
第三项
    

    
展示有序列表
    

        
第一项
        
第二项
        
第三项
    

    
展示定义列表
    

        
列表标题
        
第一项
        
第二项
        
第三项

        
第二标题
        
第一项
        
第二项
        
第三项
    

运行结果：

十一.表格标签

语法：table嵌套tr,tr嵌套td/th

标签名	说明
table	表格
tr	行
th	表头单元格
td	内容单元格

表格默认没有边框线，加属性border添加边框线

代码示例

    
展示表格（不加边框线）

    

        

            
姓名
            
语文
            
数学
            
总分
        
        

            
张三
            
99
            
100
            
199
        
        

            
李四
            
98
            
100
            
198
        
    

    
展示表格（加边框线）
    

        

            
姓名
            
语文
            
数学
            
总分
        
        

            
张三
            
99
            
100
            
199
        
        

            
李四
            
98
            
100
            
198
        
    
   

运行结果：

扩展：表格结构标签

作用：用表格结构标签把内容划分区域，便于代码开发，展示给用户看的部分不变

标签名	含义
thead	表格头部
tbody	表格主体
tfoot	表格底部

代码展示

    

        

            

                
姓名
                
语文
                
数学
                
总分
            
        

        

            

                
张三
                
99
                
100
                
199
            
            

                
李四
                
98
                
100
                
198
            
        

        

            

                
总结
                
全市第一
                
全市第一
                
全市第一
            
        

    
  

用户看到的表格结果不变

合并单元格

将多个单元格合并成一个单元格，以合并同类信息。
可以跨行合并，也可以跨列合并

• 跨行合并，保留最上单元格，添加属性rowspan
• 跨列合并，保留最左单元格，添加属性colspan
• ** rowspan和colspan的属性值是数值，为合并单元格的个数**

代码示例

    
展示跨行合并单元格
    

        

            

                
姓名
                
语文
                
数学
                
总分
            
        

        

            

                
张三
                
99
                
100
                
199
            
            

                
李四
                
98
                
                
198
            
        

        

            

                
总结
                
全市第一
                
全市第一
                
全市第一
            
        

    

    
展示跨列合并单元格
    

        

            

                
姓名
                
语文
                
数学
                
总分
            
        

        

            

                
张三
                
99
                
100
                
199
            
            

                
李四
                
98
                
100
                
198
            
        
        
        

            

                
总结
                
全市第一
                
            
        

    
  

运行结果：

十二.表单标签

1.input标签

input标签的type属性值总结

type属性值	说明	特点
text	文本框，输入单行文本	输入什么就显示什么
password	密码框	输入什么都是以点的形式显示
radio	单选框
checkbox	多选框
file	上传文件

代码展示

    
展示input标签
    文本框 
    

    密码框 
    
 
    单选框 
    

    多选框 
    

    上传文件 

input占位文本属性(提示信息)

• 属性 placeholder
• 属性值：提示信息

代码展示

    
展示input的占位属性值
    文本框 
    

    密码框 

单选框radio属性

属性值总结

属性名	作用	说明
name	控件名称	控件分组，同组只能选中一个（单选功能）
checked	默认选中	属性名和属性值相同，简写为一个单词

代码示例

    
展示redio属性值
    
 
    性别  男  女

表单如何上传多个文件？

默认情况下，文件上传表单控件只能上传一个文件，添加multiple属性可以实现文件多选功能

代码示例

    
展示上传多个文件
    
 
    上传文件  

多选框checkbox属性

• 默认选中添加属性：checked

代码示例

    
展示多选框的默认选中
    
 
    我姓：
     王
     李
     国

2.下拉菜单

语法总结：select嵌套option,select是下拉菜单整体，option是下拉菜单的每一项

默认选择属性：selected

代码示例

    
展示下拉菜单
    请选择你所在的城市
    
        北京
        上海
        广州
        深圳
        武汉
    

3.文本域

• 作用：多行输入文本等待表单控件

• 标签：textarea, 双标签

代码示例

    
展示文本域标签
    输入评论

4.label标签

• 作用：网页中，某个标签的说明文本。或用label标签绑定文字和表单控件的关系，增大表单控件的点击范围。

• 如何使用label标签增大点击范围？：①设置label标签的for属性值和表单控件的id属性值相同 ②使用label标签包裹文字和表单控件

• 支持文本框，密码框，上传文件，单选框，多选框，下拉菜单，文本域等增大点击范围

代码示例

    
展示label标签增大点击范围
    性别  男
     女

4.按钮

• 标签：button(双标签)

• 表单控件用form标签管理，按钮才有对应的实际效果

如果botton标签省略type属性，则默认功能为提交

type属性值总结

type属性值	说明
submit	提交按钮，点击后可以提交数据到后台（默认功能）
reset	重置按钮，点击后将表单控件恢复默认值
button	普通按钮，默认没有功能，一般配合JS使用

代码展示

    
表单按钮标签
    
    

        用户名： 


        密码： 



        提交
        重置

    

十三.布局标签（div和span）

• 作用：布局网页（划分网页区域）

• div:独占一行，双标签

• span:不换行，双标签

代码示例

  
这是div标签,独占一行
  这是不换行的span标签

十四.字符实体（空格，大于小于符号）

• 作用：在网页中显示预留字符

显示结果	描述	实体名称
	空格	& nbsp
	小于符号	& lt
>	大于符号	& gt

代码示例

    
展示HTML中的字符实体
    这里是展示字符实体，  打两个空格。   打三个空格。
    

    画一个小于符号：<
    

    画一个大于符号：>