深入解析HTML5基础标签-职坐标

深入解析HTML5基础标签

沉沙 2018-07-25 来源：阅读 1208 评论 0

摘要：本篇教程探讨了HTML5基础标签，希望阅读本篇文章以后大家有所收获，帮助大家对HTML5的理解更加深入。

本篇教程探讨了HTML5基础标签，希望阅读本篇文章以后大家有所收获，帮助大家对HTML5的理解更加深入。

网页格式

<!DOCTYPE html><head>

</body></html>

html标签
告诉浏览器这是一个网页。
其它所有的标签都必须写在 html 开始标签和结束标签之间。

head标签
用于给网站添加一些配置信息。
例如:

指定网站的标题 / 指定网站的小图片;
添加网站的SEO相关的信息(指定网站的关键字/指定网站的描述信息);
外挂一些外部的css/js文件;
添加一些浏览器适配相关的内容;

title标签
用于指定网站的标题。
title标签必须写在head标签里面。

body标签
用于定义HTML文档中需要显示给用户查看的内容。
一对html标签中只能有一对body标签。

meta标签
用于指定字符集。
注意：在HTML文件中指定的字符集必须和保存这个文件的字符集一致, 否则还是会出现乱码。

H系列标签(Header 1~Header 6)
用于给文本添加标题语义。
格式：

H标签一共有6个, 从H1~H6, H1最大, H6最小，最多就只能到6, 超过6则无效。

P标签(Paragraph)
段落
格式：

<p>我是一个小段落</p>

Hr标签(Horizontal Rule)
在浏览器上显示一条分割线。不推荐使用，开发中添加水平线一般都使用CSS盒子来做。
格式：

<hr />

img标签(image)
在网页上插入一张图片。
格式：

br标签(Break)

让内容换行。
格式：

<br/>

br的意思是不另起一个段落进行换行，而网页中99.99%需要换行时都是因为另起了一个段落, 所以应该用p来做。

相对路径几种查找方式

同级

1）直接编写, 例如: girl.png
2）加上./ 编写, 例如./girl.png（./代表当前目录, ./girl.png代表在当前目录下查找）

下级

1）直接编写, 例如abc/girl.png
2）加上./ 编写, 例如./abc/girl.png

上级

../代表访问上级目录
(假设a文件夹下面有b文件夹, 图片存放在a文件夹中, html文件存放在b文件夹中, 那么路径为../girl.png)

a标签(anchor)
用于从一个页面链接到另一个页面。
格式：

base标签和a标签结合使用：

base标签写在header标签中，如果某个 a 标签单独设置了页面打开方式，以a标签设置的为准。

a标签其它用法:
1）假链接(本质是跳转到当前页面)

格式：<a href="#">当前页面顶部</a>
格式：<a href="javascript:">当前页面顶部</a>

2）跳转到当前页面指定位置(锚点链接)

格式：<a href="#location">跳转到指定位置</a>

在页面的指定位置给任意标签添加一个id属性
例如 <p id="location">这个是目标</p>

3）跳转到指定页面的指定位置

格式：<a href="test.html#location">跳转到指定位置</a>
只需要在 test.html 页面添加一个id位置即可

列表标签

无序列表(unordered list)
列表中的条目是不分先后。
格式：(快速写法：ul>li*4 + tab键)

<h2>无序列表ul</h2><ul>

注意：ul 中推荐只能写 li 标签, 但是 li 标签是一个容器标签, li 标签中可以添加任意标签, 甚至可以添加ul标签。

ul>(li>(h4+(ul>li*3)))*2 + tab

<li>

<ul>

</ul>

</li>

<li>

<ul>

</ul>

</li></ul><hr>

有序列表(ordered list)
列表中的条目有先后之分。
格式：

其实ol应用场景并不多, 因为能用ol做的用ul都能做。

定义列表(definition list)
通过dt罗列出列表的条目, 然后再通过dd给每个条目进行相应的描述。
dt英文definition title, 翻译为定义标题
dd英文definition description, 翻译为定义描述信息
格式:

<h2>定义列表dl</h2><dl>

<dd>国家的首都, 看升国旗的地方</dd>

<dd>魔都, 遍地是黄金的地方</dd></dl>

注意：
可以给一个dt配置多个dd, 但是最好不要出现多个dt对应一个dd, dd的语义是描述离它最近的一个dt。

表格标签
以表格形式将数据显示出来。
格式:
table 定义表格
tr 定义行
td 定义单元格

<table>

<tr>

</tr>

<tr>

</tr></table>

align属性：

给table设置align属性, 是让表格在浏览器中居左/居右/居中；
给tr设置align属性, 是让当前行中所有内容居左/居右/居中；
给td设置align属性,是让当前单元格中所有内容居左/居右/居中；
该属性仅仅作为了解, 企业开发中用css代替

valign属性
给table设置valign属性, 无效；
给tr设置valign属性, 是让当前行中所有内容居上/居中/居下；
给td设置valign属性,是让当前单元格中所有内容居上/居中/居下；

bgcolor属性
给table设置bgcolor属性, 是给整个表格设置背景颜色；
给tr设置bgcolor属性, 是给当前行设置背景颜色；
给td设置bgcolor属性, 是给当前单元格设置背景颜色；
该属性仅仅作为了解, 企业开发中用css代替

表格中的其它标签
表单中有两种类型的单元格, 一种是标准单元格td, 一种是表头单元格th。
th标签: 给每一列设置标题, 单元格中的内容会自动加粗，居中；
caption标签:给整个表格设置标题；

</caption>

</tr>

<td>

</td>

</tr>

<td>

</td>

</tr>

<td>

</td>

</tr></table>

table标签

表格的结构
1）thead标签: 用来存放当前列的表头, 如果没有加css页面默认将表头中的高度设置变小;
2）tbody标签: 一般用来存放页面中的主体数据, 如果不写会自动加上;
3）tfoot标签: 用来存放表格的页脚（脚注或表注), 如果没有加css页面默认将表头中的高度设置变小, 一般不会出现;
由于有一部分浏览器对talbe的这种结构支持不是很好, 所以在企业开发中一般都不用严格的按照这种结构来编写

<table>

<caption>表格的标题</caption>

<thead>

<tr>

<th>每一列的标题</th>

</tr>

</thead>

<tbody>

<tr>

</tr>

</tbody>

<tfoot>

<tr>

</tr>

</tfoot></table>

表单标签
用于收集用户信息, 让用户填写、选择相关信息。
格式:

<form>

所有的表单内容，都要写在form标签里面</form>

input标签
input 是表单最核心的标签, input标签有一个type属性, 这个属性有很多类型的取值, 取值的不同就决定了input标签的功能和外观不同。

明文输入框

账号: <input type="text"/>

暗文输入框

密码: <input type="password"/>

给输入框设置默认值

账号:<input type="text" value="aaaaaa"/>

密码:<input type="password" value="123456"/>

规定输入字段中的字符的最大长度

账号: <input type="text" name="fullname" maxlength="8" />

单选框(radio)

<input type="radio" name="gender" /> 男

<input type="radio" name="gender" /> 女

多选框(checkbox)

<input type="checkbox" name="hobby"/> 摄影

<input type="checkbox" name="hobby"/> 书法

<input type="checkbox" name="hobby"/> 网球

给单选、多选设置默认值
指定radio和checkbox默认值, 前提是同一组内容必须设置相同name属性。

<input type="radio" name="gender" checked="checked"/> 男

<input type="radio" name="gender" /> 女

<input type="checkbox" name="hobby" checked="checked"/> 摄影

<input type="checkbox" name="hobby" checked="checked"/> 书法

<input type="checkbox" name="hobby"/> 网球

label标签
表单元素要有一个id，然后label标签就有一个for属性，for属性和id相同就表示绑定了。

<label for="account">账号:</label><input type="text" id="account" />

<input type="radio" name="gender" id="man" /> <label for="man">男</label>

<input type="checkbox" id="basketball" /><label for="basketball">篮球</label>

按钮

图片按钮
定义图像形式的提交按钮。

重置按钮
定义重置按钮。重置按钮会清除表单中的所有数据。
不需要写value自动就有“重置”文字。

提交按钮
定义提交按钮。提交按钮会把表单数据发送到action属性指定的页面。
不需要写value自动就有“提交”文字。

要想通过submit提交数据到服务器, 被提交的表单项都必须设置name属性。
默认明文传输(GET)不安全, 可以将method属性设置为POST改为非明文传输。

隐藏域
定义隐藏的输入字段。

数据列表
给输入框绑定待选项。
格式:

<p>请输入你的爱好:</p>

</datalist>

多行文本框(文本域)
textarea标签用于在表单中定义多行的文本输入控件。
cols属性表示columns“列”, 规定文本区内的可见宽度。
rows属性表示rows“行”, 规定文本区内的可见行数。
格式：

默认情况下输入框是可以手动拉伸的

<style type="text/css">

textarea{

resize: none;

}</style>

下拉列表

<select name="urban" id="urban">

</optgroup>

</optgroup></select>

video标签
格式一：

格式二：

<video>

</video>

第二种格式存在的意义就是为了解决浏览器适配问题. video 元素支持三种视频格式, 我们可以把这三种格式都通过source标签指定给video标签, 那么以后当浏览器播放视频时它就会从这三种中选择一种自己支持的格式来播放。

audio标签

格式：

<audio>

audio标签的使用和video标签的使用基本一样, video中能够使用的属性在audio标签中大部分都能够使用, 并且功能都一样. 只不过有3个属性不能用, height/width/poster。

详情details和概要summary标签
利用summary标签来描述概要信息, 利用details标签来描述详情信息。
默认情况下是折叠展示, 想看见详情必须点击。
格式：

详情信息</details>

marquee标签
跑马灯效果。

格式：<marquee>内容</marquee>

滚动内容可以是图片：

strong作用: 着重内容

格式: <strong>着重内容</strong>

ins(Inserted)作用: 新插入的文本(下划线)

格式: <ins>新插入的文本</ins>

em(Emphasized)作用:强调内容（斜体）

格式: <em>强调内容</em>

del(Deleted)作用: 已删除的文本

格式: <del>已删除的文本</del>

meta其它类型

Keywords类型
告诉搜索引擎当前网页的关键词, 在SEO中非常重要, 能够提高搜索命中率, 让别人更容易找到你。

格式：<meta name="keywords" content="iOS技术、Android技术、HTML5技术、js技术" />

Descriiption类型
告诉搜索引擎当前网页的主要内容, 在SEO中非常重要, 当别人在搜索引擎中搜索到你的网站时会自动作为对你网站的描述信息展示给用户, 能够提高搜索命中率。

格式：<meta name="description" content="你想要的这里都有" />

Author类型
告诉搜索引擎当前网页的作业, install B专用。

格式：<meta name="author" content="Xiaohan" />

Refresh类型
多久自动刷新一次页面并指向新页面, 常用于新老域名交替时, 访问老域名自动跳转到新域名, 或用于一些需要定时刷新的聊天室等。

格式：<meta http-equiv="Refresh" content="2；URL=https://www.baidu.com/">

Robots类型
告诉搜索引擎当前网页的作业, 写给网络爬虫看的内容。

常见组合：

<META NAME="ROBOTS" CONTENT="INDEX,FOLLOW">：可以抓取本页，而且可以顺着本页继续索引别的链接

也可以写成<META NAME="ROBOTS" CONTENT="ALL">

<META NAME="ROBOTS" CONTENT="NOINDEX,FOLLOW">：不许抓取本页，但是可以顺着本页抓取索引别的链接

<META NAME="ROBOTS" CONTENT="INDEX,NOFOLLOW">：可以抓取本页，但是不许顺着本页抓取索引别的链接

<META NAME="ROBOTS" CONTENT="NOINDEX,NOFOLLOW">：不许抓取本页，也不许顺着本页抓取索引别的链接。

本文由职坐标整理发布，欢迎关注职坐标WEB前端HTML5/CSS3频道，获取更多WEB前端知识！

html5+css3视频教程 html5教程当当 html页面命名规范

本文由 @沉沙发布于职坐标。未经许可，禁止转载。

喜欢 | 0

不喜欢 | 0

看完这篇文章有何感觉？已经有0人表态，0%的人喜欢快给朋友分享吧~

后参与评论

加入IT交流圈

JAVA工程师交流群 +加入

大数据架构师交流群 +加入

人工智能Python交流群 +加入

WEB/H5前端交流群 +加入

WEB前端 直通车

索取资料
答疑解惑
技术交流
职业测评
面试技巧
高薪秘笈

海同师资推荐更多>>

黄骈联系TA

认证System Analyst，System Architect

程光淼联系TA

精通C、C++等语言、智能芯片开发

热门就业培训班更多>>

【零基础】人工智能+Python全栈开发课程

HTML5/CSS330天热搜词更多>>

html5+css3从入门到精通源码精通html5和css3 html5css3教程下载 html5+css3从入门到精通pdf html5经典实例 html5+css3从入门到精通如何 html5css3从入门到精通视频教程 html5 css3入门 html5 css3入门到精通 html5css3教程 html5教程技巧 html5零基础教程 html5+css3 html5可以做什么 html5+css3从入门到精通下载 html5从入门到精通来自微博html5版是什么 html5教程当当 html5从入门到精通pdf html5个人简历模板