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：很强大、很智能。

三、简单标签

单标签

注释标签：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>

十、标签语义化

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

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

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

HTML语法大全

HTML语法大全

一、认识html

二、开发工具

三、简单标签

单标签

双标签

文本格式化标签：

图片标签

a标签(超链接)

四、绝对路径和相对路径

练习：

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

六、中级标签

列表标签

音乐标签

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

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

九、高级标签

meta标签

link标签

表格标签

表单标签

下拉列表

概述详细信息标签

十、标签语义化

猜你喜欢

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