HTML

Aliang1996
252 阅读11分钟

HTML全称HyperText Markup Language 超文本标记语言（非编程语言），使用标签的形式标识网页的不同结构。

HTML5规范

市面上存在很多不同的浏览器，在万维网的初期网页编写没有标准，所以出现同一段代码不同浏览器渲染效果不同的情况。于是伯纳斯李1994年建立万维网联盟（W3C），开始制定网页开发的标准。

网页版本经历了HTML4、 XHTML2.0， HTML5.0的版本更新迭代，以下代码是一个标准的HTML5.0版本。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

文档声明

doctype表示文档声明，用来告诉浏览器当前网页的版本。

<!DOCTYPE html> 是HTML5.0版本的声明方式，同时也表示浏览器的标准模式。以下代码会打印出当前浏览器的模式，CSS1Compat表示兼容W3C标准。

console.log(document.compatMode); // CSS1Compat

如果不写<!DOCTYPE html>，浏览器则是怪异模式BackCompat，怪异模式一般是向后兼容浏览器五个版本。

console.log(document.compatMode); // BackCompat

这两种模式的区别会在DOM文章中再做详解。

文档语言

<html>标签中的 lang属性表示language，可以设置html文档使用的语言，比如以下代码表示html文档使用的是英文。

<html lang="en">Hello World!</html>

head标签

<head>标签 用于保存一些页面的元数据，内容不会在浏览器中显示。

<meta>标签 表示元数据，可以通过其不同的属性设置元数据。

charset属性 表示字符集，所有数据在计算机中存储时都是以二进制形式存储的，文字也不例外。一段文字存储到内存中时，都需要转换为二进制编码，读取时再转换为字符编码，也就是编码和解码，它们遵循的规则就是字符集（charset）。

常用的charset值有以下几种：

  1. ASCII(American Standard Code for Information Interchange) 美国信息交换标准代码。
  2. GB2312 中国信息处理国家标准码（简体中文编码）。
  3. GBK 汉字扩展规范（增加了繁体中文，藏、蒙、维等少数名族的文字）。
  4. UTF-8 unicode万国码（几乎可识别所有文字）。

name属性和content属性 分别用于指定数据的名称和内容。

  • keywords 表示网页的关键字，可以同时指定多个关键字，使用,隔开。
<meta name="keywords" content="尚硅谷, 前端, HTML5, CSS, JavaScript">
  • description 表示网页的一个简单描述。
<meta name="description" content="这是一个web前端培训网站">
  • viewprot 表示网页的视口，可以设置其视口大小和形状。
<meta name="viewport" content="width=device-width, initial-scale=1.0">

http-equiv属性 用于设置http协议。

  • 以下这段代码表示网页3s后重定向到百度网站、
<meta http-equiv="refresh" content="3;url=http://www.baidu.com">
  • 以下这段代码使用的是edge模式，告诉IE以最高级模式渲染文档，也就是任何 IE 版本都以当前版本所支持的最高级标准模式渲染，避免版本升级造成的影响。
<meta http-equiv="X-UA-Compatible" content="IE=edge">

title标签 标题标签的内容会显示在浏览器的标题栏，也会作为搜索结果的超链接上的文字显示，并且搜索引擎会根据title的内容判断网页的主要内容。

  • 搜索引擎优先级： title > description > keywords。

实体字符

在网页中编写多个空格默认会自动被浏览器解析为一个空格，在HTML中无法直接书写一些特殊符号，比如连续的空格，大于号小于号。如果需要使用这些特殊符号，则需要使用HTML中的实体字符（转义字符）。

实体的语法是&name;，比如

  • &nbsp; non-breaking space 空格
  • &gt; greater-than 大于号
  • &lt; less-than 小于号

语义化标签

html标签常常会有很多自带的样式，我们在设计网页结构时不要关注样式，而是重点关注标签的语义。

布局标签

布局标签大多是块级元素（block element）独占一行、可以定义宽高，主要用于布局。

<header>标签 表示网页的头部。

<main>标签 表示网页的主题部分（一个页面中只会有一个main）。

<footer>标签 表示网页的底部。

<nav>标签 表示网页中的导航。

<aside>标签 表示和主题相关的其它内容（侧边栏）。

<artical>标签 表示一个独立的文章。

<section>标签 表示一个独立的区块，上面的标签都不能表示时使用seciton。

<div>标签 divsion就是用来布局的，它是最常用的布局标签。

<span>标签 没有实际语义，它是内联元素，一般用于选中特定文字，也用于内联元素的布局。

列表标签

在HTML中可以使用标签创建列表，有三种列表可以创建。

<ol>标签 表示有序列表order list，配合<li>标签创建列表项。

<ol>
    <li>苹果</li>
    <li>梨子</li>
    <li>香蕉</li>
</ol>

<ul>标签 表示无序列表unorder list，配合<li>标签创建列表项。

<ul>
    <li>苹果</li>
    <li>梨子</li>
    <li>香蕉</li>
</ul>

<dl>标签 表示定义列表definition list，配合<dt>和<dd>标签创建列表项。

  • <dt>标签 表示项 definition term。
  • <dd>标签 表示描述 definition description。
<dl>
    <dt>苹果</dt>
    <dd>苹果是一种水果</dd>
</dl>

超链接标签

<a>标签 表示超链接anchor，属于内联元素。可以从一个页面跳转到其它页面，也可以用于打电话、发邮件、锚点定位。在a标签中可以嵌套除自身外的任意元素。

  • href属性（Hypertext Reference）指定跳转的目标路径。
  • target属性 规定在何处打开链接。
<!-- _self是target属性的默认值 在当前页面打开超链接 -->
<a href="http://www.baidu.com" target="_self">百度一下</a>
<!-- _blank 在一个新的页面中打开超链接 -->
<a href="http://www.baidu.com" target="_blank">百度一下</a>
<!-- href属性可以设置为文件的相对路径 -->
<a href="./demo.html">测试网页</a>
<!-- href属性可以设置为 #目标元素id值 会跳转到目标元素位置 -->
<a href="#bottom">跳转底部</a>
<!-- href属性设置为# 会跳转到当前页面的顶部位置 -->
<a id="bottom" href="#">跳转顶部</a>
<!-- href属性设置为javascript:; 什么也不会发生 -->
<a href="javascript:;">点击该链接什么也不会发生</a>

图片标签

<img>单标签 image用于引入图片，属于替换元素，它呈现的是引入的外部文件，它是内联块元素。

  • src属性 用于设置图片路径。
  • alt属性 用于设置图片加载失败时的提示，有些浏览器会根据这个提示来识别图片。
  • title属性 用于设置鼠标聚焦时的提示。
<img src="img/1.jpg" alt="电锯人" title="电锯人">

pc端一般不建议修改图的大小，但是移动端经常需要对图片进行缩放。

常用的图片格式有以下几种：

  • jpeg（jpg）支持的颜色比较丰富，不支持透明效果，不支持动图。一般用来显示照片。

  • gif 支持的颜色比较少，支持简单透明，支持动图。颜色单一的图片，动图。

  • png 支持的颜色丰富，支持复杂透明，不支持动图。颜色丰富，复杂透明图片（专为网页而生）。

  • webp 这种格式是谷歌新推出的专门用来表示网页中的图片的一种格式。它具备其它格式图片的所有优点，而且文件还特别小。缺点是兼容性差。

  • base64 将图片使用base64进行编码，可以将图片转换为字符，通过字符的形式引入图片。一般是一些需要和网页一起加载的图片才会使用base64编码。

常用标签

<h>标签 表示标题heading，属于块元素。一共有六级（h1~h6）重要性依次递减，h1在网页中的重要性仅次于title标签，一般情况下标题标签只用前三级。多个相关的标题可以用hgroup标签进行包裹。浏览器默认字体大小16px(1em)

<hgroup>
    <h1>一级标题</h1>
    <h2>二级标题</h2>
</hgroup>

<p>标签 表示段落paragraph，属于块元素。可以配合text-indent属性缩进2字符。

<p style="text-indent: 2em;">我是p标签</p>

<strong>标签 强调内容的重要性，属于内联元素，默认样式是加粗。

<p>今天必须<strong>完成作业</strong></p>

<em>标签 表示语音语调的一个加重emphasize，属于内联元素，默认样式是斜体。

<p>今天天气<em>真</em>不错</p>

<sup>/<sub>标签 superscripted/subscripted上下标签

frameset设置框架

  • 不能写在body中
  • 数据交互麻烦
  • 页面加载过慢
  • 对搜索引擎不友好
<frameset rows="10%, 90%">
    <frame>
    <frameset cols="20%, 80%">
        <frame src="left.html">
        <frame name="mainFrame" src="http://www.baidu.com">
    </frameset>
</frameset>

<iframe>标签 内联框架，用于向当前页面中引入一个其它页面。但是它现在不常用，因为有一些缺点，而且对SEO优化不友好。

  • 数据加载无法监控
  • 滚动条不好调

表格标签

<table>标签 用于创建表格，早期用于布局，使用过程中还要配合、等表格相关标签使用，常用标签如下：

  • <caption> 标题标签
  • <th> table header cell 表头标签
  • <tr> table row 表格行标签 用于创建一个行
  • <td> table data cell 表格单元格标签 用于创建一个单元格

除了以上标签，表格中还有一些特殊标签，以下标签需要同时出现，页面加载时，优先加载thead和tfoot。如果直接使用tr标签，浏览器也会自动创建一个tbody将tr包裹，意味着tr并不是tbody的子元素。

  • <thead>标签 创建表格头部
  • <tbody>标签 创建表格主体
  • <tfoot>标签 创建表格页脚

表格还具有一些属性

  • border属性 设置边框
  • cellpadding属性 设置单元格内边距
  • cellspacing属性 设置单元格间距
  • colspan属性 设置合并列
  • rowspan属性 设置合并行
  • align属性 设置表格对位置

表单标签

表单用于将本地的数据提交给服务器

数据要素：name 数据名称 和 value 数据值

在网页中我们会用form标签创建一个表单，它有一个默认属性action 用于设置数据提交的服务器地址（url）。还有一个重要的属性method ，用于设置数据提交的方式，比如method="get"。

注意form表单只是一个架子，我们还需要通过其它标签在其中添加表单项，比如文本框、按钮等。

input标签 用于创建一个文本框，它有一个默认属性type 用于设置文本框的输入类型，常用值如下：

  • text 默认值 文本框
  • password 密码框
  • submit 提交按钮
  • radio 单选框
  • checkbox 复选框
  • button 普通按钮
  • reset 重置按钮
  • color 颜色框

input标签 除了默认的type属性以外，它还有其它属性，比如name属性和value属性，这是数据提交过程中非常重要的两个属性，因为它们分别代表着数据的名称和值。

  • name属性 设置文本框的名称。

  • value属性 设置文本框的默认值。

  • maxlength属性 设置输入最大值。

  • checked属性 设置单复选框的状态。

  • readonly属性 设置文本框为只读属性（不影响提交数据）。

  • disabled 属性 设置文本框为禁用属性， 无法提交数据。

  • autocomplete 属性 设置文本框是否自动补全。

  • autofocus 属性 设置文本框自动焦点。

md5加密算法，是不可逆的加密算法，它不可解密，也不需要密钥。

lable标签

  • for 属性值与input的id值相同时，点击label可聚焦该input输入框。

select标签 用于创建一个下拉列表，它一般需要配合option标签使用

textarea标签

  • cols="30" 可见宽度 8px * cols + 17px
  • rows="20" 可见高度 8px * rows + 17px
  • placeholder 提示文本 （有浏览器兼容性问题）

元素分类

之前我们介绍了一大堆元素，元素总共有三大类，不同类型有不同的特性和用途。

内联元素（行间/行内元素 inline element）不独占一行、无法定义宽高，主要用来包裹文字

  • a
  • strong em del ins sup sub label

块级元素（block element）独占一行、可以定义宽高，主要用于布局。

  • div p h address
  • ol ul li
  • table dl dt dd
  • form fieldset legend

内联块级元素(inline-block element)，不独占一行，可以定义宽高。

  • input img
  • select textarea button
  • iframe

值得注意的是内联元素可以嵌套内联元素，块级元素可以嵌套任何元素，但是p元素作为块元素，其中却不能放任何的块元素，因为浏览器在解析网页时，会自动对网页中不符合规范的内容进行修正。比如

  • 标签写在根元素之外。
  • p元素中嵌套了块元素。
  • 根元素中出现了head和body以外的子元素。
avatar
文章
阅读
粉丝