HTML5元素标签

1.HTML元素&标签

标签和元素通常意思相同，但是严格来讲，一个元素通常又是由两个标签组成
1.1HTML标签
一般成对出现、大小写不敏感、但是H4推荐使用小写。
开始标签 ——内容 ——结束标签

<div>div的内容
	<div>div
		<div>test</div>
	</div>  
</div>

HTML标签部分可以嵌套使用
1.2 块级元素
独占一行空间
用来布局段落、列表、导航菜单等
不要把块级元素嵌套在行内元素里
1.3 行内元素
于其它行内元素共享一行空间
一般就是作为段落的一部分
1.4 空元素（单标签）
没有内容的元素
空元素是在开始标签中结束的
不建议直接使用<br>,建议加关闭符<br/>

 <hr/>
 <br/>
<img src="" />

1.5 替代元素(替换元素)
把文件引入文档，并且用自身的位置来替换
img：图片
video：视频
audio：音频

2.HTML属性

元素的属性一般在开始标签里
属性由键值对组成
例如：<div id="myDiv" class="myDivClass"></div>
2.1 核心属性
id：唯一标识
class：表示当前元素是某一类的元素
style：规定元素的行内样式
title：描述元素的信息（光标悬浮时会显示）

3.HTML语法

3.1 实体

1.空格   
2. <    &lt;
3. >    &gt;
4. "    &quot;
5. '    &apos;
6. &    &amp;

3.2 注释

<!--hello，world -->

注释的作用：不会在网页中显示，可以在原码中显示，用来解释说明
3.3 常用标签（元素）
    div 无意义的块级元素。
     p 段落(块级元素)，浏览器会自动在p标签前后添加空行，可以结合br使用。
     h1-h6 一级标题—六级标题，浏览器会自动在标题标签前后添加空行，一般结合hr使用。
3.4 列表
（1）有序列表 ol > li
序号默认从1开始

start属性改变起始值<ol start="3">
reversed (单值属性) 规定列表顺序为降序
type=“1” 默认 1 还有 A a I i 四种值

（2）无序列表 ul > li
标题是圆型符号，没有顺序
（3）自定义列表 dl > dt、dd
3.5 超链接 a
（1）HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定：

 <a href="https://baidu.com">百度一下</a>

（2）绑定目标与元素的id值，实现锚点跳转，例如：

 <a href="#header">返回顶部</a>
 <!--header是顶部某个元素的id值-->

属性：
href：跳转的目的地
target：_self/_blank
3.6 图片

<img src="" alt="">

src：图片的地址（必填项）
alt：图片地址出错时,会显示alt的内容
3.7 视频音频
(1)video视频

<video src="路径"></video>

（2）audio音频

<audio src="路径"></audio>

共同属性：controls:是否显示控制条
loop:是否循环播放（播放结束后从头开始播放）
muted:是否静音播放
autoplay:是否自动播放
3.8 扩展标签
（1）高亮<mark></mark>
（2）引用<cite></cite>
（3）强调（斜体）<em></em>
（4）斜体<i></i>
（5）重点强调（加粗）<strong></strong>
（6）缩略词<abbr title="2021年8月3日星期二">星期二</abbr>

4.H5语义化标签

1. header
   具有引导和导航作用的一个元素，通常来放置标题（导航）logo 搜索栏
2. nav
   可以用作页面导航的链接组，其中导航元素链接到其它页面，或者当前页面的其它部分
3. article
   代表文档，页面中 独立 完整的 可被外部引用的内容，也可以嵌套使用
4. aside
   用来表示当前页面或文章的附属信息部分，他可以包含侧边栏，广告，导航条，以及其它有别于主要内容的部分
5. footer
   通常包含作者信息，相关链接，版权信息等
6. address
   用来呈现文档的联系信息，作者的联系信息，地址，邮箱，电话等
7. section
   类似div 作为html的独立功能
8. details
   可创建一个挂件，仅在被切换成展开状态时，它才会显示内含的信息。
   <summary>元素可为该部件提供概要或者标签。

<details>
  <summary>联系我：</summary>
  <p>邮箱：</p>
  <p>电话：12345677654</p>
  <p>地址：浦东软件园（昆山园）</p>
</details>

9.figure
代表一段独立的内容, 经常与说明 <figcaption> 配合使用

 <figure>
        <img src="" alt="">
        <img src="" alt="">
        <figcaption>扫码了解产品详情</figcaption>
      </figure>

5.表格

5.1 标签

<table>
	<caption></caption>
	<!--caption表示表格的标题信息，常常作为 table 的第一个子元素出现。-->
        <thead>
            <tr>
                <th></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td></td>
            </tr>
        </tbody>
        <tfoot></tfoot>
    </table>

colgroup:列分组，定义一个表中的一组列，作为table的子元素，同时放在caption的后面，其它元素的前面。
col：经常作为colgroup的子元素，有span属性，规定几列为同一列
5.2 属性
align： left center right（表格将在文档左/中/右侧显示）
border： 整数 px
cellpadding：内容与单元格之间的距离
cellspacing：单元格与单元格之间的距离
width：设定表格宽度
bgcolor：设定表格背景色
colspan：跨列合并
rowspan：跨行合并

6.form表单

主要用于用户与web服务器进行交互
6.1 属性
（1）action: URL 用来处理表单信息的服务器地址
（2）method: 浏览器用来提交表单的http方式，常用的get/post
      get ：通过这种方式提交的表单数据会被附加在链接上，通过"?"分割 发送敏感内容不建议使用这种方式。
      post： 表单数据会存放在请求体，传递给服务器。

<form action="" method=""></form>

（3）name: 设置表单的名称
（4）target：表示在提交表单之后，在哪里显示响应信息。
_self：默认值。在相同浏览上下文中加载。
_blank：在新的未命名的浏览上下文中加载。
（5）当method为post时，表单内容提交给服务器时的内容类型 enctype。
6.2 表单元素
1.input 用于接受来自用户的数据
（1）文本框：type=text
（2）密码框：type=password
（3）提交按钮：type=submit ，value=按钮上显示的文字
（4）重置按钮：type=reset， value同上
（5）单/复选框：type=radio/checkbox，value=值，name=名称
单选框name必须相同，checked默认选中

name： 用于设定控件名和提交数据的属性名
value： 用于控件初始化 默认值等功能 （可选）
checked： 单选框&复选框 默认选中属性
disabled：禁用组件 禁用后组件的值也不可提交
readonly：表单设为只读，数据会提交
hidden： 隐藏组件 隐藏后的组件值会被提交
size： 控件的初始宽度，单位是px，但是text和password除外，他俩是指字符的数目
maxlength：可以输入字符数量的最大值
min： number
max： number