3.HTML主要标签部分
2018-03-28 本文已影响0人
Daryl_Z
1.HTML基本文档格式—<!DOCTYPE> 标记
− <!DOCTYPE> 标记位于文档的最前面，用于向浏览器说明当前文档使用哪种HTML 或 XHTML 标准规范。
主要用于浏览器解析文档标签的依据。
− <!DOCTYPE>标记和浏览器的兼容性相关，删除<!DOCTYPE>，就是把如何展示HTML页面的权利交给
浏览器。
− HTML5标准中，DOCTYPE 省略版本
2.HTML基本文档格式—<html> 标记
• <html>标记位于<!DOCTYPE> 标记之后，也称为根标记，用于告知浏览器其自身是一个 HTML 文档，
<html>标记标志着HTML文档的开始，</html>标记标志着HTML文档的结束，在他们之间的是文档的
头部和主体内容。
<html>
所有的标签必须写在 两个闭合标签之间。
</html>
• 可以通过lang属性设置当前文档的主要语言是什么，帮助搜索引擎解析文档
• <html lang="zh-CN"></html>
• <html lang="en"></html>
lang='en'/‘zh’ 标签:告诉搜索引擎爬虫，网站是关于什么内容的
（SEO的一个技术，还有一些，meta标签中的，content,name）
3.HTML基本文档格式—<head> 标记
− <head>标记用于定义HTML文档的头部信息，也称为头部标记，紧跟在<html>标记之后。
− head标签定义的内容只是提供给浏览器使用，不用于用户的呈现。
− 主要用来封装其他位于文档头部的标记，例如<title>、<meta>、<link>及<style>等，用来描述文档
的标题、作者以及和其他文档的关系等。
− 一个HTML文档只能含有一对<head>标记，绝大多数文档头部包含的数据都不会真正作为内容显示在
页面中。
4.HTML基本文档格式—<meta> 标记
− <meta charset="UTF-8">
− unicode:万国码
− utf-8 是目前最常用的字符集编码方式，所有语言字符集，unicode升级版。常用的字符集编码方式
还有gbk和gb2312。
− gb2312 简单中文
− GBK 包含全部中文字符 繁体
− BIG5 繁体中文
− UTF-8 则包含全世界大部分国家需要用到的字符
− 从二进制说起，符号表示文字，表示的模式就是编码：联想电报
5.HTML文档头部相关标记—<title>
<title>标记用于定义HTML页面的标题，即给网页取一个名字，必须位于
<head>标记之内。一个HTML文档只能含有一对<title></title>标记，
<title></title>之间的内容将显示在浏览器窗口的标题栏中。其基本语法格式如下：
<title>网页标题名称</title>
title 标签对于网站SEO至关重要，标题的好坏直接影响网站的SEO
SEO（Search Engine Optimization）：网站搜索引擎优化
6.HTML基本文档格式—<body> 标记
− <body>标记用于定义HTML文档所要显示的内容，也称为主体标记。浏览器中显示的所有文本、图像、
音频和视频等信息都必须位于<body>标记内，<body>标记中的信息才是最终展示给用户看的。
− 一个HTML文档只能含有一对<body>标记，且<body>标记必须在<html>标记内，位于<head>头部标记
之后，与<head>标记是并列关系。
7. Link标签
– 属于头部标签，需要放到head标签中。
– 引入DNS预先解析
– dns预解析(了解)后续分页或许会用到许多域名,提前解析这些域名,后续访问的时候就快了,网站优化的
一个点。比如淘宝上的一坨
• <link rel="dns-prefetch" href="http://mimg.127.net">
– 引入网站icon图标：
• <link rel="shortcut icon" href="http://www.126.com/favicon.ico" />
– 引入css样式，【后面讲】
– 放在head标签中。
• <link rel="stylesheet" href="css/bg.css">
8. meta标签补充
• 页面关键词
• 每个网页应具有描述该网页内容的一组唯一的关键字。使用人们可能会搜索，并准确描述网页上所提供
信息的描述性和代表性关键字及短语。标记内容太短，则搜索引擎可能不会认为这些内容相关。另外标
记不应超过 874 个字符。
<meta name="keywords" content="SegmentFault,黑客马拉松,IT技术社区,编程社区,技术问答,技术
文章,技术笔记,技术活动,程序员招聘,开发者,程序员,极客,编程,代码,开源,hackathon"/>
• 页面描述
• 每个网页都应有一个不超过 150 个字符且能准确反映网页内容的描述标签。
<meta name="description" content="SegmentFault ( www.sf.gg ) 是中国领先的开发者技术社区
我们希望为编程爱好者提供一个纯粹、高质的技术交流的平台， 与开发者一起学习、交流与成长，创造属
于开发者的时代！"/>
• 搜索引擎索引方式，robotterms是一组使用逗号(,)分割的值，通常有如下几种取值：none，noindex，
nofollow，all，index和follow确保正确使用nofollow和noindex属性值。
<meta name="robots" content="index,follow" />
all：文件将被检索，且页面上的链接可以被查询；none：文件将不被检索，且页面上的链接不可以被查询
；index：文件将被检索；
follow：页面上的链接可以被查询；
noindex：文件将不被检索；
nofollow：页面上的链接不可以被查询。
1、页面重定向和刷新：content内的数字代表时间（秒），既多少时间后刷新。如果加url,则会重定向到
指定网页（搜索引擎能够自动检测，也很容易被引擎视作误导而受到惩罚）。
<meta http-equiv="refresh" content="1;url=" />
2、优先使用edge和chrome浏览器
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta http-equiv="X-UA-Compatible" content="IE=8" ><!-- 使用IE8 -->
3、禁用本地缓存
<meta http-equiv="Pragma" content="no-cache">
9. a标签
1.链接
– [超级链接内容](http://www.chuanke.com) – href属性，指向跳转的地址
– target属性：_blank _self
href：用于指定链接目标的url地址，当为标记应用href属性时，它就具有了超链接的 功能。
target：用于指定链接页面的打开方式，其取值有_self和_blank两种，其中_self为默认值，
_blank为在新窗口中打开方式。
2.锚点
– #页面定位
通过创建锚点链接，用户能够快速定位到目标内容。 创建锚点链接分为两步： l 使用
“[链接文本](”#id名“)”创建链接文本。 l 使用相应的id名标注跳转目标的位置。
3.打电话<a href="tel:15942892352">给他打电话</a>场景多
4.发邮件<a href="mailto:417916744.com"></a>
5.协议限定符<a href="javascript:while(1){alert('1');}">点我试试</a>(这里可以直接执行js
代码)
10.表单
– 在HTML中，一个完整的表单通常由表单控件（也称为表单元素）、提示信息和表单域3个部分构成，如
下图所示，即为一个简单的HTML表单界面及其构成。
表单.png
– 在HTML中，<form></form>标记被用于定义表单域，即创建一个表单，以实现用户信息的收集和传递，
<form> </form>中的所有内容都会被提交给服务器。创建表单的基本语法格式如下：
<form action="url地址" method="提交方式" name="表单名称">
各种表单控件
</form>
– 在上面的语法中，<form>与</form>之间的表单控件是由用户自定义的，action、method和name为表单
标记<form>的常用属性。
Action：
在表单收集到信息后，需要将信息传递给服务器进行处理，action属性用于指定接收并处理表单数据的
服务器程序的url地址。
method
method属性用于设置表单数据的提交方式，其取值为get或post。
name
name属性用于指定表单的名称，以区分同一个页面中的多个表单。
注意:
<form>标记的属性并不会直接影响表单的显示效果。要想让一个表单有意义，就必须在<form>与
</form>之间添加相应的表单控件。
11. input控件
– input控件的基本语法格式如下：
– 在上面的语法中，<input />标记为单标记，type属性为其最基本的属性，其取值有多种，用于指定不
同的控件类型。除了type属性之外，<input />标记还可以定义很多其他的属性，其常用属性
如下表所示。
input控件.png
12. textarea控件
– 如果需要输入大量的信息，就需要用到<textarea></textarea>标记。通过textarea控件可以轻松地
创建多行文本输入框，其基本语法格式如下：
<textarea cols="每行中的字符数" rows="显示的行数">
文本内容
</textarea>
13.select控件
– 下图为一个下拉菜单，当点击下拉符号“ ”时，会出现一个选择列表。在HTML中，要想制作如下图所示的
下拉菜单，就需要使用select控件。
select.png
– 使用select控件定义下拉菜单的基本语法格式如下：
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
</select>
– 在上面的语法中，<select></select>标记用于在表单中添加一个下拉菜单，<option></option>用于
定义下拉菜单中的具体选项，每对<select></select>中至少应包含一对<option></option>。
– 值得一提的是，在HTML中，可以为<select>和<option>标记定义属性，以改变下拉菜单的外观显示
效果，具体如下表所示。
select常用属性.png
14.组合表单
<fieldset> 将表单内容的一部分打包，生成一组相关表单的字段。
<legend> 标签为 fieldset 元素定义标题。
15.字符编码
查文档
16.HTML语义化
• Web语义化是指使用语义恰当的标签，使页面有良好的结构，页面元素有含义，能够让人和搜索引擎都容
易理解。
• 标签与语义相结合，尽量不要使用没有语义的标签比如：div、span，尽量使用p、ul、ol、table
等标签。
• 充分利用标签默认的含义
• 标题标签的选择
• h1-h6, th,td,ul,ol,dl,dd,dt,p,em,strong
• HTML5的标签语义化更彻底（后面）
• 图片和超级链接：title
17. HTML5新增标签
1、结构语义化标签
2、智能表单标签
3、多媒体标签
18.HTML5新增语义化的结构标签
新增语义化的结构标签.png
• Div标签没有真实的语义，所以很难从结构标签上区分，不利于搜索引擎优化和特殊阅读。
• 兼容问题处理：
• 新标签只兼容IE9及以上浏览器。
• Html5shiv.js 兼容IE8
标签 语义
<nav> 导航
<header> 页眉
<footer> 页脚
<section> 区块
<article> 文章
<aside> 侧边栏
19. HTML5新增智能表单标签
新增智能表单标签.png
datalist 数据列表
<input type="text" autocomplete="on" name="demoAutoComplete" list="autoNames" />
<datalist id="autoNames">
<option value="飞龙天惊" ></option>
<option value="厚德IT" ></option>
<option value="Flydragon" ></option>
</datalist>
属性 用法 含义
placeholder <input type="text" placeholder="请输入用户名"> 占位符
autofocus <input type="text" autofocus> 自动获得焦点
multiple <input type="file" multiple> 多文件上传
autocomplete <input type="text" autocomplete="off"> 自动完成
form <input type="text" form="某表单ID">
novalidate <form novalidate></form> 关闭验证
required <input type="text" required> 必填项
pattern <input type="text" pattern="\d"> 自定义验证
20. HTML5新增多媒体标签
• HTML5通过<audio>标签来解决音频播放的问题
• 并且可以通过附加属性可以更友好控制音频的播放
• autoplay 自动播放
• controls 是否显不默认播放控件
• loop 循环播放
3种音频格式.png
• HTML5通过<video>标签来解决音频播放的问题
• 通过附加属性可以更友好的控制视频的播放
• autoplay 自动播放
• controls 是否显示默认播放控件
• loop 循环播放
• width 设置播放窗口宽度
• height 设置播放窗口的高度
3种视频格式.png
视频转码方式:可以用QQ影音工具软件转码,例如:
兼容格式mp4，参数设置编码方式H264，音频编码AAC,转换完之后就可以用了
21. 通用属性
• Id：唯一标识元素，在一个页面中不能重复。
• name：可以用于定义一组标签，可以重复。
• style：定义标签的样式。
• class：定义标签的样式类
• id、class都是css选择器和js的dom开发必备的基础。
• Img标签和a标签一般都会设置title属性。
• 标签的类型(显示模式) :
行内元素 行内元素不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑 结构，一般不可以
设置宽度、高度、对齐等属性，常用于控制页面中 文本的样式。 常见的行内元素有**、**、*、*、~~、
~~、<ins>、 <u>、、等，其中标记最典型的行内元素。</u></ins>~~~~******
• 标签的类型(显示模式) :
– HTML标记一般分为块标记和行内标记两种类型，它们也称块元素和行内元素。具体如下：
块元素:每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用
于网页布局和网页结构的搭建。常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，
其中<div>标记是最典型的块元素。
