HTML常用标签

注释

vscode快捷键： ctrl+/

文本格式化

b：加粗
```
这是b标签
```

big：加大
```
这是big标签
```

em：着重，自带斜体
```
这是em标签
```

i：斜体
```
这是i标签
```

small：小号
```
这是small标签
```

strong：着重，自带加粗
```
这是strong标签
```

sub：下标

这是一个下标的化学分子式H₂O

sup：上标
```
这是一个上标的计算式2³
```

ins：下划线
```
这是ins标签
```

del：删除线
```
这是del标签
```

标题

双标签，容器级
作用：只添加语义

权重：一般只设置一个h1

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

段落与换行

段落

这是一个段落

换行

这是一个段落，在这里进行换行，
这是第二段落

图像

属性

src：路径
- 绝对路径
  - 在计算机的路径
```
 
```
  - 互联网上的路径
```
 
```
- 相对路径：相对该HTML的位置（建议）
width：宽度
height：高度
border：边框
```
 
```
title：鼠标悬停时提示文本
```
 
```
alt：没找到图像的替换文本(建议使用）

音频和视频

音频

双标签
src设置路径
支持音频格式：mp3、ogg、wav
必须要有控制条
```
  
```

视频

双标签
src设置路径
支持视频格式：mp4、ogg、webm
必须要有控制条
```
  
```

超链接

属性

href：超文本引用，即路径。href="目标地址 "
何处跳转
- _self：默认值，在当前窗口打开
- _blank:在新的窗口打开
```
跳转到百度
```
跳转到百度
title：悬停时的提示文本

锚点

设置锚点
- 方法一：目标位置添加id="mubiao"
```
 纯文本格式
```
- 方法二超链接添加name="mubiao"
```
  
```
在要点击的超链接添加href="#mubiao"
```
a href="#mubiao">纯文本格式
```

无序列表

ul内部嵌套li，li里面可以接着嵌套
只搭建结构，没有样式

无先后之分

    
    
      红楼梦
      
        林黛玉
        薛宝钗
        王熙凤
      
    
    西游记
    水浒传
    三国演义

有序列表

ol内部嵌套li，li里面可以接着嵌套

有先后之分

国土面积排行
  
    俄罗斯
    加拿大
    
      中国
      
        新疆
        西藏
        内蒙古

定义列表

dl：结构、dt：主题、dd：解释项
dl内部只能嵌套dt和dd
dd是对dt的进一步解释，解释的是离得最近的那个dt
dl后面可以多个dt，dt后面可以多个dd

dt和dd都是容器级


    张三
    城市：北京
    年龄：18
    李四
    城市：上海
    年龄：20
    学校：外国语学校
    王五

布局标签

div标签

双标签，容器级
划分网页区域
```
哈哈哈
```
哈哈哈

span标签

双标签，容器级
局部调整
```
心情：哈哈哈
```

表格

表格基础

table属性

可以添加border边框属性
th：表头自带CSS样式效果，文字显示粗体加粗

表格的单元格之间有默认的空隙，会导致双线边框。

解决方法： style="border-collapse: collapse;"表示边框塌陷

1	2
(1，1)	(1，2)
(2，1)	(2，2)

合并单元格

左右合并：colspan="2"
上下合并：rowspan="2"

技巧

先写出所有tr
再添加所有td，数统一线上数目
看是如何合并的

表格分区

分区标签
- caption：标题
- th：头部
- td：主题
- tfoot：页脚

技巧

先写各个分区
再填充分区
如有合并单元格，便合并


    各地区固定资产投资情况
    
      
        地区
        按总量分
      
      
        自年初累计(亿元)
        比去年同期增长(%)
      
    
    
    
      
        全国
        123456.78
        9.5
      
      
        全国
        123456.78
        9.5
      
      
        全国
        123456.78
        9.5
      
      
        全国
        123456.78
        9.5
      
      
        全国
        123456.78
        9.5

各地区固定资产投资情况
地区	按总量分
全国	123456.78	9.5
全国	123456.78	9.5
全国	123456.78	9.5
全国	123456.78	9.5
全国	123456.78	9.5

表单

表单域标签

功能性标签，最终信息提交到服务器
双标签，容器级
属性
- action：服务器地址（url）
- method：提交方式（get/post）
- name：名称

表单元素

input标签

单标签，特殊文本
通过标签属性实现功能

标签属性

type

text：单行文本框
```
  
```
password：密码
```
  
```
radio：单选框（==几个一起用==）
```
 男
 女  
```
checkbox：复选框（==同name，方便CSS==）
```
 唱歌
 代码
 运动  
```
button：普通按钮
reset：重置按钮
submit：提交按钮
image：图片按钮（与提交一样）
file：文件上传（==multiple="multiple"设置了则可以选择多个文件==）
```
  
```
hidden：隐藏输入字段
name：名称
value：默认文本
size：宽度
checked：默认备选中项
```
 男  
```
maxlenght：最大输入字符

文本域</h4> <ul> <li>输入多行文字</li> <li>双标签，本身是特殊文字</li> <li>可以设置默认的文字，双标签之间的文字就是默认的文字</li> </ul> <h5>属性</h5> <ul> <li><p>rows：最大行数</p></li> <li> <p>cols：最大列数，即每行最多多少个字节</p> <pre><code class="html"><textarea rows="5" cols="30">请书写一个200字的自我介绍

下拉菜单

双标签，文本级
默认选中项：selected="selected"
```
  
```

分组管理：select>optgroup>option

optgroup可以设置label属性，添加分组标签名

label标签

标记或者是绑定几个元素
方法一：
- 设置id，绑定内容用包裹，label设置for属性，值为id属性值
```
 男
```
方法二
- 包裹住需要绑定的元素和内容（绑定对象离得近时使用）
```
 绘画
```

字符实体

&开头，；结尾
区分大小写
空格：；

版权：©；

这是一个连续的空      格
  这是一个版权符号©

地区	按总量分
地区	自年初累计(亿元)	比去年同期增长(%)
全国	123456.78	9.5
全国	123456.78	9.5
全国	123456.78	9.5
全国	123456.78	9.5
全国	123456.78	9.5

HTML常用标签

注释

文本格式化

标题

一级标题

二级标题

三级标题

四级标题

五级标题

六级标题

段落与换行

段落

换行

图像

标签

属性

音频和视频

音频

视频

超链接

标签

属性

锚点

纯文本格式

无序列表

红楼梦

有序列表

国土面积排行

中国

定义列表

布局标签

div标签

心情：哈哈哈

表格

表格基础

table属性

合并单元格

表格分区

表单

表单域标签

表单元素

input标签

标签属性

type

下拉菜单

label标签

字符实体

你可能感兴趣的:(HTML常用标签)