01-HTML语法大全

一、认识html

html：hypertext markup language，超文本标记语言，超链接（实现页面跳转）；
html结构标准：

<!doctype html> //声明文档类型，由渲染引擎解析

<html>  //根标签

<head>  //头部标签，里面的内容是给浏览器/搜索引擎看的
    <title></title> //标题标签
</head>

<body>  //主体标签，给用户、浏览者看
</body>

</html>

html和htm是一样的；
后缀名不能决定文件格式，只能决定文件打开方式；
html标签分类：
- 单标签<!doctype html>;
- 双标签<html></html>、<body></body>、<title></title>
html标签关系
- 包含（嵌套）：<head><title></title><head> 父子关系
- 并列关系：<head></head><body></body> 兄弟姐妹关系

二、开发工具

Dreamweaver：历史悠久，偏设计师使用；
sublime：轻量级的，简单、好学，有好多好用的插件；
- 常用快捷键：

html:xt + tab	html结构代码
tab	补全标签代码
ctrl + shift + d	快速复制一行
ctrl + shift + k	快速删除一行
ctrl + 鼠标左键单击	集体输入
ctrl + h	查找替换
ctrl + f	查找
ctrl + /	注释
ctrl + l	快速选中一行
ctrl + shift + ↑（↓）	快速上移（下移）一行
查看->布局	设置行列

webstorm：很强大、很智能，但是很大，一般电脑使用都会很快起飞。
现在比较流行和推荐使用的是微软推出的 vscode 开发工具，体积小、插件丰富，可以按需安装。

三、简单标签

单标签

注释标签：ctrl + /
换行标签：<br/>，在html5中可以省略/
水平线标签：<hr />

双标签

标题标签：<h1></h1>，取值是h1-h6，一个页面中只能有一个h1。
段落标签：<p>段落内容</p>，特点：上下自动生成空白行；<br/>换行不会生成空白行；
文本标签：<font size="16" color="red" >文本内容</font>，早期做网站时候使用；

文本格式化标签：

加粗：<strong></strong>，<b></b>,工作中建议使用strong；
倾斜：<em></em>，<i></i>,工作中建议使用em；
删除线：<del></del>,<s><s/>，工作中建议使用del；
下划线：<ins></ins>,<u></u>,工作中建议使用ins。
建议使用的都是更具语义化，可读性更强。

图片标签

<img src="" alt="" title="提示文本" width="" height=""/>
- src:图片的来源，必写属性；
- 当鼠标放在图片上时显示title的内容；
- 当图片加载失败时显示alt的内容;
- 如果不设置图片宽高,显示图片默认大小，如果只设置其中一个，会进行等比例缩放，如果两个都设置就会按照设置的大小进行展示。

a标签(超链接)

<a href="" title="" target="">登录</a>
- href存放目标页面的url，为必写属性；
- 鼠标放在超链接上显示title的内容；
- target为页面打开的方式，默认在原页面打开_self，如果设置值为_black，就会打开一个新的页面进行展示。
锚链接
- 首先定义一个锚点：在标签中添加一个id属性；
- 超链接到锚点:<a href="#id属性名">跳转</a>

四、绝对路径和相对路径

相对路径：相对于文件自身出发
- 文件(html文档)和图片在同一个目录(文件夹)，直接写文件名；
- 如果图片在下一级目录里，src就为文件夹名+/+图片名称；
- 如果图片在上一级目录里，scr就是 ../ + 图片名
绝对路径
- 电脑上绝对路径：从电脑盘符开始，如F:\Documents\学习\前端学习\mage.png；
- 互联网上绝对路径：http://...

练习：

四季

五、空链、压缩包下载、超链接的优化写法、特殊字符：

空链：当不知道跳转链接时候使用：<a href="#">空链</a>
压缩包下载，<a href="xxx/mage.rar">压缩包</a>，了解就行，工作中一般不会这样使用。
超链接的优化写法，让页面中所有的标签在点击时都打开新窗口：
```
<head>
    <base target="_blank">
</head>
```
特殊字符：

特殊字符	描述	字符的代码
	空格符	` `
<	小于号	`<`
>	大于号	`>`
&	和号	`&`
￥	人民币	`¥`
©	版权	`©`
®	注册商标	`®`
°	摄氏度	`°`
±	正负号	`±`
×	乘号	`×`
÷	除号	`÷`
²	平方（上标2）	`²`
³	立方（上标3）	`³`

六、中级标签

列表标签

无序列表

<ul type="disc">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

type可以取三个值，square样式为小方块、circle样式为空心小圆点、disc为实心小圆点（默认样式）。

有序列表

<ol type="1" start="3">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ol>

type可以更改标号样式，type可取的值为：1、a、A、i、I等，start设置从哪一个值开始依次往后排序。

定义列表

<dl>
    <dt>小标题</dt>
    <dd>解释标题<dd>
    <dd>解释标题<dd>
    <dd>解释标题<dd>
    <dd>解释标题<dd>
</dl>

音乐标签

<embed src="" hidden="true" />，hidden设置为true时，隐藏音乐播放器，比audio标签多一块黑色的背景。

七、跑马灯：页面自动滚动效果

<marquee height="80" weight="200" bgcolor="red" behavior="alternate" direction="down">...</marquee>
- 中间的内容可以是文字、图片，也可以是由程序生成的文字或图片；
- behavior设置滚动的方式，alternate表示在两端之间来回滚动，scroll表示一端滚动到另一端（会重复），slide表示由一端滚动到另一端（不会重复）；
- direction设置滚动方向，down表示向下滚动，left向左，right向右，up向上；
- loop表示滚动的次数，-1时无限滚动；
- scrollamount设置滚动速度，值越大滚动速度越快；
- 设置背景音乐等。

八、几种HTML结构的快速搭建

html:xt + tab，过渡结构；
html:xs + tab，严格结构；
! + tab，html5标签结构。
说明：各个开发软件会有所区别。

九、高级标签

meta标签

编码格式，在meta标签里面设置charset，英语用ascll、ansi；日文、韩文用Unicode；中文的用gbk、gbk2312；台湾big5（繁体字符）；utf-8支持180到200个国家语言，所以用utf-8基本能解析所有国家语言<meta charset="utf-8">；
关键字：给搜索引擎看，主要用于SEO，<meta name="keywords" content="阳光,帅气,有担当,进步">(逗号使用英语格式的)；
网页描述：在搜索的时候会出现的描述：<meta name="description" content="江苏是一个好地方，有山有人妹子水灵">；
网页重定向：<meta http-equiv="refresh" content="5;http://baidu.com">过5秒之后跳转到设定的页面;
告诉搜索引擎站点的作者：<meta name="author" content="姓名">（不常用）；
<meta name="robots" content="all/none/index/noindex/follow/nofollow">（不常用，了解）：
- all：文件将被检索，且页面上的链接可以被查询；
- none：文件将不被检索，且页面上的链接不可以被查询；
- index：文件将被检索；
- noindex：文件将不被检索，但页面上的链接可以被查询；
- follow：页面上的链接可以被查询；
- nofollow：文件将不被检索，页面上的链接可以被查询。

link标签

链接外部样式表文件<link rel="stylesheet" href="1.css">;
设置网站icon：<meta rel="icon" href="xxx.png">

表格标签

展示数据，是对网页重构（css+div）的一个有益补充；
属性：
- 边框属性：border；
- 表格大小会根据内容自动进行填充，也可以自己设定；
- 单元格之前的距离：cellspacing，默认值为2；
- 内容和边框的距离:cellpadding；
- 对齐方式：align，有三个值：left/right/center,如果给表格设为center，表格居中；如果给tr设置center，一行的内容居中；如果给td设置center，则某一列的内容居中，优先级：td > tr > table
两行三列表格：创建表格可以用快捷方式table>tr*2>td*3

<table border="1" bordercolor="red" width="400" height="200" cellspacing="0" cellpadding="5" align="center" bgcolor="orange">   //表格
    <tr align="center">     //行
        <td>张珊</td>   //列
        <td>24</td>
        <td>工程师</td>
    </tr>

    <tr>
        <td align="center">张珊</td>
        <td>24</td>
        <td>工程师</td>
    </tr>
</table>

表格完整结构：表格拥有完整结构会对SEO更友好，但是没有的话也不要求，在thead等里面设置属性不管用，需要在对应的tr或者td中设置

<table>
    <thead>
        <tr>
            <td>标题</td>
            <td>标题</td>
            <td>标题</td>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>数据</td>
            <td>数据</td>
            <td>数据</td>
        </tr>
        <tr>
            <td>数据</td>
            <td>数据</td>
            <td>数据</td>
        </tr>
    </tbody>

    <tfoot>
        <tr>
            <td>数据</td>
            <td>数据</td>
            <td>数据</td>
        </tr>
        <tr>
            <td>数据</td>
            <td>数据</td>
            <td>数据</td>
        </tr>
    </tfoot>
</table>

给表格添加标题：

<table >
    <caption>表格名称</caption>
    <tr>
        <td>张珊</td>
        <td>24</td>
        <td>工程师</td>
    </tr>

    <tr>
        <td>张珊</td>
        <td>24</td>
        <td>工程师</td>
    </tr>
</table>

单元格合并
- 同一行的单元格合并：

<table >
    <caption>表格名称</caption>
    <tr>
        <td colspan="2">张珊</td>

        <td>工程师</td>
    </tr>

    <tr>
        <td>张珊</td>
        <td>24</td>
        <td>工程师</td>
    </tr>
</table>

同一列单元格合并：

<table >
    <caption>表格名称</caption>
    <tr>
        <td>张珊</td>
        <td>24</td>
        <td rowspan=“2”>工程师</td>
    </tr>

    <tr>
        <td>张珊</td>
        <td>24</td>

    </tr>
</table>

设置列标题：th,会将内容加粗，居中显示

<table >
    <caption>表格名称</caption>
    <tr>
        <th>一月份</th>
        <th>二月份</th>
        <th>三月份</th>
    </tr>

    <tr>
        <td>张珊</td>
        <td>24</td>
        <td>工程师</td>
    </tr>
</table>

垂直方向对齐方式：valign="top/middle/bottom";
细线表格：设置border="1"时，其实单元格之间的线的宽度是2。设置细线表格的思路：设置表格背景色，然后再设置cellspacing="1"。
- 练习：可以试一下建课程表

表单标签

输入信息，收集信息；
表达组成：提示信息、表单控件（输入框）、表单域；

<form action="xxx" method="get/post">
    用户名：<input type="text" name="username">
    密码：<input type="password" name="pwd">
    <input type="submit">
</form>

action:处理信息；
method：有两个值可取，get和post。get：通过地址栏提供（传输）信息，安全性差；post：通过xxx来处理信息，安全性相对较高。

文本输入框
- <input type="text" maxlength="8" readonly="readonly" name="username" value="jiangjiang" placeholder="请输入用户名">
- maxlength：设置输入的最大字符长度；
- readonly：设置输入框为只读状态；
- value：设置默认值；
- placeholder：提示用户进行操作
<input type="text" maxlength="8" disable="disable" name="username">
- disable：输入框没有激活；
- name：给输入框设置名字，以便进行区分；
<input type="password" maxlength="8" disable="disable" name="username">
- 密码输入框：输入的信息会变成暗文，文本输入框的所有属性对密码输入框都有效；
单选框
- <input type="radio" name="sex" checked="checked">男 <input type="radio" name="sex">女
- 一组单选按钮必须要设置同样的name，否则单选无效；
- 通过checked来设置默认选中项；
多选框

<input type="checkbox" name="hobby" checked="checked">喝酒
<input type="checkbox" name="hobby">抽烟
<input type="checkbox" name="hobby">烫头发

多行文本框
<textarea cols="30" rows="10"></textarea>
- cols：控制输入字符的长度；
- rows：控制输入的行数；
文件上传控件
<input type="file">
按钮
- 提交按钮：可以实现信息提交<input type="submit">;
- 普通按钮：不能提交，通常配合js使用<input type="button" value="普通按钮">；
- 图片按钮：可实现信息提交功能<input type="image" src="xxx.jpg">;
- 重置按钮：将信息重置到默认状态<input type="reset">
将表单信息分组
- 将表单内一组的内容放到<field></field>中，表单名称放到<legend></legend>中

<form action="xxx" method="get/post">
    <fieldset>
        <legend>个人信息提交</legend>
        用户名：<input type="text" name="username">
        密码：<input type="password" name="pwd">
        <input type="submit">
    </fieldset>
</form>

表单的其它控件
- 网址输入框：<input type="url">，会要求输入正确的网址格式，但是空也可以提交，以后会用js进行判断；
- 日期控件：<input type="date">；
- 时间控件：<input type="time">；
- 邮件控件：<input type="email">,要求输入正确的邮件格式，但是空也可以提交；
- 数字控件：<input type="number" step="2">，有一个上下的小三角，可以步进，每次调整的值的大小为2；
- 滑块控件：<input type="range" step=20>

下拉列表

普通下拉列表

<select multiple="multiple">
    <option>下拉列表选项1</option>
    <option>下拉列表选项2</option>
    <option selected="selected">下拉列表选项2</option>
</select>

multiple:设置多选；
selected:设置默认选中项，如果不设置，默认选择第一个选项；

分组下拉列表：

<select>
    <optgroup label="江苏">
        <option>苏州</option>
        <option>无锡</option>
        <option>常州</option>
    </optgroup>
    <optgroup label="浙江">
        <option>杭州</option>
        <option>温州</option>
        <option>绍兴</option>
    </optgroup>
</select>

概述详细信息标签

<details>
    <summary>简介</summary>
    发动机卡拉的交罚款了打飞机考虑到九分裤了打手机发开发阶段
</details>

pre 标签

pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符，文本也会呈现为等宽字体。
pre 应用：一个常见应用就是用来表示计算机的源代码。
注：可以导致段落断开的标签（例如 <h2>、<p> 和 <address> 标签)绝不能包含在 <pre> 所定义的块里。尽管有些浏览器会把段落结束标签解释为简单地换行，但是这种行为在所有浏览器上并不都是一样的。
pre 元素中允许的文本可以包括物理样式和基于内容的样式变化，还有链接、图像和水平分隔线。当把其他标签（比如 <a> 标签）放到 <pre> 块中时，就像放在 HTML/XHTML 文档的其他部分中一样即可。请看下面的例子：

<pre>
&lt;html&gt;
&lt;head&gt;
  &lt;script type=&quot;text/javascript&quot; src=&quot;loadxmldoc.js&quot;&gt;
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;script type=&quot;text/javascript&quot;&gt;
    xmlDoc=<a href="dom_loadxmldoc.asp">loadXMLDoc</a>(&quot;books.xml&quot;);
    document.write(&quot;xmlDoc is loaded, ready for use&quot;);
  &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>

在上面的代码中，<pre> 标签中的特殊符号被转换为符号实体，比如 "<" 代表 "<"，">" 代表 ">"。另外，请注意绿色的代码，我们在 <pre> 标签中使用了链接，也就是 <a> 标签。上面这段代码的显示效果如下：
<pre><html>
<head>
<script type="text/javascript" src="loadxmldoc.js">
</script>
</head>
<body>
<script type="text/javascript">
xmlDoc=loadXMLDoc("books.xml");
document.write("xmlDoc is loaded, ready for use");
</script>
</body>
</html></pre>
提示1：制表符（tab）在 <pre> 标签定义的块当中可以起到应有的作用，每个制表符占据 8 个字符的位置。但是我们不推荐使用它，因为在不同的浏览器中，Tab 的实现各不相同。在用 <pre> 标签格式化的文档段中使用空格，可以确保文本正确的水平位置。
提示2：如果您希望使用 <pre> 标签来定义计算机源代码，比如 HTML 源代码，请使用符号实体来表示特殊字符，比如 "<" 代表 "<"，">" 代表 ">"，"&" 代表 "&"。
提示3：在 W3School 中，非常多页面中的源代码实例都是通过 <pre> 标签定义的，您可以参考这些页面，学习如何使用该标签。我们甚至把 <pre> 标签与 <code> 标签结合起来使用，以获得更加精确的语义。

十、标签语义化

标签语义化概念：根据内容的结构化（内容语义化），选择合适的标签（代码语义化）；
标签语义化意义：
- 网页结构合理；
- 有利于SEO和搜索引擎简历良好沟通，有了良好的结构和语义，你的网页内容自然容易被搜索引擎抓取；
- 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）；
- 便于团队开发和维护。
好的语义化的网站标准：去掉样式表文件之后，结构依然很清晰。
标签语义化的注意事项：
- 尽可能少的使用没有语义的标签div和span；
- 在语义不明显时，既可以使用div或者p时，尽量使用p，因为p在默认情况下有上下间距，对兼容特殊终端有利；
- 不要使用纯样式标签，如：font、b、i、s、u等，改用css样式；
- 需要强调的文本，可以包含在strong或者em标签中，strong默认样式是加粗（不要用b），em是斜体（不用i）；
练习：古诗

最后编辑于：2019.07.31 19:45:32

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 203,324评论 5赞 476
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 85,303评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 150,192评论 0赞 337
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,555评论 1赞 273
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,569评论 5赞 365
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,566评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,927评论 3赞 395
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,583评论 0赞 257
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,827评论 1赞 297
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,590评论 2赞 320
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,669评论 1赞 329
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,365评论 4赞 318
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,941评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,928评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,159评论 1赞 259
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 42,880评论 2赞 349
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,399评论 2赞 342

特殊字符	描述	字符的代码
	空格符	` `
<	小于号	`<`
>	大于号	`>`
&	和号	`&`
￥	人民币	`¥`
©	版权	`©`
®	注册商标	`®`
°	摄氏度	`°`
±	正负号	`±`
×	乘号	`×`
÷	除号	`÷`
²	平方（上标2）	`²`
³	立方（上标3）	`³`

特殊字符	描述	字符的代码
	空格符	` `
<	小于号	`<`
>	大于号	`>`
&	和号	`&`
￥	人民币	`¥`
©	版权	`©`
®	注册商标	`®`
°	摄氏度	`°`
±	正负号	`±`
×	乘号	`×`
÷	除号	`÷`
²	平方（上标2）	`²`
³	立方（上标3）	`³`

01-HTML语法大全

一、认识html

二、开发工具

三、简单标签

单标签

双标签

文本格式化标签：

图片标签

a标签(超链接)

四、绝对路径和相对路径

练习：

五、空链、压缩包下载、超链接的优化写法、特殊字符：

六、中级标签

列表标签

音乐标签

七、跑马灯：页面自动滚动效果

八、几种HTML结构的快速搭建

九、高级标签

meta标签

link标签

表格标签

表单标签

下拉列表

概述详细信息标签

pre 标签

十、标签语义化

推荐阅读更多精彩内容

特殊字符	描述	字符的代码
	空格符	` `
<	小于号	`<`
>	大于号	`>`
&	和号	`&`
￥	人民币	`¥`
©	版权	`©`
®	注册商标	`®`
°	摄氏度	`°`
±	正负号	`±`
×	乘号	`×`
÷	除号	`÷`
²	平方（上标2）	`²`
³	立方（上标3）	`³`