HTML常用/基础使用标签

一、标签属性

使用HTML制作网页时，如果想让HTML标签提供更多的信息，可以使用HTML标签的属性加以设
置。
通过<标签名 属性名1=“属性值1” 属性名2=“属性值2” …> 内容 </标签名> 方式使用，例如：key=“value” ，key是键（属性名）的意思 ，value是值的意思。
注意：
1、 标签可以有很多属性，必须写在开始标签中，位于标签名后面。
2、 属性之间不分先后顺序，标签名与属性、属性与属性之间用空格分开。
3、 任何标签的属性都有默认值，省略该属性则取默认值。
4、 采用键值对的格式（key=“value” ）。

二、注释标签

注释就是对代码进行解释，是不会显示在浏览器窗口的，但如果用户查看源代码还是可以看到的，注释格式如：

三、文字标签

1、h1~h6标题标签
h标签用作文章的标题，使用h标签文字会加粗变黑，自己占一行，其中 h1 是最大的，h6是最小的。
注意
h1 标签因为重要，尽量少用； 一般 h1 都是给logo使用；一般一个网页上只有一个h1标签。
2、p段落标签
双标签<p></p>表示段落。默认情况下，文本在一个段落中会根据浏览器窗口的大小自动换行。
3、b和strong标签
<b></b>、<strong></strong> 标签文本以粗体方式显示，推荐使用strong，strong标签更有强调意味。
4、i和em标签
<i></i>、<em></em> 标签文本以斜体方式显示，推荐使用em，em标签更有强调意味 。
5、s和del标签
<s></s>、<del></del> 标签文本以加删除线方式显示，推荐使用del。
6、u和ins标签
<u></u>、<ins></ins> 标签文本以加下划线方式显示，推荐使用ins。
注意：
1、b、i、s、u标签只有使用， 没有强调的意思，我们以后不要用。
2、strong、em、del、ins标签语义更强烈，对SEO更加友好一点。

四、其他标签

1、hr水平线标签
<hr>标签是水平线，可以用来分割页面。
2、br换行标签
<br>标签是换行标签，可以放在<p>标签文字里面进行换行。
3、div和span标签
没什么具体含义，就是用来表示分区。div 是 division 的缩写，表示分割、分区的意思，由很多div 来组合网页，而span则是跨度、跨距、范围的意思。
<div>是一个块标签， <span>是一个行内标签。
4、img图片标签
<img>用来展示图片的。

常用属性：
1、src：图像的路径。
2、alt：图像不能显示时的替换文本。
3、title：当鼠标悬停时显示的内容。
4、width、height：设置图像的宽度和高度。
5、border：设置图像边框的宽度。

5、a超链接标签
用来放一个链接去跳转到其他页面。

常用属性：
1、href：Hypertext Reference的缩写，意思是超文本引用用于指定链接目标的url地址。
2、target：用于指定链接页面的打开方式，其取值有_self和_blank两种，其中_self为默认值，_blank为在新窗口中打开方式。
四种链接方式：
1、外部链接：指你的网页需要链接到别人的网页，必须添加 http://或者https://。平常我们虽然在地址栏中没有写协议，但是浏览器会自动帮我 们添加。
2、内部链接：指在一个网站内的链接，直接在链接内部页面名称即可，如 < a href="in.html"> 。
3、空链接：通常将链接标签的href属性值定义为“#”(href=“#”)就可以表示该链接为空。
4、锚点链接：指在一个网页内的链接，使用相应的id名标注跳转目标的位置，如<a href="#id">。

6、列表标签
容器里面装载着文字或图表的一种形式，叫列表，列表最大的特点就是整齐 、整洁、 有序。
列表分类：无序列表、有序列表、自定义列表。

1、无序列表：各个列表项间没有顺序级别之分，他们是并列的。里面有两个标签：ul标签和li标签。其中ul标签中u是指unorder无序的意思 ，l是list列表的意思。li标签就是list列表的意思。
2、有序列表：有排列顺序的列表。里面有两个标签：ol和li标签。
3、自定义列表：顾名思义，自己定义的列表，有三个标签：dl、dt、dd，自定义列表常用于对术语，名词，事件，时间点进行解释和描述，自定义列表的列表项前没有任何项目符号。dt是标题，dd是标题解释。

7、表格标签
里面有四个标签：table、th、tr、td。其中table定义 HTML 表格，简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成，tr定义表格行，th定义表头，td定义表格单元。

常用属性：
1、border：规定表格边框的宽度。
2、cellpadding：规定单元边沿与其内容之间的空白。
3、cellspacing：规定单元格之间的空白。
4、width：规定表格的宽度。
5、表格合并：行合并（rowspan），列合并(colspan)。

8、媒体标签
用于在HTML文档中嵌入音频和视频内容。

常见标签：
1、audio标签：
src属性：指定音频文件的路径。可以设置一个或多个音频源，以不同的音频格式提供，例如MP3、WAV等。
controls属性：可选属性，用于添加播放、暂停和音量控制等功能。当该属性存在时，浏览器会显示默认的音频控件。
autoplay属性：可选属性，用于指定音频是否在页面加载时自动播放。如果设置autoplay属性，则音频会在页面加载时自动播放。
loop属性：可选属性，用于指定音频是否循环播放。如果设置loop属性，则音频会不断循环播放。
muted属性：可选属性，用于指定音频是否静音。如果设置muted属性，则音频不会发出声音。
preload属性：可选属性，用于指定音频是否预先加载。可以设置为"auto"、“metadata”、"none"等值，用于控制音频的预加载方式。
autoplay和preload属性同时存在时，autoplay属性优先级更高，即使设置了preload属性，音频也会在页面加载时自动播放。
2、video标签：

src属性：指定视频文件的路径。可以设置一个或多个视频源，以不同的视频格式提供，例如MP4、OGG等。
controls属性：可选属性，用于添加播放、暂停和音量控制等功能。当该属性存在时，浏览器会显示默认的视频控件。
autoplay属性：可选属性，用于指定视频是否在页面加载时自动播放。如果设置autoplay属性，则视频会在页面加载时自动播放。
loop属性：可选属性，用于指定视频是否循环播放。如果设置loop属性，则视频会不断循环播放。
muted属性：可选属性，用于指定视频是否静音。如果设置muted属性，则视频不会发出声音。
preload属性：可选属性，用于指定视频是否预先加载。可以设置为"auto"、“metadata”、"none"等值，用于控制视频的预加载方式。
autoplay和preload属性同时存在时，autoplay属性优先级更高，即使设置了preload属性，视频也会在页面加载时自动播放。

9、表单标签
在HTML中，一个完整的表单通常由表单控件（也称为表单元素）、提示信息和表单域3个部分构成。
代码举例：

 <form action="/register" method="post" name="form">  
        <label for="username">用户名:</label>  
        <input type="text" id="username" name="username" required><br><br>  
          
        <label for="password">密码:</label>  
        <input type="password" id="password" name="password" required><br><br>  
          
        <label for="email">电子邮件:</label>  
        <input type="email" id="email" name="email" required><br><br>  
          
        <label for="gender">性别:</label>  
        <select id="gender" name="gender">  
            <option value="male">男性</option>  
            <option value="female">女性</option>  
        </select><br><br>  
          
        <label for="birthday">生日:</label>  
        <input type="date" id="birthday" name="birthday" required><br><br>  
          
          <textarea id="message" name="message" rows="4" cols="50" required></textarea><br><br>
          
          <p>填写完成后点击提交按钮。</p>  
          
        <input type="submit" value="注册">  
    </form>  

1、表单域
表单域相当于一个容器，用来容纳所有的表单控件和提示信息，可通过定义处理表单数据所用程序的url地址以及数据提交到服务器的方法。使用form标签创建一个表单实现用户信息的收集和传递。

常用属性：
1、action：用于指定接收并处理表单数据的服务器程序的url地址。
2、method：用于设置表单数据的提交方式，其取值为get或post。
3、name：用于指定表单的名称。

2、表单控件
表单控件包含具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。

常用标签：
1、input标签：单标签，type属性为最基本的属性，其取值有多种，用于指定不同的控件类，包括文本输入框、密码输入框、单选框、复选框、提交/重置按钮等。
2、label标签：用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点。
3、textarea标签：用于创建多行文本输入框。
4、下拉菜单：包含select、option标签，select创建一个下拉菜单，option是下拉菜单中的选项。

注意： 
1、select标签中至少应包含一对`<option></option>` 。
2、在option 中定义selected =" selected "时，当项即为默认选中项。

3、提示信息
提示信息是指在一个表单中包含的一些提示性的文字。