html基础标签笔记,HTML5学习笔记之基础标签知识整理

1) 作用：

给一堆内容添加无序列表语义(一个没有先后顺序整体)， 列表中的条目是不分先后

2) 格式：

li 英文是 list item, 翻译为列表项

Snip20170614_4.png

3) ul应用场景：

导航条

商品列表等

新闻列表

4) 注意：

其实ul还有一个type属性， 可以修改先导符号的样式， 取值有disc、square、circle几种

但是由于样式将来都是通过css来完成， 所以这里就不给大家介绍了

ul是一个组标签， 一定是一坨一坨的出现， 也就是说li标签不能单独存在， 必须包裹在ul里面

由于ul和li是一个整体， 所以ul里面不推荐包裹其它标签， 永远记住ul里面最好只写li标签

虽然ul中推荐只能写li标签， 但是li标签是一个容器标签， li标签中可以添加任意标签， 甚至可以添加ul标签

Snip20170614_5.png

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

Snip20170614_6.png

2) ol应用场景：

xxx排行榜

其实ol应用场景并不多， 因为能用ol做的用ul都能做

ul的常见属性start、type属性， 可以修改先导符号的样式和序号

二。定义列表(definition list)

1) 作用：

给一堆内容添加列表语义， 通过dt罗列出列表的条目， 然后再通过dd给每个条目进行相应的描述

2) 格式：

dt英文definition title, 翻译为定义标题

dd英文definition description, 翻译为定义描述信息

3) dl应用场景：

网站底部相关信息

但凡看到一堆内容都是用于描述某一个内容的时候就要想到dl

Snip20170614_9.png

4) 注意事项：

dl是一个， 一定是一坨一坨的出现， 也就是说和标签不能单独存在， 必须包裹在里面

由于和、是一个整体， 所以里面不推荐包裹其它标签

和和标签一样是容器标签， 里面可以添加任意标签

定义列表非常灵活， 可以给一个配置多个， 但是最好不要出现多个对应一个， 的语义是描述离它最近的一个， 所以其它相当于没有描述， 而定义列表存在的意义就是既可以列出每一个条目又可以对每一个条目进行描述

定义列表非常灵活， 可以将多个组合拆分为多个

1.作用：

用于给文本添加标题语义

格式：

xxxxxx

2.注意点：

H标签是用来给文本添加标题语义的， 而不是用来修改文本的样式的

H标签一共有6个， 从H1——H6, 最多就只能到6, 超过6则无效

被H系列标签包裹的内容会独占一行

在H系列的标签中， H1最大， H6最小

在企业开发中， 一定要慎用H系列的标签， 特别是H1标签。 在企业开发中一般情况下一个界面中只能出现一个H1标签(和SEO有关)

四。P标签(Paragraph)

1.作用：

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

格式：

xxxxxxxx

2.注意点：

在浏览器中会单独占一行

1.作用：

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

格式：

---

2.注意点：

在浏览器中会单独占一行

通过我的观察发现HR标签可以写/也可以不写

如果不写/那么就是按照HTML的规范来编写

如果写上/那么就是按照XHTML的规范来编写。

由于hr标签是用来修改样式的， 所以不推荐使用。 今后开发中添加水平线一般都使用CSS盒子来做

1.什么是注释？

1.注释格式

——

2.注意点：

被注释的内容不会在浏览器中显示， 注释是写给我们自己看的

注释不能嵌套使用

3.快捷键：

Snip20170614_10.png

在网页上插入一张图片

写在标签中K="V"这种格式的文本我们称之为标签属性

属性名称

作用

src(source)

告诉浏览器需要插入的图片路径， 以便于浏览器到该路径下找到需要插入的图片

alt(alternate)

规定图像的替代文本， 只有在src指定的路径下找不到图片，才会显示alt指定的文本

title

悬停文本(介绍这张图片， 只有在鼠标移动到图片上时才会显示)

Height＜/td>

设置图片显示的高度

Width＜/td>

设置图片显示的宽度

img标签添加的图片默认不是占一整行空间

如果想让图片等比拉伸，只写高度或者宽度即可

Snip20170614_12.png

让内容换行

br的意思是不另起一个段落进行换行， 而网页中99.99%需要换行时都是因为另起了一个段落， 所以应该用p来做

用于从一个页面链接到另一个页面

在a标签之间一定要写上文字， 如果没有， 那么在页面上找不到这个标签

a标签也叫做超级链接或超链接

属性名称

作用

href(hypertext reference)

指定跳转的目标地址

target

告诉浏览器是否保留原始界面， _blank保留， _self不保留

title

悬停文本(介绍这个链接， 只有在鼠标移动到超链接上时才会显示)

4) 代码示例

Snip20170614_13.png

如果每个a标签都想在新页面中打开，那么逐个设置a标签的属性比较麻烦， 这时我们可以使用base和a标签结合的方式，一次性设置有a标签都在新页面中打开

格式：

注意事项：

必须嵌套在标签里面

如果标签上指定了，中也指定了，那么会按照标签上指定的来执行

假链接(本质是跳转到当前页面)

格式

格式

跳转到当前页面指定位置(锚点链接)

1.格式跳转到指定位置

2.在页面的指定位置给任意标签添加一个id属性

例如 这个是目标

跳转到指定页面的指定位置

格式：

只需要在01-锚点链接。html页面添加一个id位置即可

下载(极力不推荐使用)

例如下载福利资源