?引言：
? ? ? ? 自己写的第一篇，内容其实非常不全（以后会补充的），算作是自己一个小阶段的总结，因为笔者英语不好所以有些单词旁边有翻译（写了好多才发现好像都认识），如果有错误欢迎指正orz。
目录
一、html5基本框架
1.基本框架
? ? ? ?
“基本框架在vs code中快捷键为!+Tab”（英文字符‘!’，谁再用中文字符编写请给自己来一拳）
????????html5的基本框架由文档声明，根标签(<html>)，以及两个子元素（<head>,<body>)组成。其中head标签内部不会出现在网页的主体部分，而body中的内容出现在网页的主体部分。
2.文档声明
? ? ? ? 文档声明出现在最开头，用来告知浏览器文档的类型，其格式为<!DOCTYPE? 类型>
?????????“doctype 文档类型”
? ? ? ? 注意，文档声明严格意义上并不是标签，不出现在<html>（根标签）内部。
3.字符编码
? ? ? ? 字符编码主要是编码和解码时所用的字符集。用以将数据进行编码转换为二进制时存储在电脑中，在使用时进行解码转换为我们需要的数据。编码和解码不同会出现乱码问题。
?????????（<meta>将在自结束标签中细讲）
????????“charset 字符集”
? ? ? ??常见的字符编码有：ASCΙΙ(美),ISO88591(欧),GB2312(中),GBK(中扩展),UTF-8(万国码)。
UTF-8是最常用的字符编码。在程序内编写时右下角会有字符编码，右下角的编码一定要和charset的属性值一样。
二、块与行内元素
1.块元素
? ? ? ? 块元素（“block element”）。一般在网页中进行布局。如现在你看的csdn界面，最上面导航栏可以分为一块，文章内容为一块，左边的热门文章，广告等等都是用块元素来进行布局。块元素内可以放任何元素包括块元素（除<p>内不能放块元素）。常见的块元素有<h1>~<h6>,<p>,<div>等等。
2.行内元素
? ? ? ? 行内元素（“inline element ”）主要用来包裹文字，行内元素不能放块元素。常见的行内元素有<font>,<span>,<i>等等。
三、标签与属性
1.注释与实体
?<!-- 注释内容? ?-->
? ? ? ?“注释在vs code中快捷键为ctrl+/，可以选中内容使用快捷键进行快速注释，同样可以用相同的快捷键取消注释”
????????注释和其他编程软件用法相似，这里不做详解。
实体?
? ? ? ? 某些特殊符号无法在html中直接表示，如‘ ’，‘<’,'>'，多个空格会被识别为一个空格，而小于，大于号会被当做标签。这时就需要用到实体，下面是常用的一些实体（不全）以后用到了会加的。
| 效果 | 描述 | 实体名称 | 实体编号 |
| 空格 | |   | |
| < | 小于号 | < | < |
| > | 大于号 | > | > |
| ? | 版权 | © | © |
2.常用标签
<html>（双标签）
? ? ? ? ????????<html>标签又叫根标签，所有其他标签都应在<html>标签内部（<!doctype html>严格意义不是标签）。
? ? ? ? ?属性包括：
? ? ? ? ? ? ? ? lang “language 语言”? 主要作用：让浏览器和搜索引擎来识别网页的语言。其中en是英语，zh-CN是中文。
????????????????????????????????????????????????????使用范例： “ <html lang=“zh-CN”> ”
<head>（双标签）
? ? ? ? ? ? ? ? <head>“头部” 主要作用：用于描述文档的各类信息，文档的标题，便于搜索引擎搜索等。
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?用在<head>中的标签：<title>,<meta>
<body>（双标签）
? ? ? ? ? ? ? ? <body>“身体” 主要作用：包括网页中所有显示的内容，如文本，超链接，图片，大部分标签都可用在body。
<title>（双标签）
? ? ? ? ? ? ? ? <title>“标题” 主要作用：定义文档的标题，出现于标题栏。用于<head>内，且<head>中必须有一个<title>。
<h1>~<h6>（双标签）
? ? ? ? ? ? ? ? <h1>~<h6>? 主要作用：定义网页内标题。<h1>~<h6>优先级逐级降低。
<p>（双标签）
? ? ? ? ? ? ? ? <p>主要作用：定义段落，为块元素。
3.列表标签
? ? ? ? ? ? ? ? 列表分为无序列表，有序列表和定义列表3类，且列表之间可以嵌套。
<li>（双标签）
? ? ? ? ? ? ? ? <li>“list”主要作用：定义列表中的项目，用在无序（<ul>）和有序（<ol>）列表中。
<ul>（双标签）
? ? ? ? ? ? ? ? <ul>“unordered list 无序列表” 主要作用：用于定义无序列表。
<ol>（双标签）
? ? ? ? ? ? ? ? <ol>"ordered list 有序列表"?主要作用：用于定义有序列表。
<dl>（双标签）
? ? ? ? ? ? ? ? <dl>"definition list 定义列表"?主要作用：用于定义无序列表，无序列表中包括<dt>和<dd>两项。
? ? ? ? ? ? ? ? <dt>主要作用：用于表示定义的内容。
? ? ? ? ? ? ? ? <dd>主要作用：用于对内容进行解释说明（描述列表中的项目，可类似理解为<li>）。
? ? ? ? 注：大部分情况下，用的列表以<ul>为主，列表中的排布方式，表示样式等将由css进行。
4.块元素（布局标签）
<hgroup>（双标签）
? ? ? ? ? ? ? ? <hgroup>主要作用：用来为标题分组，可将一组相关标题同时放入<hgroup>
<blockquote>（双标签）
? ? ? ? ? ? ? ? <blockquote>"块引用" 主要作用：表示一个长引用，在网页中会自动缩进。
<header>（双标签）
? ? ? ? ? ? ? ? <header>“头部”?主要作用：表示网页的头部。
<main>（双标签）
? ? ? ? ? ? ? ? <main>"主体"?主要作用：表示网页的主体部分，main只能出现一次。
<footer>（双标签）
? ? ? ? ? ? ? ? <footer>"底部"?主要作用：表示网页底部。
<nav>（双标签）
? ? ? ? ? ? ? ? <nav>“导航” 主要作用：表示网页中的导航。?
<aside>（双标签）
? ? ? ? ? ? ? ? <aside>"旁边" 主要作用：表示和主体相关的内容，多为侧边栏。
<article>（双标签）
? ? ? ? ? ? ? ? <article>“文章” 主要作用：表示一个独立文章。? ??
<section>（双标签）
? ? ? ? ? ? ? ? <section>"部分" 主要作用：表示独立的其他标签，以上标签无法表示时用section。
<div>（双标签）
? ? ? ? ? ? ? ? <div>主要作用：没有语义，只用来分块。
????????注：以上所有标签在页面中表示方法都一样，除了<div>外所有标签都是html5新增，现在主要的布局标签仍然是<div>,但是上述的其他标签可以增加代码的可读性，便于后续的维护。?
5.行内标签
<font>（双标签）
? ? ? ? ? ? ? ? <font>“字体” 主要作用：?用于规定文本的颜色尺寸大小。
????????属性包括：
? ? ? ? ? ? ? ? color“颜色” 主要作用：用来规定文本颜色。
? ? ? ? ? ? ? ? size“大小” 主要作用：用来规定文本大小。
? ? ? ? ? ? ? ? ? ? ? ? 使用范例：<div>super<font color="red" size="10">x</font>my</div>
? ? ? ? 注：并不推荐font标签的使用，html主要的作用只是布局，应由css来确定字体的样式。
<em>（双标签）
? ? ? ? ? ? ? ? <em> 主要作用：表示语音语调的加重，标签内的内容在网页中斜体表示。
<strong>（双标签）
? ? ? ? ? ? ? ? <strong>“强” 主要作用：表示强调。标签内的内容在网页中粗体表示。
<q>（双标签）
? ? ? ? ? ? ? ? <q>主要作用：表示一个短引用，网页内会自动加引号。
<i>（双标签）
? ? ? ? ? ? ? ? <i>主要作用：表示强调，网页中斜体表示，和<em>类似。?
<span>（双标签）
? ? ? ? ? ? ? ? <span>主要作用：没有语义，一般用于选中文字，和<div>相似。行内标签多用<span>。
6.自结束标签
<meta>
? ? ? ? ? ? ? ? <meta>“元” 主要作用：主要设置网页的元数据。注：<meta>永远在head内部。
? ? ? ? 属性包括：
? ? ? ? ? ? ? ? name“名字” 主要作用：指定数据的名称。
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?值包含：keywards，内容为能被搜索引擎搜索到的关键字，关键字之间用英文逗号隔开。
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?description，内容为网站的描述。（就是你百度搜出来链接下面的字）
? ? ? ? ? ? ? ? http-equiv 主要作用：将页面重定向另一个网站。
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 值包含：refresh，内容为跳转页面的地址以及跳转的时间。
? ? ? ? ? ? ? ? content“容纳物” 主要作用：指定数据的内容。这里的内容指的是能被搜索引擎搜到的关键字。
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?使用范例：<meta name="ketwords" content="小羊，superxmy">
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<meta name="description" content="小羊自己写的">
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<meta http-equiv="refresh" content="3;https://www.baidu.com">
<br>
? ? ? ? ? ? ? ? <br> 主要作用：表示页面内换行。（\n）
? ? ? ? ? ? ? ? "<br>在vs code中可以使用快捷键br*n产生n个<br>"
7.超链接
<a>（双标签）
? ? ? ? ? ? ? ? <a>主要作用：定义超链接，<a>虽然是行内元素但<a>内可以放除自身以外的任何元素（包括块元素）。
? ? ? ? 属性包括：
? ? ? ? ? ? ? ? ?href?主要作用：指定跳转的目标路径。指定的路径不仅仅可以是外部链接，也可以是内部链接和页面中的位置。在内部链接默认是同一个文件夹内，用../表示上一级目录，./表示同一级，/表示下一级目录。在页面中，值为#指回到页面顶部，用id属性（具体在全局属性）到页面中的指定位置，值为“#id属性值”。还可以使用占位符“javascript:;”此时点击超链接不会跳转。
? ? ? ? ? ? ? ? ? ? ? ? 使用范例：<a href="https://www.baidu.com">百度</a>? （外部链接）
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <a href="../../try1/zdgmfxt.html">《正大光明》fxt</a> （内部上两级的链接）
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <a href="/try2/try3/try.html">try</a> （内部下两级的链接）
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??<a href="#">回到顶部</a> （页面顶）
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <a href="#bottom">去id为bottom的地方</a>（页面指定位置）
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??<a href="javascipt:;">超链接</a>
? ? ? ? ? ? ? ? target“目标”主要作用：指定超链接打开的位置。
? ? ? ? ? ? ? ? ? ? ? ? ? ?? ?值包含：_self，默认值，指在当前页面打开超链接。
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? _blank，指在一个新的页面打开超链接。
? ? ? ? ? ? ? ? ? ? ? ? ? 使用范例：<a href="htttps:www.baidu.com" target="_self"></a>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??<a href="htttps:www.baidu.com" target="_blank"></a>
? ? ? ? 注：超链接在网页中自带下划线，未被访问和已被访问的颜色是不一样的，未被访问是这个样子的，已被访问是这个样子的。(还不懂就看百度)
8.图片与视音频标签
<img>（自结束标签）
? ? ? ? ????????<img>主要作用：向当前页面引入一个外部图片。<img>是替换元素，介于行内元素与块元素之间。
? ? ? ? 属性包括：
????????????????src“source 源文件” 主要作用：用于指定引入图片的路径。可以是内部也可以是外部。
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?使用范例：<img src="小狗摇头.gif" >（内部图片）
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <img src="https://gimg2.baidu.com/image_search.......">（外部图片，太长了不放口拉）
? ? ? ? ? ? ? ? alt 主要作用：对图片的描述。默认情况下不会显示，但有些浏览器在图片无法加载时显示。且搜索引擎会根据alt来识别图片。
? ? ? ? ? ? ? ? ? ? ?使用案例：<img src="小狗摇头.gif" alt="小狗摇头">? ? ??
????????????????width“宽” 主要作用：改变图片的宽度。
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 使用范例：<img src="小狗摇头.gif" width="500">
? ? ? ? ? ? ? ? height"高" 主要作用：改变图片的高度。（注意：如果只改变宽度和高度，则图片将等比例缩放）
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 使用范例：<img src="小狗摇头.gif" height="500">
? ? ? ? 注意：一般情况下不会在pc端不会改变图片大小。
????????补充：图片的格式base64，将图片进行base64进行编码，通过字符进行引用，一般在需要图片和网页一起出现时使用base64。
<audio>（双标签）
? ? ? ? ? ? ? ? <audio>主要作用：引入外部的音频。注：默认情况下不允许用户自己控制播放停止。
? ? ? ? 属性包括：
? ? ? ? ? ? ? ??src“source 源文件” 主要作用：用于指定引入音频的路径。可以是内部也可以是外部。
? ? ? ? ? ? ? ? controls“控制” 主要作用：是否允许用户控制播放。
? ? ? ? ? ? ? ? autoplay“自动播放” 主要作用：音频文件是否自动播放。（注：当前大部分浏览器并不支持autoplay，不建议使用）
? ? ? ? ? ? ? ? loop“循环” 主要作用：音频是否循环播放。
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 使用范例：<audio src="メルト.mp3" controls autoplay loop></audio>
<video>（双标签）
? ? ? ? ? ? ? ? <video>主要作用：引入外部的视频。（和audio一样，不写口拉）
<source>（自结束标签）
? ? ? ? ? ? ? ? <source>主要作用：指定引入的路径。可以是内部也可以是外部。
? ? ? ? 属性包括：
????????????????src“source 源文件” 主要作用：用于指定引入音频的路径。可以是内部也可以是外部。
<embed>（自结束标签）
? ? ? ? ? ? ? ? <embed>主要作用：引入外部的音频视频。（老版本）
? ? ? ? 属性包括：
????????????????src“source 源文件” 主要作用：用于指定引入音频的路径。可以是内部也可以是外部。
? ? ? ? ? ? ? ? type 主要作用：指定文件类型。
????????????????width“宽” 主要作用：改变宽度。
? ? ? ? ? ? ? ? height"高" 主要作用：改变高度。（注：<embed>必须要设置宽高，不然你看都看不见）
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 使用范例：<embed src="メルト.mp3" type="audio/mp3" width="300" height="300">
? ? ? ? 注：<embed>的标签太老了，所以一般不使用，给IE8用用吧。
? ? ? ? 注：除src外source也可以用来引入文件路径，因为不同浏览器对文件有不同的支持性，所以往往采用以下的写法，如果第一行可以被识别则使用第一行，若不行则第二行，以此类推。
? ? ? ? ?注：其实真正使用时会使用其他东西来引入音频视频，而不用以上标签来占用服务器（主要是钱），所以以上用的比较少口拉。
9.内联框架
<iframe>（双标签）
? ? ? ? ? ? ? ? <iframe>"iframe 内部框架" 主要作用：用于向当前页面引入一个其他界面。
????????属性包括：
? ? ? ? ? ? ? ? src“source 源文件” 主要作用：用于指定引入网站的路径。
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?使用范例：<iframe src="https://www.baidu.com"></iframe>
? ? ? ? ? ? ? ? width“宽” 主要作用：改变内联框架的宽度。
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 使用范例：<iframe src="https://www.baidu.com" width="800"></iframe>
? ? ? ? ? ? ? ? height"高" 主要作用：改变内联框架的高度。
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 使用范例：<iframe src="https://www.baidu.com" height="800"></iframe>
????????????????frameborder“frameborder 框架边框” 主要作用：指定内联框架的边框。值为“0”和空表示无框架，其他值为有框架。
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 使用范例：<iframe src="https://www.baidu.com" frameborder="0"></iframe>
? ? ? ? 注：内联框架中的内容无法被搜索引擎所检索，且内联框架当前使用非常少（几乎被淘汰了）
10.全局属性
? ? ? ? id 主要作用：是元素的唯一标识，同一个页面不能出现两个相同id，出现了以最先出现的为主。目前超链接用用，以后会经常用。
? ? ? ? ? ? 使用范例：<div id="div1"></div>
更新中...............