课程地址

HTML基础–基础标签

基础标签学习

H系列标签(Header 1~Header 6)

作用:
- 用于给文本添加标题语义
格式:
- <h1>xxxxxx</h1>
注意点:
- H标签是用来给文本添加标题语义的, 而不是用来修改文本的样式的
- H标签一共有6个, 从H1~H6, 最多就只能到6, 超过6则无效
- 被H系列标签包裹的内容会独占一行
- 在H系列的标签中, H1最大, H6最小
- 在企业开发中, 一定要慎用H系列的标签, 特别是H1标签. 在企业开发中一般情况下一个界面中只能出现一个H1标签(和SEO有关)

P标签(Paragraph)

作用:
- 告诉浏览器哪些文字是一个段落
格式:
- <p>xxxxxxxx</p>
注意点:
- 在浏览器中会单独占一行

Hr标签(Horizontal Rule)

作用:
- 在浏览器上显示一条分割线
格式:
- <hr />
注意点:
- 在浏览器中会单独占一行
- 通过我的观察发现HR标签可以写/也可以不写/, 如果不写/那么就是按照HTML的规范来编写, 如果写上/那么就是按照XHTML的规范来编写.但是在HTML5中, 由于HTML5兼容HTML和XHTML所有写不写都可以.那么以后我们在做前端开发时到底写还是不写呢? 按照高级开发工具的提示来写即可.
- 由于hr标签是用来修改样式的, 所以不推荐使用. 今后开发中添加水平线一般都使用CSS盒子来做

HTML注释(Annotation)

什么是注释?
- 注释是在所有计算机语言中都非常重要的一个概念，从字面上看，就是注解、解释的意思
- 注释可以用来解释某一段程序或者某一行代码是什么意思，方便直接或程序员之间的交流
为什么要使用注释?
- 适当的注释，能够让我们的程序更加可读，所以用中文提示自己，这里的程序是干什么的
注释格式

1 2	<!--被注释的内容-->

注意点:
- 被注释的内容不会在浏览器中显示, 注释是写给我们自己看的
- 注释不能嵌套使用

1 2	<!--<!--被注释的内容-->-->

快捷键: ctrl + /

img标签(image)

作用: 在网页上插入一张图片
格式: [图片上传失败...(image-fd0503-1522164219949)]
标签的属性
- 写在标签中K=”V”这种格式的文本我们称之为标签属性

属性名称	作用
src(source)	告诉浏览器需要`插入`的图片路径, 以便于浏览器到该路径下找到需要插入的图片
alt(alternate)	规定图像的替代文本, `只有`在src指定的路径下`找不到图片`,才会显示alt指定的文本
title	悬停文本(介绍这张图片, 只有在鼠标移动到图片上时才会显示)
height	设置图片显示的高度
width	设置图片显示的宽度

注意点:
- img标签添加的图片默认不是占一整行空间
- 如果想让图片等比拉伸, 只写高度或者宽度即可

br标签(Break)

作用:
- 让内容换行
格式:
- <br/>
注意点:
- br的意思是不另起一个段落进行换行, 而网页中99.99%需要换行时都是因为另起了一个段落, 所以应该用p来做

相对路径和绝对路径

图片路径分为两种, 一种是绝对路径, 一种是相对路径, 我们重点学习相对路径, 因为在企业级开发中没有人使用绝对路径
绝对路径
- 从电脑的具体盘符开始寻找我们需要的资源
- [图片上传失败...(image-272290-1522164219949)]
- 以上代码表示在F盘下查找lnj文件夹, 然后在lnj文件夹下查找girl.png图片
相对路径
- 一个文件相对于另外一个文件的位置寻找我们需要的资源
- [图片上传失败...(image-2aceec-1522164219949)]
- 假设html文件和girl.png都在lnj文件夹下, 以上代码表示在lnj文件夹下查找girl.png图片
为什么没人使用绝对路径?
- 可以移植性太差.
什么是可移植性?
- 可以简单的理解为把写到的代码拷贝到另外一台电脑上是否能够正常运行
为什么绝对路径可移植性差?
- 假如我编写的html文件放在我电脑的 F:/lnj 目录下, html文件中用到的图片放在F:/lnj/images目录下, 我给src指定的绝对路为F:/lnj/images/girl.png. 那么将来我将整个lnj文件夹拷贝给你, 如果你将lnj文件夹放在非F盘下, 那么将无法显示图片
- 例如你存放在C盘根目录, 那么图片的绝对路径会变为C:/lnj/images/girl.png, 而src会去F盘找, 所以不会显示
- 你只有将lnj文件夹存放在F盘根目录下时图片才会正常运行, 这就叫做可移植性不好
为什么相对路径可移植性好?
- 同上, 如果src指定的路径为images/girl.png, 那么无论你拷贝到那个盘, 哪个文件夹. 系统都只会在当前文件夹中的images下去查找图片, 不会受到盘符和存储位置的影响, 只要保证页面和图片位置的相对关系不变就不会影响到图片的显示
相对路径几种查找方式
- 同级
  - 直接编写, 例如: girl.png
  - 加上./ 编写, 例如./girl.png
  - ./代表当前目录, ./girl.png代表在当前目录下查找
- 下级
  - 直接编写, 例如abc/girl.png
  - 加上./ 编写, 例如./abc/girl.png
  - 相对当前目录有几个文件夹,就在后面依次补全几个文件夹名称即可, 例如 abc/bbb/ccc/ddd/girl.png或./abc/bbb/ccc/ddd/girl.png
- 上级
  - ../代表访问上级目录
  - 假设a文件夹下面有b文件夹, 图片存放在a文件夹中, html文件存放在b文件夹中, 那么路径为../girl.png
  - 因为html文件在b文件夹中, 所以路径是相对于b文件夹的, 所以../代表访问b文件夹的上一级目录, b文件夹的上一级目录是a文件夹, 所以../girl.png就代表在a文件夹查找girl.png
注意事项:
- 相对路径不会出现这种格式aaa/../bbb/girl.png
- 虽然可以显示, 但是企业开发中千万不要这么写

a标签(anchor)

格式: <a href="http://www.it666.com">江哥博客</a>
作用: 用于从一个页面链接到另一个页面
注意事项:
- 在a标签之间一定要写上文字, 如果没有, 那么在页面上找不到这个标签
- a标签也叫做超级链接或超链接
a标签的属性

属性名称	作用
href(hypertext reference)	指定跳转的目标地址
target	告诉浏览器是否保留原始界面, _blank保留, _self不保留
title	悬停文本(介绍这个链接, 只有在鼠标移动到超链接上时才会显示)

base标签和a标签结合使用
- 如果每个a标签都想在新页面中打开,那么逐个设置a标签的target属性比较麻烦, 这时我们可以使用base和a标签结合的方式,一次性设置有a标签都在新页面中打开
- 格式: <base target="_blank" />
注意事项:
- base必须嵌套在head标签里面
- 如果标签上指定了target,base中也指定了target,那么会按照标签上指定的来执行
a标签其它用法
- 假链接(本质是跳转到当前页面)
  - 格式<a href="#">江哥博客</a>
  - 格式<a href="javascript:">江哥博客</a>
- 跳转到当前页面指定位置(锚点链接)
  - 2.1.格式<a href="#location">跳转到指定位置</a>
  - 2.2.在页面的指定位置给任意标签添加一个id属性
    - 例如 <p id="location">这个是目标</p>
- 跳转到指定页面的指定位置
  - 格式: <a href="01-锚点链接.html#location">跳转到指定位置</a>
  - 只需要在01-锚点链接.html页面添加一个id位置即可
- 下载(极力不推荐使用)
  - 例如<a href="girl.zip">下载福利资源<a/>

HTML基础–列表标签

列表标签

无序列表(unordered list)

作用: 给一堆内容添加无序列表语义(一个没有先后顺序整体), 列表中的条目是不分先后
格式:
- li 英文是 list item, 翻译为列表项

<h4>选择居住城市(CN)</h4>
<ul>
    <li>北京</li>
    <li>上海</li>
    <li>广州</li>
    <li>铁岭</li>
</ul>

ul应用场景:
- 导航条
- 商品列表等
- 新闻列表
注意事项:
- 这里指的无序是指对于主体来说内容没有先后之分, 例如主题是”选择居住城市(CN)”北京上海都是中国的城市, 无论谁放在前面它都还是中国的城市的. 如果标题改为”中国雾霾排行”, 那么就必须有严格的排名,北京必须写在前面
- 浏览器会给无需列表自动添加先导符号但是一定一定千万千万要记住, ul的作用并不是给文字添加小圆点, 而是增加无序列表的语义
  - 其实ul还有一个type属性, 可以修改先导符号的样式, 取值有disc、square、circle几种
  - 但是由于样式将来都是通过css来完成, 所以这里就不给大家介绍了
- ul是一个组标签, 一定是一坨一坨的出现, 也就是说li标签不能单独存在, 必须包裹在ul里面
- 由于ul和li是一个整体, 所以ul里面不推荐包裹其它标签, 永远记住ul里面最好只写li标签
- 虽然ul中推荐只能写li标签, 但是li标签是一个容器标签, li标签中可以添加任意标签, 甚至可以添加ul标签

<ul>
        <li>
            好吃的
            <ul>
                <li>牛奶</li>
                <li>面包</li>
            </ul>
        </li>
        <li>
            日用的
            <ul>
                <li>毛巾</li>
                <li>牙膏</li>
            </ul>
        </li>
    </ul>

有序列表(ordered list)

作用: 给一堆内容添加有序列表语义(一个有顺序整体), 列表中的条目有先后之分
格式:

<h4>中国房价排行</h4>
<ol>
    <li>北京</li>
    <li>上海</li>
    <li>广州</li>
    <li>铁岭</li>
</ol>

ol应用场景:
- xxx排行榜
- 其实ol应用场景并不多, 因为能用ol做的用ul都能做
注意事项:
- ol和ul就是语义不一样，怎么使用都是一样的以及注意点都一样
- 其实ul还有两个常见属性start、type属性, 可以修改先导符号的样式和序号
- 但是由于样式将来都是通过css来完成, 所以这里就不给大家介绍了

定义列表(definition list)

作用: 给一堆内容添加列表语义, 通过dt罗列出列表的条目, 然后再通过dd给每个条目进行相应的描述
格式:
- dt英文definition title, 翻译为定义标题
- dd英文definition description, 翻译为定义描述信息

<dl>
    <dt>北京</dt>
    <dd>国家的首都, 看升国旗的地方</dd>
    <dt>上海</dt>
    <dd>魔都, 遍地是黄金的地方</dd>
</dl>

dl应用场景:
- 网站底部相关信息
- 但凡看到一堆内容都是用于描述某一个内容的时候就要想到dl

注意事项:
- dl是一个组标签, 一定是一坨一坨的出现, 也就是说dt和dd标签不能单独存在, 必须包裹在dl里面
- 由于dl和dt、dd是一个整体, 所以dl里面不推荐包裹其它标签
- dd和dt和li标签一样是容器标签, 里面可以添加任意标签
- 定义列表非常灵活, 可以给一个dt配置多个dd, 但是最好不要出现多个dt对应一个dd, dd的语义是描述离它最近的一个dt, 所以其它dt相当于没有描述, 而定义列表存在的意义就是既可以列出每一个条目又可以对每一个条目进行描述
- 定义列表非常灵活, 可以将多个dt+dd组合拆分为多个dl

HTML基础–表格标签

表格标签

在过去表格标签用的非常非常的多, 绝大多数的网站都是使用表格标签来制作的, 也就是说表格标签是一个时代的代表
- http://2004.sina.com.cn
作用:以表格形式将数据显示出来, 当数据量非常大的时候, 表格这种展现形式被认为是最为清晰的一种展现形式
格式:
- table定义表格
- tr定义行
- td定义单元格

<!--先定义一个表格, 然后通过tr告诉浏览器这个表格中一共有多少行, 然后再通过td告诉浏览器这一行中一共有多少个元素(一共有多少列)-->
<table>
    <tr>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>

表格中的属性

border: 默认情况下表格的边框宽度为0看不到, 通过border属性给表格指定边框宽度
width: 默认情况下表格的宽度是由内容自动计算出来的, 可以通过width属性指定表格的宽度
height:默认情况下表格的高度是由内容自动计算出来的, 可以通过height属性指定表格的高度
cellspacing: 外边距. 默认情况下单元格之间有2个像素的间隙, 可以通过cellpadding指定表格之间的间隙
cellpadding: 内边距. 默认情况下单元格边缘距离内容有1个像素的内边距, 可以通过cellpadding属性指定单元格边缘和内容之间的内边距
align: 规定表格相对周围元素的对齐方式, 它的取值有center、left、right
- 给table设置align属性, 是让表格在浏览器中居左/居右/居中
- 给tr设置align属性, 是让当前行中所有内容居左/居右/居中
- 给td设置align属性,是让当前单元格中所有内容居左/居右/居中
- 该属性仅仅作为了解, 企业开发中用css代替, 因为HTML仅仅用于说明语义
- 如果td中设置了align属性, tr中也设置了align属性, 那么单元格中的内容会按照td中设置的来对齐
valign: 规定表格相对周围元素的对齐方式, 它的取值有center、left、right
- 给table设置valign属性, 无效
- 给tr设置valign属性, 是让当前行中所有内容居上/居中/居下
- 给td设置valign属性,是让当前单元格中所有内容居上/居中/居下
- 如果td中设置了valign属性, tr中也设置了valign属性, 那么单元格中的内容会按照td中设置的来对齐
bgcolor:规定表格的背景颜色
- 给table设置bgcolor属性, 是给整个表格设置背景颜色
- 给tr设置bgcolor属性, 是给当前行设置背景颜色
- 给td设置bgcolor属性, 是给当前单元格设置背景颜色
- 该属性仅仅作为了解, 企业开发中用css代替, 因为HTML仅仅用于说明语义

表格中的其它标签

表单中有两种类型的单元格, 一种是标准单元格td, 一种是表头单元格th
th标签: 给每一列设置标题, 单元格中的内容会自动加粗，居中
caption标签:给整个表格设置标题
- 一定要嵌套在talbe标签内部才有效

<table bgcolor="black" cellspacing="1px" width="800px" align="center">
    <caption>
        <h2>今日小说排行榜</h2>
    </caption>
    <tr bgcolor="#a9a9a9">
        <th>排名</th>
        <th>关键词</th>
        <th>趋势</th>
        <th>今日搜索</th>
        <th>最近七日</th>
        <th>相关链接</th>
    </tr>
    <tr bgcolor="white" align="center">
        <td>1</td>
        <td align="left">暴走大事件</td>
        <td>
            ![](images/up.jpg)
        </td>
        <td>623557</td>
        <td>4088311</td>
        <td>
            <a href="#">贴吧</a>
            <a href="#">图片</a>
            <a href="#">百科</a>
        </td>
    </tr>
</table>

表格的结构

thead标签:用来存放当前列的表头, 如果没有加css页面默认将表头中的高度设置变小
tbody标签:一般用来存放页面中的主体数据, 如果不写会自动加上
tfoot标签:用来存放表格的页脚（脚注或表注), 如果没有加css页面默认将表头中的高度设置变小, 一般不会出现

<table>
    <caption>表格的标题</caption>
    <thead>
        <tr>
            <th>每一列的标题</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>数据</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>数据</td>
        </tr>
    </tfoot>
</table>

表格结构的意义主要是用于SEO, 便于搜索引擎指定哪部分的内容是需要抓取的重要内容, 一般情况下搜索引擎会优先抓取tbody中的内容
由于有一部分浏览器对talbe的这种结构支持不是很好, 所以在企业开发中一般都不用严格的按照这种结构来编写

HTML基础–表单标签

表单标签

作用: 用于收集用户信息, 让用户填写、选择相关信息
格式:

<form>
    所有的表单内容，都要写在form标签里面
</form>

注意事项:
- 所有的表单内容，都要写在form标签里面
- form标签中有两个比较重要的属性action和method, 但就现目前大家的知识储备而言暂时无法理解, 所以放到后面的课程中讲解

input标签

如果说td是表格最核心的标签, 那么input就是表单最核心的标签. nput标签有一个type属性, 这个属性有很多类型的取值, 取值的不同就决定了input标签的功能和外观不同
明文输入框
- 作用: 用户可以在输入框内输入内容
- 账号:<input type="text"/>
暗文输入框
- 作用: 用户可以在输入框内输入内容
- 密码:<input type="password"/>
给输入框设置默认值
- 账号:<input type="text" value="123"/>
- 密码:<input type="password" value="123"/>
规定输入字段中的字符的最大长度
- 账号: <input type="text" name="fullname" maxlength="8" />
单选框(radio)
- 作用: 用户只能从众多选项中选择其中一个
- 单选按钮，天生是不互斥的，如果想互斥，必须要有相同的name属性

<input type="radio" name="xingbie" /> 男
<input type="radio" name="xingbie" /> 女
<input type="radio" name="xingbie" /> 妖

多选框(checkbox)
- 作用: 用户只能从众多选项中选择多个
- 复选框，最好也是有相同的name（虽然他不需要互斥，但是也要有相同的name）

<input type="checkbox" name="aihao"/> 篮球
<input type="checkbox" name="aihao"/> 足球
<input type="checkbox" name="aihao"/> 棒球

给单选、多选设置默认值
- 指定radio和checkbox默认值, 前提是同一组内容必须设置相同name属性

    <input type="radio" name="xingbie" checked="checked"/> 男
    <input type="radio" name="xingbie" /> 女
    <input type="radio" name="xingbie" /> 妖

<input type="checkbox" name="aihao" checked="checked"/> 篮球
<input type="checkbox" name="aihao" checked="checked"/> 足球
<input type="checkbox" name="aihao"/> 棒球

label标签
- 作用: label标签不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性
- 注意事项:
  - 表单元素要有一个id，然后label标签就有一个for属性，for属性和id相同就表示绑定了
  - 所有表单元素都可以通过label绑定

<!--给文本框添加绑定-->
<label for="account">账号:</label>
<input type="text" id="account" />

<!--给单选框添加绑定-->
<input type="radio" name="sex" id="man" /> <label for="man">男</label>

<!--给多选框添加绑定-->
<input type="checkbox" id="basketball" />
<label for="basketball">篮球</label>

按钮
- 作用: 定义可点击按钮（多数情况下，用于通过 JavaScript 启动脚本）
- <input type="button" value="点我丫" />
图片按钮
- 作用:定义图像形式的提交按钮
- <input type="image" src="lnj.jpg" />
重置按钮
- 作用: 定义重置按钮。重置按钮会清除表单中的所有数据
- <input type="reset" />
- 注意事项:
  - 这个按钮不需要写value自动就有“重置”文字
  - reset只对form表单中表单项有效果
提交按钮
- 作用:定义提交按钮。提交按钮会把表单数据发送到action属性指定的页面
- <input type="submit" />
- 注意事项:
  - 这个按钮不需要写value自动就有“提交”文字
  - 要想通过submit提交数据到服务器, 被提交的表单项都必须设置name属性
  - 默认明文传输(GET)不安全, 可以将method属性设置为POST改为非明文传输(学到Ajax再理解)
隐藏域
- 作用: 定义隐藏的输入字段
- <input type="hidden">
- 暂时不用掌握, 在Ajax中对数据的CRUD操作有非常大的作用
取色器
- <input type="color">
- HTML5中input类型增加了很多type类型, 例如color、date但是都不兼容, 后面讲到浏览器兼容时会重点讲解
日期选择器
- <input type="date">
- HTML5中input类型增加了很多type类型, 例如color、date但是都不兼容, 后面讲到浏览器兼容时会重点讲解

数据列表

作用: 给输入框绑定待选项
格式:

datalist>
    <option>待选项内容</option>
</datalist>

如何给输入框绑定待选列表
- 搞一个输入框
- 搞一个datalist列表
- 给datalist列表标签添加一个id
- 给输入框添加一个list属性,将datalist的id对应的值赋值给list属性即可

请输入你的车型: <input type="text" list="cars">

<datalist id="cars">
    <option>奔驰</option>
    <option>宝马</option>
    <option>奥迪</option>
    <option>路虎</option>
    <option>宾利</option>
</datalist>

多行文本框(文本域)

作用: textarea标签用于在表单中定义多行的文本输入控件
- cols属性表示columns“列”, 规定文本区内的可见宽度
- rows属性表示rows“行”, 规定文本区内的可见行数
格式:

1 2	<textarea cols="30" rows="10">默认</textarea>

注意点:
- 可以通过cols和rows来指定输入框的宽度和高度
- 默认情况下输入框是可以手动拉伸的

    <!--禁止手动拉伸-->
<style type="text/css">
    textarea{
        resize: none;
    }
</style>

下拉列表

作用: select标签和ul、ol、dl一样，都是组标签. 用于创建表单中的待选列表, 可以从选择某一个带选项
格式:

选择籍贯:
<select>
    <option>北京</option>
    <option>河北</option>
    <option>河南</option>
    <option>山东</option>
    <option>山西</option>
    <option>湖北</option>
    <option>贵州</option>
</select>

给下拉列表设置默认值
- 和radio、checkbox一样select也可以设置默认值, 通过selected属性设置

<select>
    <option>北京</option>
    <option>河北</option>
    <option>河南</option>
    <option>山东</option>
    <option>山西</option>
    <option>湖北</option>
    <option selected="selected">贵州</option>
</select>

给下拉列表添加分组

<select>
    <optgroup label="北京市">
        <option>海淀区</option>
        <option>昌平区</option>
        <option>朝阳区</option>
    </optgroup>
        <optgroup label="广州市">
        <option>天河区</option>
        <option>白云区</option>
    </optgroup>
    <option selected="selected">贵州</option>
</select>

HTML基础–多媒体标签

video标签

作用: 播放视频
格式1:

1
2
3

<video src="">
</video>

video标签的属性
- src: 告诉video标签需要播放的视频地址
- autoplay: 告诉video标签是否需要自动播放视频
- controls: 告诉video标签是否需要显示控制条
- poster: 告诉video标签视频没有播放之前显示的占位图片
- loop: 告诉video标签循环播放视频. 一般用于做广告视频
- preload: 告诉video标签预加载视频, 但是需要注意preload和autoplay相冲, 如果设置了autoplay属性, 那么preload属性就会失效
- muted:告诉video标签视频静音
- width/height: 和img标签中的一模一样
格式2

<video>
    <source src="" type=""></source>
    <source src="" type=""></source>
</video>

第二种格式存在的意义
- 由于视频数据非常非常的重要, 所以五大浏览器厂商都不愿意支持别人的视频格式, 所以导致了没有一种视频格式是所有浏览器都支持的这个时候W3C为了解决这个问题, 所以推出了第二个video标签的格式
- ideo标签的第二种格式存在的意义就是为了解决浏览器适配问题. video 元素支持三种视频格式, 我们可以把这三种格式都通过source标签指定给video标签, 那么以后当浏览器播放视频时它就会从这三种中选择一种自己支持的格式来播放
注意点:
- 当前通过video标签的第二种格式虽然能够指定所有浏览器都支持的视频格式, 但是想让所有浏览器都通过video标签播放视频还有一个前提条件, 就是浏览器必须支持HTML5标签, 否则同样无法播放
- 在过去的一些浏览器是不支持HTML5标签的, 所以为了让过去的一些浏览器也能够通过video标签来播放视频, 那么我们以后可以通过一个JS的框架叫做html5media来实现

audio标签

作用: 播放音频
格式:

<audio src="">
</audio>

<audio>
    <source src="" type="">
</audio>

注意点:
- audio标签的使用和video标签的使用基本一样, video中能够使用的属性在audio标签中大部分都能够使用, 并且功能都一样. 只不过有3个属性不能用, height/width/poster

详情和概要标签

作用:利用summary标签来描述概要信息, 利用details标签来描述详情信息
默认情况下是折叠展示, 想看见详情必须点击
格式:

<details>
    <summary>概要信息</summary>
    详情信息
</details>

marquee标签

作用: 跑马灯效果

格式:

1	<marquee>内容</marquee>

属性:
- direction: 设置滚动方向 left/right/up/down
- scrollamount: 设置滚动速度, 值越大就越快
- loop: 设置滚动次数, 默认是-1, 也就是无限滚动
- behavior: 设置滚动类型 slide滚动到边界就停止, alternate滚动到边界就弹回
注意点:
- marquee标签不是W3C推荐的标签, 在W3C官方文档中也无法查询这个标签, 但是各大浏览器对这个标签的支持非常好

HTML中被废弃的标签

– 由于HTML现在只负责语义而不负责样式.但是HTML一开始有一部分标签连样式也包揽了, 所以这部分标签都被废弃了

b、u、i、s
以上标签自己带有样式, 有浓厚的样式作用, 今后一般都只作为CSS钩子使用
原则: 不到万不得已,切记不要使用如上标签. 大家可以到BAT的网站查看源代码, 几乎看不到以上标签

b(Bold)作用: 将文本字体加粗
- 格式:<b>将文本字体加粗</b>
u(Underlined)作用: 为文本添加下划线
- 格式:<u>为文本添加下划线</u>
i(Italic)作用: 显示斜体文本效果
- 格式:<i>显示斜体文本效果</i>
s(Strikethrough)作用: 为文本添加删除线
- 格式:<s>为文本添加删除线</s>
为了弥补 b、u、i、s标签的不足, W3C又推出了一组新的标签, 这些标签在显示上看似和buis没什么区别, 但是在语义上却有重大区别
- strong作用: 着重内容
  - 格式:<strong>着重内容</strong>
- ins(Inserted)作用: 新插入的文本
  - 格式:<ins>新插入的文本</ins>
- em(Emphasized)作用:强调内容
  - 格式:<em>强调内容</em>
- del(Deleted)作用: 已删除的文本
  - 格式:<del>已删除的文本</del>
- 其它更多详见维基百科

HTML实体

我们想在页面上输出<h1>这些字符，但是HTML认为这是一个标签, 所以如果需要输出一些特殊的字符需要通过字符实体来实现
lt是英语less than 小于的意思, <可以在页面上输出一个小于符号
gt是英语greater than 大于的意思, >可以在页面上输出一个大于符号
html中对空格，缩进，换行不敏感，如果同时出现多个空格缩进或者执行，页面只会把它们当作一个空格来解析。所以想要在html中输出空格必须使用来实现, 一个就代表一个空格
- html对中文空格敏感, 也就是说可以显示中文空格, 但是不推荐这样使用
- 是英语non-breaking spacing, 翻译为不打断空格的意思

显示结果	描述	实体名称
	空格
<	小于号	`<`
>	大于号	`>`
©	版权	`©`
®	注册商标	`®`
™	商标	`™`
&	和号	`&`
“	引号	`"`
‘	撇号	`'`
￠	分	`¢`
£	镑	`£`
¥	日圆	`¥`
€	欧元	`€`
§	小节	`§`
×	乘号	`×`
÷	除号	`÷`

HTML基础-meta其它类型

meta其它类型

Keywords类型

作用: 告诉搜索引擎当前网页的关键词, 在SEO中非常重要, 能够提高搜索命中率, 让别人更容易找到你
格式: <meta name="keywords" content="IT前言技术、iOS技术、HTML5技术、Android技术" />

Descriiption类型

作用: 告诉搜索引擎当前网页的主要内容, 在SEO中非常重要, 当别人在搜索引擎中搜索到你的网站时会自动作为对你网站的描述信息展示给用户, 能够提高搜索命中率, 让别人更容易找到你
格式: <meta name="description" content="江哥热爱于IT前言技术、iOS技术、HTML5技术、Android技术研究" />

Author类型

作用: 告诉搜索引擎当前网页的作业, install B专用
格式: <meta name="author" content="Jonathan_Lee" />

Refresh类型

作用: 告诉浏览器多久自动刷新一次页面并指向新页面, 常用于新老域名交替时, 访问老域名自动跳转到新域名, 或用语一些需要定时刷新的聊天室等.
格式: <meta http-equiv="Refresh" content="2；URL=http://www.baidu.com/">

Robots类型

作用: 告诉搜索引擎当前网页的作业, 写给网络爬虫看的内容
格式: <meta name="robots" content="all|none|index|follow|noindex|nofollow" />
- index: 告诉搜索引擎允许抓取当前页面
- noindex:告诉搜索引擎不允许抓取当前页面
- follow: 告诉搜索引擎可以从当前页面上找到链接，然后继续访问抓取下去
- nofollow:告诉搜索引擎不允许从当前页面上找到链接, 拒绝其继续访问
- all: 告诉搜索引擎允许抓取当前页面, 并且允许从此页找到链接继续访问
- none: 告诉搜索引擎不允许抓取这个页面,并且不允许从此页找到链接、拒绝其继续访问
常见组合
- <META NAME="ROBOTS" CONTENT="INDEX,FOLLOW">：可以抓取本页，而且可以顺着本页继续索引别的链接
  - 有可以写成<META NAME="ROBOTS" CONTENT="ALL">
- <META NAME="ROBOTS" CONTENT="NOINDEX,FOLLOW">：不许抓取本页，但是可以顺着本页抓取索引别的链接
- <META NAME="ROBOTS" CONTENT="INDEX,NOFOLLOW">：可以抓取本页，但是不许顺着本页抓取索引别的链接
- <META NAME="ROBOTS" CONTENT="NOINDEX,NOFOLLOW">：不许抓取本页，也不许顺着本页抓取索引别的链接。
- 注意事项:
  - 不要把两个对立的反义词写到一起，例如
  - 例如<META NAME="ROBOTS" CONTENT="INDEX,NOINDEX">

李南江2：HTML学习-基础、列表、表格、表单、多媒体标签+Meta其它类型

HTML基础–基础标签

基础标签学习

H系列标签(Header 1~Header 6)

P标签(Paragraph)

Hr标签(Horizontal Rule)

HTML注释(Annotation)

img标签(image)

br标签(Break)

相对路径和绝对路径

a标签(anchor)

HTML基础–列表标签

列表标签

无序列表(unordered list)

有序列表(ordered list)

定义列表(definition list)

HTML基础–表格标签

表格标签

表格中的属性

表格中的其它标签

表格的结构

HTML基础–表单标签

表单标签

input标签

数据列表

多行文本框(文本域)

下拉列表

HTML基础–多媒体标签

video标签

audio标签

详情和概要标签

marquee标签

HTML中被废弃的标签

HTML实体

HTML基础-meta其它类型

meta其它类型

Keywords类型

Descriiption类型

Author类型

Refresh类型

Robots类型