博信信息网day001 HTML基础知识
超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。
<!DOCTYPE html>声明为 HTML5 文档,doctype 声明是不区分大小写的<html>元素是 HTML 页面的根元素<head>元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为utf-8。<title>元素描述了文档的标题<body>元素包含了可见的页面内容什么是HTML?HTML 是用来描述网页的一种语言。
HTML 指的是超文本标记语言:HyperTextMarkupLanguageHTML 不是一种编程语言，而是一种标记语言标记语言是一套标记标签HTML 使用标记标签来描述网页HTML 文档包含了HTML 标签及文本内容HTML 标签HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
HTML 标签是由尖括号包围的关键词，比如 <html>HTML 标签通常是成对出现的，比如 <b> 和 </b>标签对中的第一个标签是开始标签<b>，第二个标签是结束标签</b>开始和结束标签也被称为开放标签和闭合标签HTML 网页结构HTML 标题HTML 标题（Heading）是通过<h1> - <h6> 标签来定义的。
HTML 段落HTML 段落是通过标签 <p> 来定义的。
HTML 链接HTML 链接是通过标签 <a> 来定义的。
在 href 属性中指定链接的地址。
HTML 图像HTML 图像是通过标签 <img> 来定义的.
HTML 元素开始标签 *
元素内容
结束标签 *
<p>
这是一个段落
</p>
<a href="http;//www.baidu.com">
这是一个链接
</a>
<br>
换行
大多数 HTML 元素可以嵌套（HTML 元素可以包含其他 HTML 元素），HTML 文档由相互嵌套的 HTML 元素构成。
HTML 空元素没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。
<br> 就是没有关闭标签的空元素（<br> 定义：换行）
HTML 属性HTML 元素可以设置属性属性可以在元素中添加附加信息属性一般描述于开始标签属性总是以名称/值对的形式出现 比如：name="value"href 属性中指定：<a href="http://www.baidu.com">这是一个链接</a>
HTML 属性常用引用属性值属性值应该始终被包括在引号内，双引号是最常用的，不过使用单引号也没有问题。
在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：name='John "ShotGun" Nelson'
属性
描述
class
为html元素定义一个或多个类名（classname）(类名从样式文件引入)
id
定义元素的唯一id
style
规定元素的行内样式（inline style）
title
描述了元素的额外信息 (作为工具条使用)
标题（Heading）是通过 <h1> - <h6> 标签进行定义的，<h1> 定义最大的标题。 <h6> 定义最小的标题。
HTML 水平线<hr> 标签在 HTML 页面中创建水平线。hr 元素可用于分隔内容。
HTML 注释可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。
注释写法如下:<!-- 这是一个注释 -->
HTML 段落段落是通过 <p> 标签定义的。
HTML 折行如果需要进行换行（新行），请使用 <br>标签，<br /> 元素是一个空的 HTML 元素。由于关闭标签没有任何意义，因此它没有结束标签。
HTML 格式化标签HTML 使用标签 <b>("bold") 与 <i>("italic") 对输出的文本进行格式, 如：粗体 or 斜体
文本格式化标签标签
描述
<b>
定义粗体文本
<em>
定义着重文字
<i>
定义斜体字
<small>
定义小号字
<strong>
定义加重语气
<sub>
定义下标字
<sup>
定义上标字
<ins>
定义插入字
<del>
定义删除字
标签
描述
<code>
定义计算机代码
<kbd>
定义键盘码
<samp>
定义计算机代码样本
<var>
定义变量
<pre>
定义预格式文本
标签
描述
<abbr>
定义缩写
<address>
定义地址
<bdo>
定义文字方向
<blockquote>
定义长的引用
<q>
定义短的引用语
<cite>
定义引用、引证
<dfn>
定义一个定义项目。
HTML使用标签 <a>来设置超文本链接。超链接可以是一个字，一个词，或者一组词，也可以是一幅图像。
在标签<a> 中使用了href属性来描述链接的地址。
默认情况下，链接将以以下形式出现在浏览器中：
一个未访问过的链接显示为蓝色字体并带有下划线。访问过的链接显示为紫色并带有下划线。点击链接时，链接显示为红色并带有下划线。HTML 链接语法链接的 HTML 代码很简单。它类似这样
< a href="url">链接文本</a> href 属性描述了链接的目标
target 属性使用 target 属性，你可以定义被链接的文档在何处显示。
下面的这行会在新窗口打开文档：
<a href="https://www.baidu.com/" target="_blank" rel="noopener noreferrer">访问百度</a>
HTML <head> 元素<head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。
可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。
<title> 元素<title> 标签定义了不同文档的标题。
<title> 在 HTML/XHTML 文档中是必须的。
<title> 元素:
定义了浏览器工具栏的标题当网页添加到收藏夹时，显示在收藏夹中的标题显示在搜索引擎结果页面的标题<base> 元素<base> 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接:
<link> 元素<link> 标签定义了文档与外部资源之间的关系。通常用于链接到样式表:
<style> 元素<style> 标签定义了HTML文档的样式文件引用地址.
<meta> 元素meta标签描述了一些基本的元数据。
<meta> 标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。
META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。
元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。
<meta> 一般放置于 <head> 区域
<script> 元素<script>标签用于加载脚本文件，如： JavaScript。
HTML 表单和输入HTML 表单用于收集用户的输入信息，表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。
HTML 表单表单是一个包含表单元素的区域。
表单元素是允许用户在表单中输入内容，比如：文本域（textarea）、下拉列表（select）、单选框（radio-buttons）、复选框（checkbox） 等。
我们可以使用 <form>标签来创建表单:
输入元素多数情况下被用到的表单标签是输入标签 <input>。
输入类型是由 type属性定义
文本域（Text Fields）文本域通过 <input type="text">
密码字段密码字段通过标签 <input type="password">
单选按钮（Radio Buttons）<input type="radio">标签定义了表单的单选框选项:
复选框（Checkboxes）<input type="checkbox">定义了复选框。复选框可以选取一个或多个选项：
提交按钮(Submit)<input type="submit">定义了提交按钮。
当用户单击确认按钮时，表单的内容会被传送到服务器。表单的动作属性 action定义了服务端的文件名。action属性会对接收到的用户输入数据进行相关的处理:
有一个 method 属性，它用于定义表单数据的提交方式，可以是以下值：
post：指的是 HTTP POST 方法，表单数据会包含在表单体内然后发送给服务器，用于提交敏感数据，如用户名与密码等。get：默认值，指的是 HTTP GET 方法，表单数据会附加在 action 属性的 URL 中，并以 ?作为分隔符，一般用于不敏感信息，如分页等。例如：https://www.runoob.com/?page=1，这里的 page=1 就是 get 方法提交的数据。
HTML 图像- 图像标签（ <img>）和源属性（Src）在 HTML 中，图像由<img> 标签定义。
<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。
要在页面上显示图像，需要使用源属性（src）。src 指 "source"。源属性的值是图像的 URL 地址。
定义图像的语法是：<img src="url" alt="some_text">URL 指存储图像的位置。
HTML图像- Alt属性alt 属性用来为图像定义一串预备的可替换的文本。 替换文本属性的值是用户定义的。
在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。
HTML 图像- 设置图像的高度与宽度height（高度） 与 width（宽度）属性用于设置图像的高度与宽度。
属性值默认单位为像素:
HTML 表格表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td>标签定义）。
字母 td 指表格数据（table data），即数据单元格的内容。
数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
HTML 表格标签标签
描述
<table>
定义表格
<th>
定义表格的表头
<tr>
定义表格的行
<td>
定义表格单元
<caption>
定义表格标题
<colgroup>
定义表格列的组
<col>
定义用于表格列的属性
<thead>
定义表格的页眉
<tbody>
定义表格的主体
<tfoot>
定义表格的页脚
锚文本就是一个关键字加上超级链接，用户点击它的时候就会跳转到相关页面。
普通锚文本：指文本是普通文字而非关键词
定向锚文本：指锚文本是目标关键词带有URL
当同一页面多次出现关键词A时，第一次出现的，设置超链接，以后出现的忽略
作用：锚文本对一个页面的某个关键词排名非常重要
丰富站内链接，提升权重，锚文本是链接的一种，使用标签href属性来制作
列表标签作用：给一堆数据添加列表语义，也就是告诉搜索引擎/浏览器这一堆数据是一个整体。
列表标签分类无序列表（最多）（unorderedlist）无序列表：给一堆数据添加列表语义，并且一堆数据中所有的数据都无先后顺序。
格式：
<ul>
<li>需要显示的条目内容</li>
</ul>
li：listlitm的缩写：条目列表。list：列表；item:条目
应用：
新闻列表
商品列表
导航条
标签可以改变样式，但是不建议，改变样式一般是通过css。
<ul>标签中最好只放<li>标签，但是在<li>标签中还可以继续放其他的标签。
无序列表-建立带有项目符号的列表建立带有项目符号的列表：
标签：使用<ul>和<li>标签
方法：<ul>和<li>标签的type属性指定符号的样式，取值如下：
属性值 样式
disc 实心的圆圈
square 实心的方块
circle 空心的圆圈
有序列表（最少）（orderedlist）有序列表：给一堆数据添加列表语义，并且这一堆数据中国所有的数据都有先后之分。
格式：
<ol>
<li></li>
</ol>
也可以通过有序列表的属性来改变有序序列表的格式，如：<oltype="i">表明，序号是i和ii这种表示。但是一般没有人这么用，要想改变格式，通过css。
有序列表-建立数字编号的列表建立数字编号有序列表：
使用<ol>和<li>标签创建带数字编号的列表。
在<ol>标签中使用start属性，设置起始的序号。
在<li>标签中使用value属性，改变列表内的编号顺序。
start属性：设置起始的序号。value属性，改变列表内的编号顺序。
有序列表-指定编号的格式和顺序有序列表——创建指定编号的格式和顺序：如使用abcd的顺序等
在<ol>和<li>标签中，使用type属性指定编号系统的类型。type属性的取值如下表所示：
属性值 数字风格
A 使用大写字母（A、B、C等）
a 使用小写字母（a、b、c等）
I 使用大写罗马数字（I、II、III等）
i 使用小写罗马数字（i、ii、iii等）
1 使用阿拉伯数字（1、2、3等），这是缺省值
定义列表（其次）（definitionlist）定义列表：
（1）给一堆数据添加列表语义
（2）先通过dt标签定义列表中的所有标题，然后再通过dd标签给每个标题添加描述信息。
格式：
<dl>
<dt></dt>
<dd></dd>
</dl>
<!--其实dt和dd都是英文的缩写，dt是英文defintiontitle的缩写，所以dt的含义就是用来定义列表中的标题。dd是defintiondescription的缩写，所以dd的含义就是用来定义标题对应的描述的。-->
应用场景
做网站尾部的相关信息
做图文混排
（1）和ul、ol一样，dl和dt/dd是一个整体，所以他们一般情况下不会单独出现，一般都是一起出现。
（2）和ul、ol一样，由于dl和dt/dd是一个组合标签，所以dl中建议只放dt和dd标签
（3）一个dt可以没有对应的dd，也可以有多个对应的dd，但是无论有或者没有dd都不推荐使用。推荐使用一个dt对应一个dd。
（4）和li标签一样，当需要丰富界面时，我们可以在dt和dd标签中继续添加其他标签。但是不要直接在dl标签中添加其他的标签。
定义列表-建立无符号的列表建立无符号的列表
标签：<dl>和<dt>创建无符号的列表。
缩进列表：使用<dd>标签替换<dt>，创建缩进的列表。
定义列表-建立术语列表建立术语列表
方法：在<dl>元素中同时使用<dt>和<dd>标签，建立术语列表。
术语列表中的列表项由两部分组成：
术语：由<dt>标签指定
术语的说明：由<dd>标签指定
HTML 框架iframe语法:<iframe src="URL"></iframe>
iframe - 设置高度与宽度height 和 width 属性用来定义iframe标签的高度与宽度。
属性默认以像素为单位, 但是你可以指定其按比例显示
iframe - 移除边框frameborder 属性用于定义iframe表示是否显示边框。设置属性值为 "0" 移除iframe的边框:
使用 iframe 来显示目标链接页面iframe 可以显示一个目标链接的页面,目标链接的属性必须使用 iframe 的属性，
框架的使用frameset 元素可定义一个框架集。它被用来组织多个窗口（框架）。每个框架存有独立的文档。在其最简单的应用中，frameset 元素仅仅会规定在框架集中存在多少列或多少行。您必须使用 cols 或 rows 属性。
frameset 在一个页面中设置一个或多个框架 不能嵌套在body标签里
iframe 是在html页面内嵌入框架 框架内可以连接另一个页面
frameset 不能在body内使用
frame 一般都是在frameset中使用
cols 定义框架集中列的数目和尺寸
rows 定义框架集中行的数目和尺寸
scrolling 滚动条
auto 在需要的情况下出现滚动条（默认值）。
yes 始终显示滚动条（即使不需要）。
no 从不显示滚动条（即使需要）
版权声明
本文仅代表作者观点，不代表博信信息网立场。
作者文章
- 拨号VPS需要手动换IP吗？ 1年前 (2024-06-25)
- 如何搭建VPS远程拨号服务器？ 1年前 (2024-06-25)
- 如何为拨号VPS搭建最佳代理？ 1年前 (2024-06-25)
- 如何利用VPS进行拨号连接？ 1年前 (2024-06-25)
- 日本VPS拨号动态IP：解锁网络新境界 1年前 (2024-06-25)