HTML标签及元素-CSDN博客

本文链接：https://blog.csdn.net/m0_59642141/article/details/125403541

HTML是什么？
- HyperText Markup Language 超文本标记语言
标记标签
- 双标记标签
  - <标签名> 内容</标签名>
- 单标记标签
  - <标签名 >
html文档基本结构
- <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>网页标签页标题</title> </head> <body></body> </html>
段落标签
- <p>段落内容</p>
标题标签
- <h1>一级标题</h1>
- <h2>二级标题</h2>
- <h3>三级标题</h3>
- <h4>四级标题</h4>
- <h5>五级标题</h5>
- <h6>六级标题</h6>
- 相同点：都加粗，都是块元素
- 不同点：字号依次减小
图片标签
<img src="" alt="" width="" height="">
- src 图片引入路径
  - 1.当html文件与图片在同一个目录下，src的值是直接写图片名称<img src="1.jpg">
  - 2.当html文件与图片所在文件夹在同一个目录下，src的值是先写图片所在的文件夹名称，再写图片名称<img src="img/2.jpg">
  - 3.当html文件所在文件夹与图片在同一个目录下，src的值是先通过 ../ 跳出当前目录，再写图片名称<img src="../3.jpg">
  - 4.当html文件所在文件夹与图片所在文件夹在同一个目录下，src的值是先通过 ../ 跳出当前的目录，再写图片文件夹名称，最后写图片名称<img src="../img/4.jpg">
- alt 当图片加载失败时，用来替代图片的文本
- width 宽度
- height 高度
- title 鼠标放到标签上的提醒文本
列表
- 无序列表
  - <ul><li>列表</li><li>列表</li>...</ul>
- 有序列表
  - <ol><li>列表</li><li>列表</li>...</ol>
- 定义列表
  - <dl><dt>术语</dt><dd>解释说明</dd></dl>
换行 <br>
水平线
- <hr width="" color="" align="">
- width 宽度
- color 颜色
- align 水平方向对齐方式
  - center 居中
  - left 居左对齐
  - right 居右对齐
加粗
- <b></b>
- <strong></strong> 表强调
倾斜
- <i></i>
- <em></em> 表强调
上下标
- <sup>上标</sup>
- <sub>下标</sub>
小号字体
- <small></small>
特殊符号
- < 小于号
- > 大于号
- 空格
  -  
  - &ensp;
  - &emsp;
- 关闭
  - ×
- 小圆点
  - •
超链接
- <a href="">内容</a>
  - href 链接地址
    - url地址
    - 锚链接 #id值
  - target 链接打开方式
    - _blank 在新窗口打开
热点区域
- <img src="" alt="" usemap="#name值">
- <map name="name"><area shape="" coords="" href="" target=""></map>
  - shape 形状
    - rect 矩形
    - circle 圆形
    - poly 多边形
  - coords 坐标
    - 当shape="rect"，coords="x1 y1 x2 y2"
    - 当shape="circle" ,coords="x1 y1 R"
    - 当shape="poly" , coords="x1 y1 x2 y2 ...."
  - href 跳转路径
  - target 链接打开方式
行内框架
- <iframe src="地址" frameborder="0" scrolling="no"></iframe>
表格
- 基本结构
  - <table> <tr><th>表头</th><td>单元格</td>....</tr> .... </table>
- table表格属性
  - border 边框
  - cellspacing 单元格与单元格之间的距离
  - cellpadding 内容与单元格四周的距离
  - width 宽度
  - height 高度
  - align 水平方向对齐方式
    - left 左对齐
    - center 居中对齐
    - right 右对齐
  - bgcolor 背景色
  - bordercolor 边框颜色
  - rules 规定内侧边框哪部分可见
    - none 均不可见
    - rows 位于行间的线条可见
    - cols 位于列间线条可见
    - all 位于行与列间线条均可见
- 单元格合并
  - 水平合并单元格
    - colspan="合并的单元格个数"
  - 垂直合并单元格
    - rowspan="合并的单元格个数"
表单
- <form action="" method=""></form>
  - action 数据提交的路径
  - method 数据提交方式
    - get
    - post
- <input type="" name="" value="" placeholder="">
  - type 类型
    - text 文本框
    - password 密码
    - radio 单选框 name的值一致
    - checkbox 复选框
    - submit 提交按钮
    - image 图片提交按钮 src="图片路径" alt=""
    - reset 重置按钮
    - button 普通按钮
    - file 文件上传框 multiple 多个
  - name 名字
  - value 值初始值
  - placeholder 输入域的提醒文本
  - maxlength 最大长度
  - required 必须
  - disabled 不可用状态
  - readonly 只读状态
- <textarea></textarea> 多行文本框（文本域）
- <select><option value="值" selected>文本</option><option value="值">文本</option></select>
- <button>按钮</buttom>
- h5新增语义化标签
  - <header>头部</header>
  - <nav>导航</nav>
  - <main>主体</main>
  - <section></section>
  - <aside></aside>
  - <article></article>
  - <footer>底部</footer>
  - <figure><figcaption>标题</figcaption>独立流内容（图表、图片、代码等）</firgure>
  - <details><summary>概要</summary>内容</details>
- h5新增表单控件
  - <input type="email"> 邮箱
  - <input type="url"> 网址
  - <input type="number" min="最小值" max="最大值" value="初始值" step="步长"> 数字域
  - <input type="search"> 搜索域
  - <input type="tel"> 电话号码
  - <input type="date"> 年月日
  - <input type="month"> 年月
  - <input type="week"> 年周
  - <input type="time"> 时分
  - <input type="datetime"> UTC时间
  - <input type="datetime-local"> 本地时间
  - <input type="range"> 滑动条
  - <input type="color"> 拾色器
元素分类
- 块元素
  display:block
  - <p></p>
  - <h1></h1> ~ <h6></h6>
  - <ul></ul>
- - <li></li>
  - <ol></ol>
  - <hr>
  - <div></div>
  - <form></form>
  - 块元素可以直接设置宽高
- 行内元素
  display:inline
  - <b></b>
  - <strong></strong>
  - <i></i>
  - <em></em>
  - <sup></sup>
  - <sub></sub>
  - <small></small>
  - <span></span>
  - <a href=""></a>
  - <label></label>
  - 行内元素无法设置宽高，需要display：block
- 行内块元素
  display:inline-block
  - <img src="">
  - <iframe src=""></iframe>
  - <input type="">
  - <textarea></textarea>
  - <select></select>
  - <button></button>
嵌套规则：

    块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。
    块级元素不能放在p里面。
    有几个特殊的块级元素只能包含内联元素，不能包含块级元素。如h1,h2,h3,h4,h5,h6,p,dt
    li内可以包含div，p标签中不能有div