HTML常用标签

注释

vscode快捷键： ctrl+/

<!-- <h2>这是一个二级标题</h2> -->

文本格式化

b：加粗
```
<p><b>这是b标签</b></p>
```

big：加大
```
<p><big>这是big标签</big></p>
```

em：着重，自带斜体
```
<p><em>这是em标签</em></p>
```

i：斜体
```
<p><i>这是i标签</i></p>
```

small：小号

<p><small>这是small标签</small></p>

strong：着重，自带加粗

<p><strong>这是strong标签</strong></p>

sub：下标

<p>这是一个下标的化学分子式H<sub>2</sub>O</p>

sup：上标

<p>这是一个上标的计算式2<sup>3</sup></p>

ins：下划线
```
<p><ins>这是ins标签</ins></p>
```

del：删除线
```
<p><del>这是del标签</del></p>
```

标题

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

权重：一般只设置一个h1

  <h1>一级标题</h1>
  <h2>二级标题</h2>
  <h3>三级标题</h3>
  <h4>四级标题</h4>
  <h5>五级标题</h5>
  <h6>六级标题</h6>

段落与换行

段落

<p>这是一个段落</p>

换行

<p>这是一个段落，在这里进行换行，<br>这是第二段落</p>

图像

属性

src：路径

绝对路径

在计算机的路径

 <img src="C:/Users/%E5%82%BB%E5%82%BB%E5%88%86%E4%B8%8D%E6%B8%85/Documents/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/HTML5%E7%BD%91%E9%A1%B5%E5%BC%80%E5%8F%91/img/01.jpg" />

互联网上的路径

 <img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.IiId9vE8cXMlE_msERXPVQHaEK?w=328&h=185&c=7&r=0&o=5&dpr=1.25&pid=1.7" />

相对路径：相对该HTML的位置（建议）

<img src="img/02.jpg" />

width：宽度
```
<img src="img/01.jpg" width="100px" />
```
height：高度
```
<img src="img/01.jpg" height="300px"/>
```

border：边框

 <img src="img/01.jpg" height="300px" border="20px"/>

title：鼠标悬停时提示文本

 <img src="img/01.jpg" height="300px" title="点击查看源网页"/>

alt：没找到图像的替换文本(建议使用）
```
<img src="img/03.jpg" alt="刘亦菲"/>
```

音频和视频

音频

双标签
src设置路径
支持音频格式：mp3、ogg、wav

必须要有控制条

  <audio src="01.mp3"       controls="controls"></audio>

视频

双标签
src设置路径
支持视频格式：mp4、ogg、webm

必须要有控制条

  <video src="01.mp4" controls="controls"></video>

超链接

属性

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

锚点

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

无序列表

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

无先后之分

<ul>    
    <li>
      <h4>红楼梦</h4>
      <ul>
        <li>林黛玉</li>
        <li>薛宝钗</li>
        <li>王熙凤</li>
      </ul>
    </li>
    <li>西游记</li>
    <li>水浒传</li>
    <li>三国演义</li>
  </ul>

有序列表

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

有先后之分

<h3>国土面积排行</h3>
  <ol>
    <li>俄罗斯</li>
    <li>加拿大</li>
    <li>
      <h4>中国</h4>
      <ol>
        <li>新疆</li>
        <li>西藏</li>
        <li>内蒙古</li>
      </ol>
    </li>
  </ol>

定义列表

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

dt和dd都是容器级

<dl>
    <dt>张三</dt>
    <dd>城市：北京</dd>
    <dd>年龄：18</dd>
    <dt>李四</dt>
    <dd>城市：上海</dd>
    <dd>年龄：20</dd>
    <dd>学校：外国语学校</dd>
    <dt>王五</dt>
  </dl>

布局标签

div标签

双标签，容器级
划分网页区域
```
<div style="color:blue; background: red;">哈哈哈</div>
```
<div style="color:blue; background: red;">哈哈哈</div>

span标签

双标签，容器级

局部调整

<h2>心情：<span style="color:red;">哈哈哈</span></h2>

表格

表格基础

table属性

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

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

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

<table border="1" style="border-collapse: collapse;">
    <tr>
      <th>1</th>
      <th>2</th>
    </tr>
    <tr>
      <td>(1，1)</td>
      <td>(1，2)</td>
    </tr>
    <tr>
      <td>(2，1)</td>
      <td>(2，2)</td>
    </tr>
  </table>

合并单元格

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

技巧

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

  <table border="1" style="border-collapse: collapse;">
    <tr>
      <td colspan="2">1</td>
      <td rowspan="2">2</td>
    </tr>
    <tr>
      <td rowspan="2">3</td>
      <td>4</td>
    </tr>
    <tr>
      <td colspan="2">5</td>
    </tr>
  </table>

表格分区

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

技巧

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

<table border="1" style="border-collapse: collapse;">
    <caption>各地区固定资产投资情况</caption>
    <thead>
      <tr>
        <th rowspan="2">地区</th>
        <th colspan="2">按总量分</th>
      </tr>
      <tr>
        <th>自年初累计(亿元)</th>
        <th>比去年同期增长(%)</th>
      </tr>
    </thead>
    
    <tbody>
      <tr>
        <td>全国</td>
        <td>123456.78</td>
        <td>9.5</td>
      </tr>
      <tr>
        <td>全国</td>
        <td>123456.78</td>
        <td>9.5</td>
      </tr>
      <tr>
        <td>全国</td>
        <td>123456.78</td>
        <td>9.5</td>
      </tr>
      <tr>
        <td>全国</td>
        <td>123456.78</td>
        <td>9.5</td>
      </tr>
      <tr>
        <td>全国</td>
        <td>123456.78</td>
        <td>9.5</td>
      </tr>
    </tbody>
  </table>

表单

表单域标签

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

表单元素

input标签

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

标签属性

type

text：单行文本框

<input type="text" value="默认输入文本" >

password：密码
```
<input type="password">  
```

radio：单选框（==几个一起用==）

<input type="radio" name="sex" /> 男
<input type="radio" name="sex" /> 女

checkbox：复选框（==同name，方便CSS==）

<input type="checkbox" name="hobby" /> 唱歌
<input type="checkbox" name="hobby" /> 代码
<input type="checkbox" name="hobby" /> 运动

button：普通按钮

<input type="button" value="普通按钮">

reset：重置按钮

<input type="reset" value="重置按钮">

submit：提交按钮

<input type="submit" value="提交按钮">

image：图片按钮（与提交一样）
```
<input type="image" src="01.jpg">
```
file：文件上传（==multiple="multiple"设置了则可以选择多个文件==）
```
<input type="file" multiple="multiple" />  
```
hidden：隐藏输入字段
name：名称
value：默认文本
size：宽度

checked：默认备选中项

<input type="radio" name="sex" checked="checked" /> 男

maxlenght：最大输入字符

文本域<textarea>

输入多行文字
双标签，本身是特殊文字
可以设置默认的文字，双标签之间的文字就是默认的文字

属性

rows：最大行数

cols：最大列数，即每行最多多少个字节

<textarea rows="5" cols="30">请书写一个200字的自我介绍</textarea>

下拉菜单

双标签，文本级

默认选中项：selected="selected"

<option selected="selected">北京</option>

分组管理：select>optgroup>option

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

<select>
      <optgroup label="国内">
        <option>北京</option>
        <option>上海</option>
        <option selected="selected">广州</option>
        <option>厦门</option>
      </optgroup>
      <optgroup label="国外">
        <option>伦敦</option>
        <option>东京</option>
        <option>纽约</option>
      </optgroup>
    </select>

label标签

标记或者是绑定几个元素
方法一：
- 设置id，绑定内容用<label>包裹，label设置for属性，值为id属性值
```
<input type="radio" name="sex" checked="checked" id="nan"><label for="nan"> 男</label>
```
方法二
- 包裹住需要绑定的元素和内容（绑定对象离得近时使用）
```
<label><input type="checkbox" name="hobby"> 绘画</label>
```

字符实体

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

版权：&copy；

<p>这是一个连续的空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格</p>
  <p>这是一个版权符号&#169;</p>

最后编辑于：2021.09.13 21:31:49

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 203,772评论 6赞 477
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 85,458评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 150,610评论 0赞 337
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,640评论 1赞 276
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,657评论 5赞 365
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,590评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,962评论 3赞 395
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,631评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,870评论 1赞 297
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,611评论 2赞 321
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,704评论 1赞 329
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,386评论 4赞 319
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,969评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,944评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,179评论 1赞 260
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 44,742评论 2赞 349
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,440评论 2赞 342