超文本标记语言(HyperText Markup Language)，用于描述创建网页，由浏览器来解析。HTML文档也称web页面，包含HTML标签(<>包起，成对出现)及文本内容。
image.png
相关资源：
1.HTML实例
https://www.runoob.com/html/html-examples.html
2.HTML注解
https://www.runoob.com/tags/html-reference.html
3.HTML、CSS、JS在线编辑
https://c.runoob.com/front-end/61/
零、基础
——————————————————————————
注释
<!DOCTYPE> 定义文档类型，不区分大小写
<a> 定义超文本链接
<abbr> 定义缩写
<applet> 定义嵌入applet
定义换行
<center> 居中文本
<h1> to <h6> 定义HTML标题
<head> 定义文档信息
<html> 定义HTML稳定
<input> 定义输入控件
<label> input元素的标注
<link> 定义外部资源
<meta> 定义HTML文档元信息
<object> 定义内嵌对象
<p> 定义段落
<script> 定义客户端脚本
<select> 定义下拉列表
<style> 定义文档样式信息
<td> 定义表格的单元
<th> 定义表头单元格
<thead> 定义表头内容
<tr> 定义表格中的行
<tt> 定义打字机文本
一、元素
——————————————————————————
HTML元素以开始标签(如<p>)起始，以结束标签(如</p>)终止。空元素(没有内容，如
)以开始标签的结束而结束。在XHTML\xml\未来版本的HTML中，所有元素都要关闭，空元素的开始标签要添加斜杠(如
)。
1.链接
<a href="https://www.runoob.com">这是一个链接</a>
href属性指定链接地址。
2.图像
<img loading="lazy" src="/images/logo.png" width="258" height="39" />
图像名及尺寸以属性提供。
二、属性
——————————————————————————
属性值应该包括在引号内(单双引号都行)
常用属性：
①class：为元素定义类名
②id：定义元素唯一id
③style
④title
三、标题
——————————————————————————
标题不应用于大号文本，因为搜索引擎基于标题为网页结构和内容编制索引。
创建水平分割线。
四、段落
——————————————————————————
连续的空格、换行会被算作一个空格、换行。
五、格式化
——————————————————————————
六、链接
——————————————————————————
1.target属性定义被链接文档在哪里显示：
<a href="https://www.runoob.com/" target="_blank" rel="noopener noreferrer">访问菜鸟教程!</a>
在新窗口打开文档。
2.id属性创建HTML文档书签：
<a id="tips">有用的提示部分</a>
<a href="#tips">访问有用的提示部分</a> // 文档中创建一个链接到(id="tips")
<a href="https://www.runoob.com/html/html-links.html#tips"> // 从另一个页面创建一个链接到(id="tips")
3.始终将正斜杠添加到子文件夹，如href="http://www.w3school.com.cn/html/"，这样能加快网站载入。因为末尾加正斜杠会告知浏览器现在指向一个目录，浏览器会直接读取该目录的index\home等默认文件。没有加正斜杠，如href="http://www.w3school.com.cn/html"会向服务器产生两次HTTP请求，浏览器会先尝试读取根目录下的文件，再尝试查找同名的目录。
4.单词之间空格使用 %20 代替，以确保浏览器可以正常显示文本。
七、头部
——————————————————————————
1.<head>包含所有头部标签元素：<title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。其中，可以插入脚本(scripts)，样式文件(CSS)，以及各种meta信息。
2.<base>定义页面中所有链接默认的目标地址。
3.<title>定义浏览器工具栏的标题、网页在收藏夹的标题、显示在搜索引擎结果页的标题。
*4.<link>定义文档与外部资源的关系，常用语链接到样式表：
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
5.<style>定义了HTML文档的样式文件引用地址，也可直接添加样式来渲染HTML：
<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>
6.<meta>指定网页的描述、关键词、文件最后修改时间、作者等元数据。元数据可用于浏览器加载页面、搜索引擎(关键词)以及其他Web服务。
实例：
①为搜索引擎定义关键词：
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
②为网页定义描述内容：
<meta name="description" content="免费 Web & 编程 教程">
③每半分钟刷新页面：
<meta http-equiv="refresh" content="30">
7.<script>用于加载脚本
八、CSS
——————————————————————————
CSS(Cascading Style Sheets)用于渲染HTML元素标签样式。
1.CSS有三种方式添加到HTML：
①内联样式 通过style属性，如<p style="color:blue;margin-left:20px;">这是一个段落。</p>；
②内部样式表 <head>使用<style>元素包含CSS，单个文件的样式都会改变，如下；
<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>
③外部引用 引用外部CSS文件，很多页面需要用到该样式时，最好使用这种方式。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
九、图像
——————————————————————————
<img>是空标签，只通过src属性指定图像URL位置；alt属性用于图像无法载入时显示文本信息。
十、表格
——————————————————————————
<table>元素定义表格，表头由<th>定义，各行由<tr>定义，单元格由<td>定义。
十一、列表
——————————————————————————
<ul>声明无序列表，元素用<li>定义；<ol>声明有序列表。
十二、区块
——————————————————————————
1.大多HTML元素定义为块元素-block-level(<h1>, <p>, <ul>, <table>)或内联元素-inline(<b>, <td>, <a>, <img>)，块元素常以新行开始。
2.<div>用于组合HTML元素，可与CSS一同使用对内容块设置样式属性。
3.<span>为内联元素，用作文本容器，可与CSS使用，为部分文本设置样式属性。
十三、布局
——————————————————————————
1.页面布局可用<div>或<table>描述，网站将内容安排到多个列中，CSS用于对元素定位及设置样式。不过表格目的是呈现表格化数据，表格不是布局工具。
2.CSS的好处在于，编辑CSS外部样式代码，可统一维护所有页面的布局。
十四、表单
——————————————————————————
1.表单由<form>定义，是一个包含表单元素的区域，表单元素(文本域、下拉列表、单复选框)允许用户在表单中输入内容。
2.输入元素由<input>定义，类型由<type>定义(有text, password, radio, checkbox, submit, button)。
3.<fieldset>定义一组带边框的表单元素。
十五、框架
——————————————————————————
框架可以内嵌显示多个页面，由<iframe>定义。
十六、颜色
——————————————————————————
1.HTML颜色由红绿蓝组合而成，由十六进制符号定义，每个颜色的值为0~255。
2.计算机以前只支持256种颜色，Web安全色有216种(Micro和Mac有40种独立系统色)，因此跨平台216安全色能确保所有计算机能显示。
十七、颜色名
——————————————————————————
颜色名由CSS和HTML定义(17标准色+124，一共141个)
十八、颜色值
——————————————————————————
略
十九、脚本
——————————————————————————
1.JavaScript使得HTML页面具有更强的动态和交互性。
2.<script>插入JS脚本(可含脚本语句，也可通过src指向外部脚本文件)，不支持JS的浏览器会使用<noscript>中的文本替代。
3.JS常用语图片操作、表单验证、事件响应及内容动态更新。
二十、字符实体
——————————————————————————
1.HTML的预留字符必须使用字符实体来替代。
2.字符实体格式&entity_name或&#entity_number(如小于号为< , <, <)
3.连续空格要用 ，否则浏览器会自动截短。
4.实体名对大小写敏感。
5.变音符可结合字母、数字使用(如à为 à)
符号实体参考：
https://www.runoob.com/html/html-entities.html
二十一、URL
——————————————————————————
1.URL(Uniform Resource Locators)可用网站域名或IP地址定义。
2.浏览器通过URL向Web服务器请求页面，URL定位到万维网上的文档(网页或资源文档)。
3.网址语法规则：
scheme://host.domain:port/path/filename
①scheme 定义Internet服务类型，如http；
②host 定义域主机，http默认主机为www；
③domain 定义Internet域名，如baidu.com；
④:port 定义主机上的端口号；
⑤path 定义服务器上的路径(省略则文档位于网站的根目录)；
⑥filename 定义的文档名；
4.URL只能用ASCII字符集，非ASCII字符由%后跟两位HEX数来替换，URL不能包含空格，空格常用+来替换。
二十二、速查列表
——————————————————————————
常用HTML模板大全(基本文档、基本标签、文本格式化、链接等)：
https://www.runoob.com/html/html-quicklist.html
二十三、标签简写&全称
——————————————————————————
标签简写及全称对应表大全：
https://www.runoob.com/html/html-tag-name.html
二十四、总结
——————————————————————————
1.HTML的关键是标签，用于指示内容显示。
2.进阶技术：
CSS -- 同时控制多重网页的样式和布局，将格式化从HTML中剥离；
JavaScript -- 静态页面只能展示内容，若要支持用户交互的动态页面需要JavaScript；
3.网站托管服务器的考虑因素：
①支出：硬件、软件、人工；
②Internet服务提供商(ISP)：24小时支持、每日备份、流量、带宽或内容限制、Email短信功能、数据库访问；
二十五、XHTML
——————————————————————————
1.XHTML是以XML格式编写的HTML。
2.由于移动端或其他小型设备缺乏理解不安规则编写的HTML代码，XHTML的良好格式可以改善该问题。
3.XHTML与HTML的区别：
文档结构
①DOCTYPE是强制的；
②<html>的namespace属性是强制的；
③<html>, <head>, <title>, <body>也是强制的；
元素语法
①元素必须正确嵌套；
②元素必须关闭；
③元素必须小写；
④文档要有一个根元素；
属性语法
①属性要使用小写；
②属性值要用引号包围；
③禁止属性最小化；
网友评论