乐趣区

关于html:HTML基础总结

jiezi

HTML 简介

网页

网页

网站：利用前端技术制作的网页汇合。

网页：形成网站的根本元素，通常是 HTML 格局的文件（.htm 或 .html），必须通过浏览器来浏览。

HTML

超文本：由图片、声音、动画、视频等形成且能够互相链接的文本。

HTML：超文本标记语言（HTML 不是编程语言，而是由一套标记标签形成的标记语言）。

网页的造成

  1. 前端代码开发
  2. 浏览器解析、渲染代码
  3. 出现 Web 页面

浏览器

五大罕用浏览器

Chrome、Firefox、Safari、Opera、Edge

四大浏览器内核

  • IE（Trident）
  • Firefox（Gecko）
  • Safari（Webkit）
  • Chrome / Opera / Edge（Blink 属于 Webkit 的分支，Blink 兼容 Webkit）

注：目前国内浏览器个别都采纳 Webkit / Blink 内核。

Web 规范

W3C： 万维网联盟，国内最驰名的标准化组织之一。

Web 规范：W3C 组织和其余标准化组织为 Web 开发制订的一系列规范的汇合。

Web 规范形成

  • 构造：用于对网页元素进行整顿和分类，现阶段次要指的是 HTML
  • 体现：用于设置网页元素的版式、大小、色彩等外观款式，次要指 CSS
  • 行为：网页模型的定义及交互方式的编写，现阶段次要指的是 JavaScript

HTML 标签

语法标准

标签

HTML 标签是由 尖括号 突围的关键字词，例如：<html>。

双标签

HTML 标签通常是成对呈现的，例如：<html> 和 </html>，咱们称为 双标签 。标签对中的第一个标签是 开始标签 ，第二个标签是 完结标签。

单标签

有些非凡的标签必须是单个标签，例如：<br />，咱们称为 单标签。

留神：/ 之前有一个空格（Coding Style 编码格调）。每个标签原则上都应该有 结束符，即： /。所以单标签的最初要加 / 以示意完结，当然不加也是能够被浏览器失常解析的。

备注：

  • HTML5 标准中明确阐明单标签 / 是能够疏忽的，理论开发中倡议不要给单标签增加斜线。
  • 任何标签都倡议不要大写，即使是 <!doctype html> 标签。

标签关系

  1. 蕴含关系

    <head>
    <title></title>
</head>

  2. 并列关系

    <head></head>
<body></body>

根底构造标签

每个网页都会有一个根底的构造标签（骨架标签：4 组），页面内容也是在这些根底标签上书写的。

HTML 页面也称为 HTML 文档。

<html>
    <head>
        <title></title>
    </head>
    <body>
    </body>
</html>
标签名 定义 阐明
<html> </html> 根标签 页面中最大的标签（最根底的标签）
<head> </head> 头部标签 在 head 标签中咱们必须要设置 title 标签
<title> </title> 题目标签 页面本人的网页题目
<body> </body> 主体标签 蕴含文档的所有内容

文档类型申明标签 doctype

<!doctype> 文档类型申明，作用是通知浏览器应该应用哪种 HTML 版本来解析渲染网页。

<!doctype html>
<!-- 以后页面采纳 HTML5 版本 -->

留神：

  • <!doctype> 申明位于文档最后面的地位，处于 <html> 标签之前
  • <!doctype> 文档类型申明标签，不属于 HTML 标签
  • 请默认对立指定 HTML5 版本 <!doctype html>

语言品种 lang

用来定义以后网页显示的主语言，书写在 <html> 标签内。

语言的设置是为了不便 浏览器搜寻举荐 以及触发 浏览器翻译性能，并不是说设置了某类主语言后网页中就不能存在其余类型的语言了。

<html lang="zh-CN"> 
</html>

en-GB 英文（英国）

en-US 英文（美国）

zh-CN 中文（简体，中国大陆）

zh-SG 中文（简体，新加坡）

zh-HK 中文（繁体，香港）

zh-MO 中文（繁体，澳门）

zh-TW 中文（繁体，台湾）

字符集 charset

多个字符的汇合，以便计算机可能辨认和贮存各种文字。

在 <head> 标签内，能够通过 <meta> 标签的 charset 属性来规定 HTML 文档应该应用哪种字符编码。

<meta charset="UTF-8">

charset 罕用的值有：GB2312、BIG5、GBK、UTF-8，其中 UTF-8 也被称为：万国码，根本蕴含了全世界所有国家须要用到的字符。

留神：字符设置是必须的，否则极大可能引起网页乱码。个别状况下，对立应用 “UTF-8” 编码，尽量对立写成规范的 UTF-8，不要写成 “utf8” 或 “UTF8″。

规范骨架

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
</body>

</html>

IE 兼容模式

IE 反对通过特定的 <meta> 标签来确定绘制以后页面所应该采纳的 IE 版本。除非有强烈的非凡需要，否则最好是设置为 edge mode，从而告诉 IE 采纳其所反对的最新的绘制模式。

<head>
    <meta http-equiv="x-ua-compatible" content="ie=edge">
</head>

罕用标签

题目标签

作为题目应用，并且根据重要性递加。

HTML 提供了 6 个等级的网页题目，即：<h1> 到 <h6>。

<h1> 一级题目 </h1>
<h2> 二级题目 </h2>
<h3> 三级题目 </h3>
<h4> 四级题目 </h4>
<h5> 五级题目 </h5>
<h6> 六级题目 </h6>

特点：

  • 加了题目的文字会主动加粗，字号也会顺次变大
  • 一个题目就独占一行，同一行题目后不会再搁置其余任何内容（前期能够通过 CSS 批改）
  • 级别越大的题目标签，对网页元素的强调性越强，同时也和浏览器 SEO 优化无关。

段落和换行标签

<p> 标签用于定义段落，它能够将整个网页分为若干个段落。

<p> 我是一个段落标签 </p>

特点：

  • 文本在一个段落中会依据浏览器窗口的大小主动换行。（对于中文段落来说无论如何都会主动换行，然而对于英文段落来说如果字母是间断的（aaa…），那么浏览器会认为该段落整体都是一个字母不会主动换行，要想英文段落主动换行字母之间得有空格。）
  • 段落和段落之间保有空隙（段间距）
  • 同一段落里的不同行文字之间也有肯定的空隙（行间距）

在 HTML 中，一个段落中的文字会从左到右顺次排列，直到浏览器窗口的右端，而后才主动换行。

换行标签

如果心愿某段文本强制换行显示，就须要应用换行标签 <br>强制换行。

<br>

特点：

  • <br> 是个单标签
  • <br> 标签只是简略地开始新的一行，跟段落不一样，所以不会产生段间距

分割线标签

某些时候须要对内容块进行宰割时会用到分割线标签<hr>

<hr>

留神：理论开发中并不罕用 hr 作为分割线，而是应用 CSS 盒子模型中的边框来实现分割线成果，或是利用一个空盒子设置长宽高及背景色彩来实现分割线成果。

文本格式化标签

在网页中，有时须要为文字设置粗体、斜体或下划线等成果，这时就须要用到 HTML 中的文本格式化标签，使文字以非凡的形式显示。

标签语义：突出重要性，比一般文字更重要。

语义 标签
加粗 <strong> </strong> 或 <b> </b>
歪斜 <em> </em> 或 <i> </i>
删除线 <del> </del> 或 <s> </s>
下划线 <ins> </ins> 或 <u> </u>

备注：介于可读性、搜索引擎优化及屏幕阅读器适配，举荐应用前者。

div 和 span 标签

<div> 和 <span> 是没有语义的，它们就是两种盒子，用来对网页进行布局和装其余内容。

<div> 这是头部 </div>
<span> 今日价格 </span>

特点：

  • div 是 division 的缩写示意：宰割、分区。一行只能放一个 <div>，大盒子
  • span 意为：跨度、跨距。一行上能够放多个 <span>，小盒子

拓展： span 标签不单单是用于布局，对于一些须要独自润饰和设置的元素，能够将其用 span 标签嵌套起来，而后就能够独自对其进行设置。

图像标签

在 HTML 标签中，<img> 标签用于定义 HTML 页面中的图像。

<img src="图像 URL">

src 是 <img> 标签的必须属性，它用于指定图像文件的门路和文件名。

URL 是 对立资源定位符（艰深了解：地址、网址）。

属性 属性值 阐明
src 图片门路 必须属性
alt 文本 替换文本，图像显示失败时显示（为了进步 SEO 及适配屏幕阅读器，倡议都把 alt 写上）
title 文本 提醒文本，鼠标放到图片上，显示的提醒文字
width 像素 设置图像的宽度（理解，前面通过 CSS 设置）
height 像素 设置图像的高度（理解，前面通过 CSS 设置）
border 像素 设置图像的边框粗细（理解，前面通过 CSS 设置）

留神：

  • 设置图像的宽度与高度时：个别设置其中之一便可，另外一个会主动按比例适配
  • 设置宽高时，能够应用 百分数 作为值，此时图片大小会以以后父元素的大小为根底进行比例缩放，这样做的益处在于当父元素扭转大小时，图片也会随比例等同缩放
门路

相对路径：以援用文件所在位置为参考根底，而建设出目录门路。

相对路径分类 符号 阐明
同一级门路 . 如：<img src="baidu.png" />
下一级门路 / 如：<img src="image/baidu.png" />
上一级门路 ../ 如：<img src="../image/baidu.png" />

绝对路径：指目录下的相对地位，间接达到目标地位，通常是从盘符开始的门路。如 D:\web\img\logo.png

网络地址：https://blog.itxiaoma.cn/img/…

留神：理论开发中倡议应用相对路径或网络地址

超链接标签

在 HTML 标签中，<a> 标签用于定义超链接，作用是从一个页面链接到另一个页面。

<a href="跳转指标" target="指标窗口的弹出形式"> 文本、图像或其余内容 </a>
属性 作用
href 用于指定链接指标的 url 地址，（必须属性）当标签利用 href 属性时，它就具备了超链接的性能
target 用于指定链接页面的打开方式，其中 _self 在以后页面关上的形式（为默认值），_blank 在新窗口中关上的形式

链接分类:

  • 内部链接：例如：<a href="http://www.baidu.com"> 百度 </a>
  • 外部链接：网站外部页面之间互相链接，间接链接外部页面名称即可，例如：<a href="index.html"> 首页 </a>
  • 空链接：如果过后没有确定链接指标时，<a href="javascript:void(0)"> 首页 </a>"，当用户点击链接时，void(0) 计算为 0，但 Javascript 上没有任何成果
  • 下载链接：如果 href 外面地址是一个文件或者压缩包（前提：门路蕴含文件类型后缀名，如：.exe、.zip 等），便会下载这个文件
  • 网页元素链接：在网页中的各种网页元素，如：文本、图像、表格、音频、视频等都能够增加超链接

  • 锚点链接：点击链接，能够疾速定位到以后页面中的某个地位

    • 在链接文本的 href 属性中，设置属性值的 # 名字 的模式，如：<a href="#two"> 第 2 集 </a>
    • 找到指标地位标签（此处以 h3 标签为例），外面增加一个 id 属性 ="方才的名字"，如：<h3 id="two"> 第 2 集介绍 </h3>
    • <a href="#"></a> 默认定位到页面顶部

正文

如果须要在 HTML 文档中增加一些便于浏览和了解但又不须要显示在页面中的文字，就须要应用正文标签。

HTML 中的正文以：<!-- 结尾，以 --> 完结。

<!-- 正文语句 -->

特殊字符

在 HTML 页面中，一些非凡的符号很难或者不不便间接应用，此时咱们就能够应用上面的字符来代替。

特殊字符 形容 字符的代码
空格符 &nbsp;
< 小于号 &lt;
> 大于号 &gt;
& 和号 &amp;
± 正负号 &plusmn;
× 乘号 &times;
÷ 除号 &divide;
² 上标 &sup2;

留神：下标请应用：<sub>2</sub>，同时上标也倡议应用：<sup>2</sup>。

表格标签

表格次要用于显示、展现数据。因为它能够让数据显示得十分的规整，可读性十分好。

留神：表格不是用来布局页面的，而是用来展现数据的。表格罕用于表单数据的布局。

<table>
    <tr>
        <td> 单元格 </td>
        ...
    </tr>
    ...
</table>
  • <table> </table> 是用于定义表格的标签
  • <tr> </tr> 用于定义表格中的行，必须嵌套在 <table> </table> 标签中
  • <td> </td> 用于定义表格中的单元格，必须嵌套在 <tr> </tr> 标签中
  • 字母 td 指表格数据（table data），即：数据单元格的内容
  • 单元格 td 外面能够放任何的元素
表头标签

个别表头单元格位于表格的第一行或第一列，作用是：突出重要性，表头单元格外面的文本内容 默认加粗居中 显示。

<th> 标签示意 HTML 表格的表头局部（table head 的缩写）。

<table>
    <tr>
        <th> 姓名 </th>
        <th> 性别 </th>
        <th> 年龄 </th>
        ...
    </tr>
    ...
</table>
表格属性

留神：表格标签的属性在理论开发中并不罕用，而是通过前面的 CSS 来设置，这里理解即可。

<table align="center" border="1" cellpadding="0" cellspacing="0" width="500" height="240">
    ...
</table>
属性名 属性值 形容
align left、center、right 规定表格绝对四周元素的对齐形式（默认 left），留神指的是整个表格的对齐形式（表格是在父盒子中默认往左靠，还是居中或是往右靠），而不是指单元格内容的对齐形式（单元格内容对齐能够通过：style="text-align: center;" 设置）（理解）
border 1 或 "" 规定表格单元是否领有边框，默认为 “”，示意没有边框（理解）
cellpadding 像素值 规定单元边际与其内容之间的空白，默认 1 像素（理解）
cellspacing 像素值 规定单元格之间的空白，默认 2 像素（理解）
width 像素值 或 百分比 规定表格的宽度（理解）
height 像素值 或 百分比 规定表格的高度（理解）
表格构造标签

因为表格可能很长，为了更好的示意表格的语义，能够将表格宰割成：表格头部 和 表格主体 两大部分。

  • <thead> </thead>：用于定义表格的头部，<thead> 外部必须领有 <tr> 标签，个别是位于第一行，且个别 <tr> 标签中举荐搁置 <th> 标签
  • <tbody> </tbody>：用于定义表格的主体，次要用于放数据本体
  • 以上标签都是放在 <table> </table> 标签中
<table>
    <!-- 头部区域 -->
    <thead>
        <tr>
            <th> 姓名 </th>
            <th> 性别 </th>
            <th> 年龄 </th>
            ...
        </tr>
    </thead>
    <!-- 主体区域 -->
    <tbody>
        <tr>
            <td> 周吉瑞 </td>
            <td> 男 </td>
            <td>18</td>
            ...
        </tr>
        ...
    </tbody>
</table>
合并单元格
  • 跨行合并（高低合并）：rowspan="合并单元格的个数"
  • 跨列合并（左右合并）：colspan="合并单元格的个数"
<body>
    <table width="500" height="249" border="1" cellspacing="0">
        <tr>
            <td></td>
            <td colspan="2"></td>
            <!-- <td></td> -->
        </tr>
        <tr>
            <td rowspan="2"></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <!-- <td></td> -->
            <td></td>
            <td></td>
        </tr>
    </table>
</body>

列表标签

表格是用来显示数据的，那么 列表就是用来布局的。

列表最大的特点就是：参差、整洁、有序、它作为布局会更加自在和不便。

在理论开发中但凡遇到排列参差的简洁内容，都能够应用列表来进行布局。

标签名 定义 阐明
<ul> </ul> 无序标签 外面 只蕴含 li，没有程序，应用较多，li 外面能够蕴含任何标签
<ol> </ol> 有序标签 外面 只蕴含 li，有程序，应用绝对较少，li 外面能够蕴含任何标签
<dl> </dl> 自定义标签 外面 只能蕴含 dt 和 dd，dt 和 dd 外面能够放任何标签，dd 个别作为对 dt 的细分形容
无序列表

<ul> 标签示意 HTML 页面中我的项目的无序列表，个别会以我的项目符号出现列表项，而列表项应用 <li> 标签定义（开发中常常应用）。

<ul>
    <li> 列表项 1 </li>
    <li> 列表项 2 </li>
    <li> 列表项 3 </li>
    ...
</ul>
  • 无序列表的各个列表项之间没有程序级别之分，是并列的
  • <ul> </ul> 中只能嵌套 <li> </li>，间接在 <ul> </ul> 标签中输出其余标签或者文字的做法是不被容许的，列表中的任何内容都应该放在 li 中
  • <li> 与 </li> 之间相当于一个容器，能够包容所有的元素
  • 无序列表会带有本人的款式属性（比方圆点），但在理论开发中，咱们会应用 CSS 来设置
有序列表

有序列表即为有序排列程序的列表，其各个列表项会依照肯定的顺序排列定义（开发中不太罕用）。

在 HTML 标签中，<ol> 标签用于定义有序列表，列表排序以数字来显示，并且应用 <li> 标签来定义列表项。

<ol>
    <li> 列表项 1 </li>
    <li> 列表项 2 </li>
    <li> 列表项 3 </li>
    ...
</ol>
  • <ol> </ol> 中只能嵌套 <li> </li>，间接在 <ol> </ol> 标签中输出其余标签或者文字的做法是不被容许的
  • <li> 与 </li> 之间相当于一个容器，能够包容所有的元素
  • 有序列表会带有本人款式属性（比方序号），但在理论应用时，咱们会应用 CSS 来设置
自定义列表

自定义列表罕用于对术语或名词进行解释、形容和开展，定义列表的列表项前没有任何我的项目符号（开发中罕用）。

在 HTML 标签中，<dl> 标签用于定义形容列表（或定义列表），该标签会与 <dt>（定义我的项目 / 名字）和 <dd>（形容每一个我的项目 / 名字）一起应用。

<dl>
    <dt> 名词 1 </dt>
    <dd> 名词 1 解释 1 </dd>
    <dd> 名词 1 解释 2 </dd>
</dl>
  • <dl> </dl> 外面只蕴含 <dt>、<dd>
  • <dt> 和 <dd> 个数没有限度，常常是一个 <dt> 对应多个 <dd>

表单标签

在网页中，须要跟用户进行交互，收集用户材料，此时就须要表单。

在 HTML 中，一个残缺的表单通常由 表单域 、 表单控件 （也称为表单元素）和 提示信息 3 个局部形成。

表单域

在 HTML 标签中，<form> 标签用于定义表单域，以实现用户信息的收集和传递。

<form action="url 地址" method="提交形式" name="表单域名称">
    <!-- 各种表单元素控件 -->
</form>
属性名 属性值 作用
action url 地址 用于指定接管并解决表单数据的服务器程序的 url 地址
method get / post 用于设置表单数据的提交形式，其取值为 get 或 post
name 名称 用于指定表单的名称，以辨别同一个页面中的多个表单域
表单控件（表单元素）
input
<input type="属性值" />
属性值 形容
button 定义可点击按钮（少数状况下，用于通过 JavaScript 启动脚本）
checkbox 定义复选框，即：多选框，在一组多选中，要求它们必须领有雷同的 name
file 定义输出字段和“浏览”按钮，供文件上传
hidden 定义暗藏的输出字段
image 定义图像模式的提交按钮
password 定义明码字段，该字段中的字符被掩码
radio 定义单选按钮，在一组单选按钮中，要求它们必须领有雷同的 name
reset 定义重置按钮，重置按钮会革除表单中的所有数据
submit 定义提交按钮，提交按钮会把表单数据发送到服务器
text 定义单行的输出字段，用户可在其中输出文本，默认宽度为 20 个字符

除 type 属性外，<input> 标签还有很多其余属性，其罕用属性如下：

属性名 属性值 形容
name 由用户自定义 定义 input 元素的名称
value 由用户自定义 规定 input 元素的值，也就是提交到服务器的值
checked checked 规定此 input 元素首次加载时该当被选中
maxlength 正整数 规定输出字段中的字符的最大长度
  • name 和 value 是每个表单元素都有的属性值，次要给后盾人员应用
  • name 表单元素的名字，要求：单选按钮和复选框要有雷同的 name 值
  • checked 属性次要针对于单选按钮和复选框，次要作用：关上页面时默认选中某个表单元素
  • maxlength 是用户能够在表单元素输出的最大字符数，个别很少应用
select

在页面中，如果有多个选项让用户抉择，并且想要节约页面空间时，咱们能够应用 <select> 标签控件定义下拉列表。

<select>
    <option> 选项 1 </option>
    <option> 选项 2 </option>
    <option selected="selected"> 默认选中 </option>
    ...
</select>
  • 每个 <option> 元素都应该有一个 value 属性，其中蕴含抉择该选项时要提交给服务器的数据值。
  • 如果不蕴含 value 属性，则 value 默认为元素内蕴含的文本。
  • 能够在 <option> 元素上蕴含 selected 属性，以使其在页面首次加载时默认选中。
textarea

<textarea> 标签是用于定义多行文本输出的控件。

<textarea rows="3" cols="20">
    文本内容
</textarea>
  • cols="每行中的字符数"，rows="显示的行数"，咱们在理论开发中不会应用，都是用 CSS 来扭转大小
  • 如果要禁止拉伸文本框大小，则：style="resize: none"

内联框架

一个内联框架被用来在以后 HTML 文档中嵌入另一个文档。

通过应用框架，你能够在同一个浏览器窗口中显示不止一个页面。

<iframe src="URL"></iframe>

属性默认以像素为单位，然而你能够指定其按比例显示（如：”70%”）。

<iframe height="500px" src="https://www.bilibili.com/" width="70%"></iframe>

提醒：把须要的文本搁置在 <iframe> 和 </iframe> 之间，以应答不反对 <iframe> 的浏览器。

暗藏 <iframe> 滚动条
<div style="width: 400px; overflow: hidden">
    <iframe height="480" src="https://www.runoob.com" width="415"> 您的浏览器不反对 </iframe>
</div>

SEO 优化

SEO（Search Engine Optimization）：搜索引擎优化。利用搜索引擎的规定进步网站在无关搜索引擎内的天然排名。目标是让其在行业内占据领先地位，取得品牌收益。

外链：链接到内部网页的链接，外链不是越多越好，而是外链的品质越高、越正当、越不便越好。

反链：被其余页面链接，反链的源头品质越高、链接次数越高越好。

参考

黑马程序员 pink 老师前端入门教程

HTML CSS

退出移动版