这是为完全没有接触过的童鞋写的，属于真正的傻瓜式教程，当然由于本人也不是什么大佬，可能有些知识的理解与自己想的不一样，如果有大佬看到，还请帮我指出。以下主要是HTML5的基础标签的使用。
开发前的准备
预备知识
HTML全称Hypertext Marked Language，即是超标记文本语言，不是编程语言。
HTML文件就是网页文件，网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容。
浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，也就是不会报错，而且不会停止执行过程，开发者只能通过显示效果来分析出错原因和出错部位。
对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果。
HTML5 是如今的最新版，之前还有什么HTML4，HTML3这些，不过如今已经过时，现在用的基本是HTMML5。在这更新的过程中，HTML5新增了一些新的内容，也废弃了HTML4的一些内容，因为是第五次修改，所以叫HTML5。
开发环境
HTML的开发环境很简单，一个文本编辑器和一个浏览器即可。
正所谓工欲善其事，必先利其器，虽然HTML用记事本也是可以写，但太慢了，而且直接打开记事本写完代码再改后缀名为.html是行不通的，正常的做法是先新建记事本，再改后缀名，然后再用记事本打开这个文件，之后就可以编写代码。
在这里推荐hbuilder，vs code，sublime text。
根据不同的场景可以选择不同的编辑器，sublime text 的优点是轻便，安装相应的插件就可以开发相应的语言，但安装插件比较麻烦，所以如果只是小型项目，推荐使用它，如果是大型项目，请使用vs code。
vs code 虽然启动速度相对于 sublime text 慢，但它安装插件容易，而且有内置的终端，大型项目很多时候都需要使用命令行。
hbuilder如果是开发混合APP的话，可以使用它
浏览器这里推荐用谷歌浏览器。
2 HTML基础知识
HTML的基本结构
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
<meta charset="utf-8">
</head>
<body>
</body>
</html>这个是HTML的大致结构，在sublime_text里，只要新建好html文件后，输入html，然后按tab键，即可得到一个大致的结构，最后再自己添加上这段代码即可，<meta charset="utf-8">
接下来，以上面的代码为例，介绍每行代码代表的意义。
<!DOCTYPE html>这个是不是标签，我也不清楚，网上资料有些说是，有些说不是，虽然我个人认为不是，不过这不重要，因为不管是不是标签，它都必须写上、
让浏览器知道这个页面用HTML5这个版本进行编写，当然也可以写成这样<!doctype html>
所以第一行代码就是让浏览器知道这是用HTML5进行编码
至于HTML4，有三种声明，而且都有些差异，不过这都不重要，只要知道这些是HTML4就行，现在没人用HMTL4了，除了非常古老的网页。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">接下来是第二行，是一个标签<html>，不过它应该和第十行的代码</html>一起看，它在浏览器上看不到效果的，它告诉浏览器这是一个文档，它限定了文档的起始点和终点。
<head>是头部，相当于人头脑，里面储存的数据大多不会被作为内容显示出来，比如元信息，引入样式表之类的。
<title>这个是标题，一个HTML文档，有且只有一个，它就是浏览器标签上的文字
<meta charset="utf-8">这个是字符集告诉浏览器用utf-8这个字符集去解析，如果不用，中文会出现乱码，不过像谷歌不会，要用ie浏览器。
但是值得注意的是浏览器会首先尝试从服务的HTTP响应头部(特别是Content-type头部)来确定字符集，响应头部中声明的字符集，通常优先于文档中指定的字符集。
如果响应头部没有字符集，文档也没有字符集，浏览器自己会为你选择一个字符集，但可能不是你想要的。
<body>这个是身体，主要就是HTML的主体内容了，所有要显示的都是放在这里的。
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
</head>
<body>
所有内容都写在body里
hello world
<p>vs code</p>
</body>
</html>
注释
编程语言有注释，标记语言也有自己的注释，注释的内容不会被解析。
<!-- 这个是注释 -->
<!--
在这个里面的都是HTML的注释
-->标签的结构
标签有双标签和单标签。
像body，html这些都是双标签，像meta这就是单标签，也叫自闭合标签，不过单标签还是较少，以后不是特别说明，就都是双标签。
双标签和单标签都自己的书写规则
<title>标题</title>
<!-- <title> 是起始标签
</titlt> 是闭合标签
中间的就是标签的内容
-->
<meta />或<meta>
这种是单标签虽然就算双标签只写一个浏览器也能正确解析，但是不规范。
标签的属性和值
每个标签都拥有自己的属性，每个属性也有自己所拥有的值
属性和值的写法是这样的属性="值"
<meta charset="utf-8" />
charset 这个便是属性
utf-8 这个是值块级元素、行内元素、行内块元素
块级元素就是独占一行的，且有自己的宽高
<p>
第一行
</p>
<p>
第二行
</p>行内元素会排同在同一行，且没有宽高，宽高由元素的内容决定
<span>在同一行></span><span>在同一行></span>行内块元素，排在同一行，且有自己的宽高
<button>
按钮
</button>
<button width="200" height="200">
按钮
</button>标签的大小写
HTML对大小写不敏感，大写小写都行，但这里推荐使用小写。
3 标签的基本使用
这里主要写经常用到的，因为标签是在是太多了，只要知道怎么看，其他标签去网站了解就行
标签请参考https://www.runoob.com/tags/ref-byfunc.html
h1~h6
h1,h2,h3,h4,h5,h6这六个分别是一级标题，二级标题，如此类推，直到六级标题
注意：在一个网页中一级标题只能有一个，虽然可以有多个，但不规范。
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>p标签
p标签代表文章的段落
<p>这是一个段落</p>br标签
<br >单标签，代表换行
<p>
这里是用\n发现换行不了
</p><p>
这里用br<br>发现换行了
</p><p>
你就算这样也换行不了
换行不了
会排成一行，只能用br
</p>hr标签
hr 单标签，水平分割线，和面试官那些hr没有半毛钱关系
<p>
段落
</p>
<hr>
<p>
段落
</p>实体字符
编程语言有转义字符，标记语言有实体字符，一些无法显示的符号都是用实体字符来代替，比如<、>还有空格
<p>
我这里写了 很多的空格，可真正显示出来的只有一个空格，怎么搞，就要用实体符号
</p><!-- 是 空格的实体符号 -->
<p>
写多少个 就有多少个空格， 分号不要省，浏览器不会把实体字符显示出来的，相当于编程语言里的转义字符。
</p>以下是常用的实体字符，另外还有什么数学符号的实体字符，希腊字母的实体字符，想要知道自行查看
https://www.runoob.com/tags/html-symbols.html
| 常用字符以及HTML实体 | 描述以及说明 |
|---|---|
|
空格我们使用最多的空格，也就是按下space键产生的空格 |
  |
空格占据的宽度正好是1/2个中文宽度 |
  |
空格占据的宽度正好是1个中文宽度 |
  |
空格占据的宽度比较小 |
× |
叉叉× |
« |
? |
» |
? |
< |
小于号< |
> |
大于号> |
& |
和号& |
'IE支持或'IE不支持 |
‘‘单引号 |
" |
""双引号 |
© |
版权? |
® |
注册商标? |
div标签
div是容器，没有任何特殊的效果，不像什么a标签，img一样有特殊的作用
也不是语义化标签，但还是很常用的
div就像ps里面的组一样，很多个有些关系的图层，会把它塞到组里面，这个组也就是div了。
<div>
<p>
段落
</p>
<a href="#">链接</a>
<p>
上面的href="#" 跳转的就是当前页面
</p>
</div>span标签
span 是行内元素
<p>
<span>待</span>
<span>到</span>
<span>阴</span>
<span>阳</span>
<span>逆</span>
<span>转</span>
<span>时</span>
<br />
<span>以</span>
<span>我</span>
<span>魔</span>
<span>血</span>
<span>染</span>
<span>靑</span>
<span>天</span>
</p>块级元素可以包裹行内元素，但行内元素不能包裹块级元素，以下代码是错误的
<span>
<p>
仙路尽头谁为峰，一见无始道成空
</p>
</span>常用文本标签
i 斜体 i 斜体 现在是个语义化标签了，一般用来表示分类设计，一个技术术语，一种思想，一个习惯短语或者某种其他的文本。
b 粗体 b 粗体? 用来在字面上和常规的内容形式区分开来，而没有传达任何额外的重要性，比如用于关键字，产品名称或其他内容。
del 定义被删除的文本 del 定义被删除的文本
s 定义有删除线的文本 s 定义有删除线的文本
ins 插入文本 ins 插入文本
u 下划线 u 下划线
虽然从表现看 u和ins，del和s的效果一样，但代表的意义不同
sub 定义下标文本
log2 代码如下
<b>log<sub>2</sub></b>sup 定义上标文本
22 代码如下
<b>2<sup>2</sup></b>kbd 键盘文本 ctrl 不过这个标签已经废弃
code 计算机代码文本 String srt =?"hello world"
abbr 定义缩写
The WHO was founded in 1948.
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
这个title属性是当鼠标放上去时就会出现它的内容bdo 定义文字的书写方向
该段落文字从左到右显示。
该段落文字从右到左显示。
<p>该段落文字从左到右显示。</p>
<p><bdo dir="rtl">该段落文字从右到左显示。</bdo></p> dir 是 bdo的 属性，它有两个值ltr，rtl 默认是ltr从左到右显示
pre 格式化文本，在这个标签里面回车符换行就真的换行了，按多少个空格就是多少个空格
#include <stdio.h>
//在HTML里尖括号要用实体符号才能显示
// #include
void main(){
print(‘hello world!我还没完全忘记C语言‘);
return 0;
}
<pre>
#include <stdio.h>
//在HTML里尖括号要用实体符号才能显示
// #include <stdio.h>
void main(){
print('hello world!我还没完全忘记C语言');
return 0;
}
</pre>mark 自带背景色 hello world
<mark>hello world</mark>em和strong
em表示内容的强调点
strong表示内容的重要性
链接
img标签
img 这是个单标签。用于引入图片
<img src="图片的地址" alt="尽量写，这个是当图片无法加载出来时，替代图片的文字，通常是描述这张图片的一些信息，特别是服务于视障人士，看不到图片，屏幕阅读器会根据这个属性将信息读出来"/>- 图片地址
- 图片地址可以是网络地址，也可以是相对地址或绝对地址
- 网络地址，也就是把
src链接到网络上的一张图片,比如http://img30.360buyimg.com/pop/s590x470_jfs/t1/103818/1/3435/68180/5ddfce2aE65a56f1a/5cee70f6872aa9d9.jpg.webp，这个是我在写这个的时候在京东轮播图上的某张图片的地址，将这个地址给src="http://img30.360buyimg.com/pop/s590x470_jfs/t1/103818/1/3435/68180/5ddfce2aE65a56f1a/5cee70f6872aa9d9.jpg.webp"那么网页就会出现这张图片，前提是你看的时候，京东还有这张图片 - 相对地址
- 假设你有以个文件夹A，在文件夹A里面有index.html和1.png图片，那么相对地址的引用就是
src="./1.png"这个./是代表这个文件的根目录，也就是文件夹A - 如果是文件夹A里面有文件夹B和C，B里面有1.png，C有index.html，那么相对地址的引用是这样的
src="../B/1.png"这个../是代表上一级目录，index.html文件所在的目录的上一级目录，就是A,然后再来找下面的B，再找B中的图片 ../../就是上一级的上一级目录
- 假设你有以个文件夹A，在文件夹A里面有index.html和1.png图片，那么相对地址的引用就是
- 绝对地址就是，直接从盘符开始，如C://xxx/xxx/1.png
- src应用图片的格式
png-8，png-24，jpeg也就是jpg，gif，svg，webp，base64webp是一种更牛逼的图片格式，在同等质量下，要比jpg小40%- base64严格来说不是图片，它是图片经过转码，变成一堆字符
a标签
a 超链接，链接网页用的，可以链接网址，也可以是自己项目的网页文件
<a href="https://www.baidu.com/">百度</a>这是链接百度的网址
同样的a标签页可以用相对地址或绝对地址，链接自己的html文件
<a href="./login.html">注册</a>一般情况下a标签跳转不会打开新的标签页跳转的，可以通过添加属性，使其打开新的标签页跳转
<a href="https://www.baidu.com/" target="_blank">百度</a>a标签还有一个download，它是让人下载东西的，不过这个属性，现在只有谷歌和火狐支持，其他浏览器都不能用，当然，a标签还有其他的属性，不过没怎么用，就不说了。
<a href="下载地址" download> 图片链接，a标签是特例，虽然是行内元素，但可以包裹块级元素，不只是图片，也可以包裹标题h1-h6。
<a href="某某地址"><img src="图片地址" /></a>还有另外个可能会用到的功能，锚点，这个是页面内的超链接，在页面上点击某个的文本，会直接跳转到该页面关于这个文本设置的锚点，具体代码如下
首先是设置锚点
<a href="#content">锚点A</a>
<a href="#content1">锚点B</a>
br换行，主要让浏览器出现滚动条，让内容到底部，有个表现的效果
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
这里的id属性的值要和你锚点定义的值一样，这样才会滚动到这个地方，网上说id换成name属性也一样，但我试了下没用
<div id="content">
文本A
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div id="content1">
文本B
</div>link标签
link 这个是单标签，定义文档与外部资源的关系，通常是链接CSS样式表的
<link rel="stylesheet" type="text/css" href="theme.css">
href 就是css文件的地址，href="theme.css"和href="./theme.css"没什么区别link写在head里
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="theme.css">
</head>
<body>
</body>
</html>如何在浏览器标签卡里弄上自己的logo
代码如下
<link rel="shortcut icon" href="//static.runoob.com/images/favicon.ico" type="image/x-icon" >
把href的地址换成自己的logo的地址，后缀名要ico的，大小差不多是36px或72px表格标签
table 定义一个表格
th 表头单元格
tr 单元行
td单元格
caption 表格的标题
thead表格的头部
tbod 表格的主体内容
tfoot 表格的脚注
虽然表格的头部，主体内容，脚注不写也没什么影响，但最好还是写
<table>
<caption>表格的标题</caption>
<thead>
<tr>
<th>表头单元格</th>
<th>表头单元格</th>
<th>表头单元格</th>
</tr>
</thead>
<tbody>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">单元格</td>
</tr>
</tfoot>
</table>以上的表格没有边框，要想有边框，只要给table加个border属性即可
<table border="1px">
<caption>表格的标题</caption>
<tr>
<th>表头单元格</th>
<th>表头单元格</th>
<th>表头单元格</th>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
</table>这时因为每个单元格和整个表格都有边框，看起来就是两层边框，所以可以合并边框
给table加上如下样式
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
table{
border-collapse: collapse;
}
</style>
</head>
<body>
<table border="1px" >
<caption>表格的标题</caption>
<tr>
<th>表头单元格</th>
<th>表头单元格</th>
<th>表头单元格</th>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
</table>
<!-- <script type="text/javascript" src="./index.js"></script> -->
</body>
</html>
合并单元格
td的属性colspan
colspan = "3"代表该单元格横跨了三个单元格，包括本身三个，也就是将三个单元格合并
<table border="1px" >
<caption>表格的标题</caption>
<tr>
<th>表头单元格</th>
<th>表头单元格</th>
<th>表头单元格</th>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
<tr>
<td colspan="3">合并单元格</td>
</tr>
</table>有跨列的单元格，自然有跨行的单元格
rowspan ="3"
<table border="1px" >
<caption>表格的标题</caption>
<tr>
<th>表头单元格</th>
<th>表头单元格</th>
<th>表头单元格</th>
</tr>
<tr>
<!-- 因为单元格跨了两行，自己一行，下面一行，所以下面的单元行的一个单元格被占用了 -->
<td rowspan="2">单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
</tr>
</table>表单
from 表单
input 输入框，这是个单标签
textarea 多行输入框，也叫输入域
button 按钮 按钮
select 下拉列表
option 下拉列表的选项
optgroup 下拉列表选项的组
label 标注，主要和单选按钮或复选框一起使用
表单的元素差不多就是这些，不过看上去好像没有单选按钮这些，这不是忘写了，它属于input
表单与表格不同，像input，button，select等虽然被一起归类于表单元素，但它们不需要放在from里面，可以单独出现，但是表格的tr，td一定要放在table里面
表单的主要用途，其实是注册，登录那块，填写相关信息，提交后表单就会传给后台，后台在一顿神操作，最后将处理结果返回给前端处理。
<form action="demo_form.php" method="get">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="提交">
</form>- action
- 这个是提交表单时像何处提交数据，在这里它的值是一个后台文件，就是项目里有这个
php文件，将表单交给这个文件处理，php通过name这个属性获取input输入的值
- 这个是提交表单时像何处提交数据，在这里它的值是一个后台文件，就是项目里有这个
- method
- 这个是表单提交的方式，提交方式主要有两种，get和post
- 它们的区别是，get对数据没有保密，而post对提交的数据会保密
- 类似如下网址是get方式提交的
http:www.xxxxxxx.com?fname="xxx"&lname="sss"- 像这网址?后面的就是表单提交的参数，如果是重要的消息比如用户名密码这些，用get提交的话，也会显示在网址后面，这很明显是不行的，所以就要用post方式提交，就不会有这一大串的字符了。
input的类型
input 这个是个很重要的标签，虽然大部分都叫它输入框，但它的作用不仅仅只是输入框，可以是单选框，复 选框，日期选择器等等，这些取决于它type属性的值
<input type="text" />这是文本输入框
<br />
<input type="password" />这是密码输入框
<br />
<input type="radio" />这是单选按钮
<br />
<input type="checkbox" />这是复选框，也就是多选按钮
<br />
<input type="button" />这是按钮，不过与button这个标签差不多
<br />
<input type="submit" />这是提交按钮，点击后会默认将表单提交，不过如果没有后台提交了也没啥用
<br />
<input type="reset" />这个是重置按钮，就是将表单的输入框的内容全部清空重新填写
<br />
<input type="range" />这个是调节数字的拉杠，就是电脑上调音量的那个控件，不过原生的比较丑，可以自己 以后实现这些功能
<br />
<input type="date" /> 这个是日期选择器
<br />
<input type="time" /> 这个是时间选择器
<br />
type的值很多，不过主要的都在这，其他想了解的，可以去这里看
https://www.runoob.com/tags/att-input-type.html
<br />
而且原生的有些确实美观不怎样，有设计基础，等js学精了，其实可以自己弄一个属于自己的UI库
input的value属性和placeholder属性
<input type="button" value="按钮"/> value是input的是值，在按钮上就是按钮的文本，在text上就是输 入框的文本
<br />
不过按钮的话大多是直接使用这个button这个标签
<br />
<button>按钮</button>
<br />
placeholder 属性 这个是输入框的提示文本
<br />
<input type="text" placeholder="请输入用户名"/>
<input type="passwork" placeholder="请输入密码"/>单选框的用法
<p>
这样写的话，其实和多选没啥区别，两个都可以选中
</p>
男 <input type="radio" /> 女 <input type="radio" />
<p>
加个name属性就行了，属性的值要一样的
</p>
男 <input type="radio" name="sex"/> 女 <input type="radio" name="sex"/>
<p>
属性值不一定是要sex，主要是有见名之意，尽量取英文的，流下没学好英语的泪水，不过因此自己在计算机的词汇量也增多了
</p>
<input type="radio" name="sex1"/> 女 <input type="radio" name="sex1"/> 人妖 <input type="radio" name="sex1"/>
<p>
等到js时候再来说下表单的操控和取值的问题
</p>label的用法
label标签，这主要是和单选框和多选框进行绑定
男 <input type="radio" name="sex"/> 女 <input type="radio" name="sex"/>
<p>
像这样写的话，要点击单选按钮才可以选中，用户体验不太好
</p>
换成这样
<label for="man">男</label>
<input type="radio" name="sex" id="man" value="男"><br>
<label for="wumen">女</label>
<input type="radio" name="sex" id="wumen" value="wumen"><br>
这种的话，点击label的文本，单选按钮也会被选中
label的for属性的值要和input的id属性的值一样，才能生效
当然也可以和多选框绑定，用法是一样的select的用法
只有一个select标签是不够的，它要和option一起用
<select>
<option value="A">下拉选项1</option>
<option value="B">下拉选项2</option>
<option value="C">下拉选项3</option>
<option value="D">下拉选项4</option>
<option value="E">下拉选项5</option>
<option value="这个是送往服务器的值">这里的是浏览器显示的文本，也就是用户看到的文本</option>
</select>
<p>
上面的下拉列表默认显示的是第一个选项，如果要默认选择其他选项，要用selected属性
</p>
<select>
<option value="A">下拉选项1</option>
<option value="B">下拉选项2</option>
<option value="C">下拉选项3</option>
<option value="D" selected >下拉选项4</option>
<option value="E">下拉选项5</option>
</select>
<p>
这样默认显示的就是下拉选项4了
</p>
optgroup的用法
将同类型的option归类为一组
<select>
<optgroup label="动物">
<option value="cat">猫</option>
<option value="dog">狗</option>
</optgroup>
<optgroup label="颜色">
<option value="blue">蓝色</option>
<option value="yellow">黄色</option>
</optgroup>
</select>
<p>
这里的label是属性，和那标签的label没有任何关系，它代表的这个组的文本
</p>textarea的用法
<textarea rows="10" cols="30" placeholder="请填写详细内容">
rows是行，cols是列，综合起来就是这个输入域的宽高了
</textarea>表单控件的常用属性
- required 这个可以用在input和
textarea，表示必填项，不过这个属性IE和safari不支持，考虑兼容性问题，可以用js判断表单的到底有没有完全填写，safari是苹果的浏览器
<textarea rows="10" cols="30" placeholder="请填写详细内容" required>
rows是行，cols是列，综合起来就是这个输入域的宽高了
</textarea>
在这里补充一下，有些属性为什么直接写属性名就可以，不用值呢？因为这个属性是布尔值
<textarea rows="10" cols="30" placeholder="请填写详细内容" required="required">
rows是行，cols是列，综合起来就是这个输入域的宽高了
</textarea>readonly只读属性，不能编辑内容，但可以复制内容，适用input和textarea
<textarea rows="10" cols="30" placeholder="请填写详细内容" readonly>
rows是行，cols是列，综合起来就是这个输入域的宽高了
</textarea>- disabled 禁用，不能编辑也不能复制，基本表单的控件都有这个属性，按钮和下拉列表禁用就无法点击了
<textarea rows="10" cols="30" placeholder="请填写详细内容" disabled>
rows是行，cols是列，综合起来就是这个输入域的宽高了
</textarea>列表
列表分为有序列表，无序列表，自定义列表
有序列表
<ol>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ol>上面的列表的项目符号默认是数字符号，如下所示
- 列表项
- 列表项
- 列表项
本来li标签有个type属性，这个就是用来决定列表项的项目符号的，不过由于已经被废弃了，但其实还是能用，只不过推荐用CSS样式表来修饰这些项目符号
这里简单说下标签li的type的值
<ol>
<li type="1">阿拉伯数字</li>
<li type="A">英文字母</li>
<li type="a">英文字母</li>
<li type="I">罗马数字</li>
<li type="i">罗马数字</li>
</ol>
上面的写法是为了方便写属性的值，真正的写法是这样的
<ol>
<li type="A">列表项</li>
<li type="A">列表项</li>
<li type="A">列表项</li>
<li type="A">列表项</li>
<li type="A">列表项</li>
</ol>
这样会以A,B,C,D这样的无序列表
<ul>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ul>无序列表的项目符号默认为黑色的小圆点
同样也可以用type来改变
<ul>
<li type="disc">列表项</li>
<li type="square">列表项</li>
<li type="circle">列表项</li>
</ul>自定义列表
dl 定义一个自定义列表
dt 项目名称
dd 项目描述
<dl>
<dt>石昊</dt>
<dd>
完美世界的男主，独断万古的荒天帝，然而身边的人都死关了，一个悲剧的男主，如今在上苍之上寻找复活他人的办法。
</dd>
<dt>萧炎</dt>
<dd>
无尽火域，万火焚苍穹的萧斗帝，老实说我并不太喜欢这个人物，可能作者塑造的不好，记得一开始看的时候，主角是作为上班族穿越，后来好像这部分被改掉了，但先入为主的观念，一个成年人，虽然当时身体也才四，五岁，但心理可是成年人，竟然去猥琐一个幼女，幼女的护卫还没发现，这简直就是败笔，不仅如此，性格也不太喜欢，而且自己的许的诺言没有实现，说好的复活他祖宗，到大结局都没复活。。。好吧，角色无罪，一切都是作者的锅，但人物形象没有设计好，这是个事实，而且整本书的剧情，陷入了循环，挨打，变强，装逼打脸，每个大剧情基本是这样，有种审美疲劳的感觉。
</dd>
</dl>结构化标签
header 网页的头部，通常包括网站标志，主导航，全站链接及其搜索框
nav 标记导航，仅对文档中重要的链接群使用
main 页面的主要内容，一个页面只能使用一次，如果是web应用，则包围其主要功能
acticle 定义外部的内容，其中的内容独立于文档的其余部分
section 定义文档中的节，比如章节，页眉或文档中的其他部分
aside 定义其所处内容之外的内容，如侧栏，文章的一组链接，广告，友情链接，相关产品列表等
footer 页脚，当父级是body时，才是整个页面的页脚
以前的布局都是div+css的布局，现在能用语义化标签就用语义化标签，布局也是从语义化标签考虑，虽然div和p都可以显示段落，但p标签是语义化标签，所以选择p标签，如果内容找不到合适的标签，那就用div包裹吧。
媒体标签
媒体标签主要是音频和视频的标签
音频
<!-- autoplay 音频文件加载完成后自动播放音频 control 控制器 这两个可以不使用，但src是一定要用的-->
<audio src="音频地址" autoplay control></audio>视频
<!-- autoplay 视频文件加载完成后自动播放音频 control 控制器 这两个可以不使用，但src是一定要用的-->
<video src="视频的地址" autoplay control></video>其他操作需要用到javaScript就不多说了
画布
这个就是让浏览器拥有绘画的能力，因为要用到javaScript，所以也不多说了，不过这个是可以代替flash的一个方案，也是游戏开发的基础，根据API的不同，可以绘制2d和3d的图像
<canvas>
您的游览器不支持画布
</canvas>框架
在网页中插入网页
<iframe src="网页地址">
</iframe>语义化标签
为什么要是使用语义化标签
- 结构更好，更利于SEO优化
- 维护性高
- 有利于特殊终端的阅读
语义化标签一览
虽然可能不全，但大部分都在这里
| 标签 | 意义 |
|---|---|
| title | 浏览器的标签卡标题 |
| h1~h6 | 分级标题 |
| ol | 有序列表 |
| ul | 无序列表 |
| header | 网页的头部，通常包括网站标志，主导航，全站链接及其搜索框 |
nav |
标记导航，仅对文档中重要的链接群使用 |
| main | 页面的主要内容，一个页面只能使用一次，如果是web应用，则包围其主要功能 |
acticle |
定义外部的内容，其中的内容独立于文档的其余部分 |
| section | 定义文档中的节，比如章节，页眉或文档中的其他部分 |
| aside | 定义其所处内容之外的内容，如侧栏，文章的一组链接，广告，友情链接，相关产品列表等 |
| footer | 页脚，当父级是body时，才是整个页面的页脚 |
| small | 小号字体，指定细则，输入免责声明，注释，著名，版权 |
| strong | 强调文本的重要性 |
| em | 强调文本的内容 |
| mark | 使用黄色突出显示文本 |
| p | 段落 |
| cite | 表示所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题 |
| blockquoto | 快引用 |
| q | 短的引用 |
| time | 定义时间 |
| abbr | 简写 |
| dfn | 定义术语元素，定义必须紧挨着，可以在描述列表dl元素中使用 |
| address | 作者，相关人士或组织的联系信息 |
| del | 移除的内容 |
| ins | 添加的内容 |
| code | 标记代码 |
| meter | 定义已知范围或分数值内的标量测量 |
| progress | 定义进度条 |
两个可能会用到的属性
data-*属性
data-*，*代表任何字符，如data-music，data-id，它可以储存数据，如把每首歌的id作为值给保存到data-id属性里。
contenteditable
让页面可编辑
<div contenteditable>ssss</div>
<ul contenteditable>
<li>sss</li>
<li>sss</li>
<li>sss</li>
</ul>
<p contenteditable>sss</p>以上标签的用法基本就到这里，虽然还有像拼音这些的标签，但不怎么用吧，就没写了，其余的想了解就到w3c或者菜鸟教程那查看吧。
原文地址：https://www.cnblogs.com/tourey-fatty/p/12056390.html