HTML常用标签元素
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML常用标签元素相关的知识，希望对你有一定的参考价值。
一、基本概念
1、标签：html用于描述功能的符号称为“标签”，它是用来表现组成HTML文档的最基本的部件--HTML元素的。起始标签和终止标签之间的内容称为元素内容。
2、属性：在元素的起始标签中，可以设置1个或多个属性来控制标签的显示效果，格式为<标签名称 属性名 = “属性值”>
二、基本结构元素
HTML的基本结构元素主要有3个，它们是<html>、<head>和<body>元素，每个网页页面一般都包含这3个元素，而且它们只能出现一次。
1、<html>元素：Html标签：是包裹整个页面元素的根元素，它告诉浏览器整个文件是HTML格式，通常情况下document.documentElement(页面根元素)获取的就是html标签。
2、<head>元素：头部标签，用于定义文档的头部，它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等，主要包含meta标签、title标签、link标签（引入CSS）、script标签（引入CSS）等。
3、body 元素定义文档的主体。body 元素包含文档的所有内容（比如文本（<text>）、段落（<p>）、标题（<h1>）、换行（<br>）、分隔线(<hr>)、超链接（<link>）、图像（<img>）、表格（<table>）和列表（<ul>）等等。）
4、其它标签：
4.1、<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前，它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
4.2、<meat>标签：提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词，<meta> 标签的属性定义了与文档相关联的名称/值对。比如<meta charset="utf-8" />，定义了文档以utf-8编码。
4.3、<title>标签：页面的标题，设置之后将在浏览器选项卡看到。
5、一个简单的小demo
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>我喜欢的唐诗</title> </head> <body> <h1>我喜欢的唐诗</h1> <div> <h2>早发白帝城</h2> <p> 朝辞白帝彩云间，<br> 千里江陵一日还。<br> 两岸猿声啼不住，<br> 轻舟已过万重山。 </p> </div> <hr> <div> <h2>静夜思</h2> <p> 床前明月光，<br> 疑是地上霜。<br> 举头望明月，<br> 低头思故乡。 </p> </div> </body> </html>
三、常用标签
1、下边列出部分常见的html4标签
| 标签名 | 含义 | 属性值 | h5中的新属性 | 备注（说明） |
| link | - | href（CSS地址） |
属性：size 值：heightxwidth、any 描述：规定被链接资源的尺寸。仅适用于 rel="icon" |
1.link 元素是空元素，它仅包含属性 2.此元素只能存在于 head 部分，不过它可出现任何次数 |
| script | - | src（JS地址） |
属性：async 值：async 描述：规定异步执行脚本（仅适用于外部脚本） |
1.假如此元素内部的代码没有位于某个函数中，那么这些代码会在页面被加载时被立即执行 2.此元素的代码最好写在dom节点之后，否则可能会阻碍节点的渲染加载 |
| div | 分割 | - | - | <div> 是一个块级元素，也就是说，浏览器通常会在 div 元素前后放置一个换行符 |
| table | 表格 | - | - | - |
| span | 范围 | - | - | - |
| a | 锚 | href(跳转地址) |
属性：download 值：filename 描述：规定被下载的超链接目标。 属性：media 值：media_query 描述：规定被链接文档是为何种媒介/设备优化的 属性：type 值：MIME type 描述：规定被链接文档的的 MIME 类型 |
1.如果不使用 href 属性，则不可以使用如下属性：download, hreflang, media, rel, target 以及 type 属性 2.被链接页面通常显示在当前浏览器窗口中，除非您规定了另一个目标（target 属性） 3.需用 CSS 来设置链接的样式 |
| p | 段落 | - | - | - |
| form | 表单 | action（表单提交地址） |
属性：autocomplete 值：on/off 描述：规定是否启用表单的自动完成功能 属性：novalidate 值：novalidate 描述：如果使用该属性，则提交表单时不进行验证 |
form 元素是块级元素，其前后会产生折行 |
| h1~h6 | 标题 | - | - | - |
| ul | 无序列表 | - | - | 用 CSS 来定义列表的类型 |
| li | 列表项 | - | - | 用 CSS 来定义列表和列表项目的类型 |
| img | 图片 | src(显示的图片的地址) | - |
1.从技术上讲，<img> 标签并不会在网页中插入图像，而是从网页上链接图像。<img> 标签创建的是被引用图像的占位空间 2.有两个必需的属性：src属性 和 alt属性（alt="文本"如果无法显示图像，浏览器将显示替代文本） |
| input | 用于搜集用户信息 | type(类型) | ||
| iframe | 内联框架 | Src（显示的文档的地址) |
属性：sandbox 值：“”/allow-forms/allow-same-origin/allow-scripts/allow-top-navigation 描述：启用一系列对 <iframe> 中内容的额外限制 属性：seamless 值：seamless 描述：规定 <iframe> 看上去像是包含文档的一部分 属性：srcdoc 值：HTML_code 描述：规定在 <iframe> 中显示的页面的 HTML 内容 |
可以把需要的文本放置在 <iframe> 和 </iframe> 之间，这样就可以应对无法理解 iframe 的浏览器 |
备注：“-”表示没有改解释。h5中的新属性了解即可，应用还不是很频繁
2、常用的块状元素
块状元素，占行，如div，p，h1~h6，每一个块状标签都独占一行
3、常见的行内元素
行内元素（内联元素），不占行，如input，span，a，将在同一行共同显示
4、常见的列表元素
4.1、概念
<ul>（unordered）:无序列表，故元素所包含的列表项将以粗点的方式显示
<ol>（ordered）：有序列表，故元素所包含的列表项将以顺序数字的方式显示
<li>(list item):列表项，<li>元素被包含在<ul>或<ol>元素中
4.2、demo
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>列表</title> </head> <body> <h2>一个无序列表</h2> <ul> <li>咖啡</li> <li>茶</li> <li>牛奶</li> </ul> <hr> <h2>一个有序列表</h2> <ol> <li>咖啡</li> <li>茶</li> <li>牛奶</li> </ol> </body> </html>
5、常用的表格元素
5.1、概念
表格由<table>标签来定义。每个表格均有若干行（由<tr>标签来定义），每行被分割为若干单元格（由<td>标签定义）
5.2、demo
<table border="1"> <tr> <th>海绵宝宝</th> <th>柯南</th> </tr> <tr> <td>good boy</td> <td>clever boy</td> </tr> </table>
以上是关于HTML常用标签元素的主要内容，如果未能解决你的问题，请参考以下文章