基础标签的使用

列表标签

无序列表(unordered list)

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

<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标签

有序列表(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

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)

作用:

告诉浏览器哪些文字是一个段落
格式:

xxxxxxxx

注意点:

在浏览器中会单独占一行

Hr标签(Horizontal Rule)

作用:

在浏览器上显示一条分割线
格式:

---

注意点:

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

HTML注释(Annotation)

什么是注释?

注释是在所有计算机语言中都非常重要的一个概念，从字面上看，就是注解、解释的意思
注释可以用来解释某一段程序或者某一行代码是什么意思，方便直接或程序员之间的交流
为什么要使用注释?

适当的注释，能够让我们的程序更加可读，所以用中文提示自己，这里的程序是干什么的
注释格式

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

快捷键: ctrl + /

img标签(image)

作用: 在网页上插入一张图片

格式: [图片上传失败…(image-fd0503-1522164219949)]

标签的属性

写在标签中K="V"这种格式的文本我们称之为标签属性
属性名称 作用
src(source) 告诉浏览器需要插入的图片路径, 以便于浏览器到该路径下找到需要插入的图片
alt(alternate) 规定图像的替代文本, 只有在src指定的路径下找不到图片,才会显示alt指定的文本
title 悬停文本(介绍这张图片, 只有在鼠标移动到图片上时才会显示)
height 设置图片显示的高度
width 设置图片显示的宽度
注意点:
img标签添加的图片默认不是占一整行空间
如果想让图片等比拉伸, 只写高度或者宽度即可

br标签(Break)

作用:

让内容换行
格式:

注意点:

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标签之间一定要写上文字, 如果没有, 那么在页面上找不到这个标签
a标签也叫做超级链接或超链接
a标签的属性

属性名称 作用
href(hypertext reference) 指定跳转的目标地址
target 告诉浏览器是否保留原始界面, _blank保留, _self不保留
title 悬停文本(介绍这个链接, 只有在鼠标移动到超链接上时才会显示)
base标签和a标签结合使用
如果每个a标签都想在新页面中打开,那么逐个设置a标签的target属性比较麻烦, 这时我们可以使用base和a标签结合的方式,一次性设置有a标签都在新页面中打开
格式:
注意事项:
base必须嵌套在head标签里面
如果标签上指定了target,base中也指定了target,那么会按照标签上指定的来执行
a标签其它用法
假链接(本质是跳转到当前页面)
格式江哥博客
格式江哥博客
跳转到当前页面指定位置(锚点链接)
2.1.格式跳转到指定位置
2.2.在页面的指定位置给任意标签添加一个id属性
例如

这个是目标

跳转到指定页面的指定位置
格式: 跳转到指定位置
只需要在01-锚点链接.html页面添加一个id位置即可
下载(极力不推荐使用)
例如 下载福利资源

表格标签

在过去表格标签用的非常非常的多, 绝大多数的网站都是使用表格标签来制作的, 也就是说表格标签是一个时代的代表
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标签内部才有效

```css
<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>
            [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AmVvTOYJ-1577116109514)(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的这种结构支持不是很好, 所以在企业开发中一般都不用严格的按照这种结构来编写

video标签

作用: 播放视频

格式1:

video标签的属性

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

格式2

第二种格式存在的意义

由于视频数据非常非常的重要, 所以五大浏览器厂商都不愿意支持别人的视频格式, 所以导致了没有一种视频格式是所有浏览器都支持的这个时候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标签来描述详情信息
默认情况下是折叠展示, 想看见详情必须点击

格式:

概要信息 详情信息

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)作用: 将文本字体加粗

格式:将文本字体加粗
u(Underlined)作用: 为文本添加下划线

格式:为文本添加下划线
i(Italic)作用: 显示斜体文本效果

格式:显示斜体文本效果
s(Strikethrough)作用: 为文本添加删除线

格式:为文本添加删除线
为了弥补 b、u、i、s标签的不足, W3C又推出了一组新的标签, 这些标签在显示上看似和buis没什么区别, 但是在语义上却有重大区别

strong作用: 着重内容
格式:着重内容
ins(Inserted)作用: 新插入的文本
格式:新插入的文本
em(Emphasized)作用:强调内容
格式:强调内容
del(Deleted)作用: 已删除的文本
格式:已删除的文本
其它更多详见维基百科

HTML实体

我们想在页面上输出h1这些字符，但是HTML认为这是一个标签, 所以如果需要输出一些特殊的字符需要通过字符实体来实现

lt是英语less than 小于的意思, <可以在页面上输出一个小于符号

gt是英语greater than 大于的意思, >可以在页面上输出一个大于符号

html中对空格，缩进，换行不敏感，如果同时出现多个空格缩进或者执行，页面只会把它们当作一个空格来解析。所以想要在html中输出空格必须使用来实现, 一个就代表一个空格

html对中文空格敏感, 也就是说可以显示中文空格, 但是不推荐这样使用
是英语non-breaking spacing, 翻译为不打断空格的意思

收录自李南江老师的笔记，暂时复制，后期会自行整理