a标签去掉下划线_前端入门篇（HTML常用标签）

---

HTML常用标签

注释标签

在“<>”外进行注释，“style”标签和“script”标签内不能使用“”注释

以下注释方法错误：

>div>> style>> script>

 

声明文档类型，例如声明H5：(以下都将以H5为例说明)

必须写在第一行。

参考链接：

smallmouse，公众号：瑶光互联DOCTYPE 是什么？







 


块级元素标签

块级元素特点：总是从新的一行开始；高度、宽度都是可控的，宽度没有设置时，默认为100%；块级元素中可以包含块级元素和行内元素；都有align属性；dispay都是block。

定义一块区域。

h标签通常用作与写标题。

默认字体加粗，字体大小：2em，大多浏览器为32px，上下外边距为0.67em；

默认字体加粗，字体大小：1.5em，大多浏览器为24px，上下外边距为0.83em；

默认字体加粗，字体大小：1.17em，大多浏览器为18.72px，上下外边距为1em；

默认字体加粗，字体大小：1em，大多浏览器为16px，上下外边距为1.33em；

默认字体加粗，字体大小：0.83em，大多浏览器为13.28px，上下外边距为1.67em；

默认字体加粗，字体大小：0.67em，大多浏览器为12px，上下外边距为2.33em；

 




P标签通常用于写段落内容。

默认字体为1em，上下外边距为1em。

ul标签无序HTML列表，将ul结合li标签一起使用创建无序列表。

<ul>  <li>无序列表li>  <li>无序列表li>ul>

默认上下外边距为1em，左内边距为40px。

 

ol标签有序HTML列表，将ol结合li标签一起使用创建有序列表。

<ol>  <li>有序列表li>  <li>有序列表li>ol>

ol标签支持属性：reversed 倒序， start 起始值， type 列表类型。

默认上下外边距为1em，左内边距为40px。

 




dl标签定义一个描述列表，同dt(定义名称)、dd(定义描述)标签一起使用。

<dl>  <dt>名称dt>  <dd>描述dd>  <dt>名称dt>  <dd>描述dd>dl>

默认上下外边距为1em。

默认左外边距为40px。




table标签定义一个表格，同tr(定义表格行)、th(定义表格头)、td(定义表格单元)标签一起使用。

更复杂的 HTML 表格也可能包括 ：

caption元素定义表格标题；

colgroup元素配合col一起使用，对表格中的列进行组合，以便进行格式化，在caption标签后，其他标签之前；

thead元素定义表格头部区域；

tfoot 元素定义表格尾部区域；

tbody元素定义表格内容区域；

<table>  <caption>表格标题caption>  <colgroup>    <col style="background-color:green" />  colgroup>  <colgroup>    <col style="background-color:yellow" />  colgroup>  <colgroup>    <col style="background-color:red" />  colgroup>  <tfoot>    <tr>      <td colspan="3">结尾td>    tr>  tfoot>  <tbody>    <tr>      <td>内容11td>      <td>内容12td>      <td>内容13td>    tr>    <tr>      <td>内容21td>      <td>内容22td>      <td>内容23td>    tr>  tbody>  <thead>    <tr>      <th>标题1th>      <th>标题2th>      <th>标题3th>    tr>  thead>table>




form元素主要用户创建用户提交的表单。

可包含一个或多个表单元素，表单元素有：input、textarea、button、select、option、optgroup、fieldset、lable

<form action="https://www.baidu.com/s">  <input type="text" name="wd" value="HTML"><br>  <input type="submit" value="提交">form>

点击提交后打开新链接https://www.baidu.com/s并传递参数wd=HTML，新链接为https://www.baidu.com/s?wd=HTML。

address元素定义文档作者/所有者的联系信息，文本通常呈现为斜体，大多数浏览器会在该元素的前后添加换行。

菜鸟教程中提到：不应该使用

标签来描述邮政地址，除非这些信息是联系信息的组成部分

。

元素通常被包含在 

 元素的其他信息中。

 

center元素会对其包括的内容进行水平居中

hr元素用于分割内容，会显示一条分割线

pre定义预格式化的文本。被包围在pre标签元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。

blockquote元素定义摘自另一个源的块引用。

lockquote>lockquote>默认上下外边距1em，左右外边距40px。

 




行内元素标签

行内元素特点：和其他元素都在一行；高度、宽度以及内边距都是不可控的，宽高就是内容的宽度，不可以改变；行内元素只能放行内元素，不能包含块级元素；没有align属性；display都是inline。

span元素主要用于行内元素内容进行组合。

<span style="font-weight: bold; color: red;">spanspan><span>标签span>

a元素定义超链接，通常使用href(跳转链接)和target(跳转方式)属性控制。

<a href=”#” target=”_blank” >跳转a>




href设置“#”号可跳转至页面顶部，也可以使用“#”加页面内任意元素id可跳转至该元素所在位置。




br元素主要用于文档内容换行，在元素或内容之间插入“
”相当于插入一个简单的换行符。

b元素定义加粗文本。

strong元素定义重要文本，同样是文本加粗。如果简单为了样式不推荐使用此标签。

img元素定义图像，通常使用src(显示图像的url)和alt(图像替代文本，通常用于图像加载失败)属性控制。

sup元素定义上标文本。

sub元素定义下标文本。

i元素定义斜体文本。

   em元素定义被强调的文本，同样为斜体文本。如果简单为了样式不推荐使用此标签。

del元素定义删除的文本。

u元素定义下划线文本。

input元素是空的，只能包含标签属性，规定了用户可以在元素中输入内容。

textarea元素定义一个多行文本输入控件，可以使用属性控制元素的大小。

select元素用于创建下拉列表，配合option(定义下拉列表项)一同使用。

<select>  <option value="option1">option1option>  <option value="option2">option2option>  <option value="option3">option3option>  <option value="option4">option4option>select>

option元素中value属性的值为需要发送到服务器的值，标签内的内容为前端需要显示的内容。

 




媒体元素

audio元素定义音频，元素支持三种格式文件：MP3、Wav、Ogg。可使用该元素的属性控制是否显示播放控件。配合source使用，如果浏览器不支持则显示source外的内容

<audio controls>  <source src="https://audio04.dmhmusic.com/71_53_T10049267330_128_4_1_0_sdk-cpm/cn/0311/M00/40/A6/ChAKC114CgiAOtS_ACE4qSlABXA373.mp3?xcode=9f4bf68442d136be727d5b1cc81c6ffc4b52a07" type="audio/mpeg" />  当前浏览器不支持 audio 直接播放，点击这里下载音频：  <a href="https://audio04.dmhmusic.com/71_53_T10049267330_128_4_1_0_sdk-cpm/cn/0311/M00/40/A6/ChAKC114CgiAOtS_ACE4qSlABXA373.mp3?xcode=9f4bf68442d136be727d5b1cc81c6ffc4b52a07" style="color: #007AFF;">下载a>audio>

不同浏览器显示控件样式不同

  

video元素定义视频。配合source使用。可使用该元素的属性控制是否显示播放控件，和视频正在下载时显示的图像。配合source使用，如果浏览器不支持则显示source外的内容

<video controls poster="https://tukuimg.bdstatic.com/processed/a146a0ded358cd78c5fe7824ff927c72.jpg">  <source src="https://vd4.bdstatic.com/mda-kjgvuvxanzvjcueu/v1-cae/sc/mda-kjgvuvxanzvjcueu.mp4?auth_key=1603250146-0-0-d4e065ee8ad7ed68c486adc3a56d205a&bcevod_channel=searchbox_feed&pd=1&pt=3&abtest=8790_5" type="video/mp4" />  当前浏览器不支持 video直接播放，点击这里下载视频：  <a href="https://vd4.bdstatic.com/mda-kjgvuvxanzvjcueu/v1-cae/sc/mda-kjgvuvxanzvjcueu.mp4?auth_key=1603250146-0-0-d4e065ee8ad7ed68c486adc3a56d205a&bcevod_channel=searchbox_feed&pd=1&pt=3&abtest=8790_5" style="color: #007AFF;">下载视频a>video>

embed元素定义一个容器，嵌入外部资源，不建议使用，可以使用img、iframe、video、audio等标签代替embed。

source元素定义媒体资源，在video或audio中可以使用多个source元素，浏览器会任选一个自己支持的source元素。

  <source src="" type="audio/ogg">  <source src="" type="audio/mpeg">  您的浏览器不支持 audio 元素。

Track定义视频的文本跟踪。可控制文本轨迹，文本数据语言。

<video controls>  <source src="video.mp4" type="video/mp4">  <track kind="captions" srclang="en" src="video.vtt" />  您的浏览器不支持 video 元素。video>