01-HTML语法大全
2017-07-03 本文已影响117人
magic_pill
一、认识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：很强大、很智能。
三、简单标签
单标签
- 注释标签：
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>
<html>
<head>
<script type="text/javascript" src="loadxmldoc.js">
</script>
</head>
<body>
<script type="text/javascript">
xmlDoc=<a href="dom_loadxmldoc.asp">loadXMLDoc</a>("books.xml");
document.write("xmlDoc is loaded, ready for use");
</script>
</body>
</html>
</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）；
-
练习：古诗
