html a标签 简书,HTML笔记02-标签

基础标签##

H标签：

作用: 用于给文本添加标题语义

格式:

xxxxxx

注意点: H标签是用来给文本添加标题语义的, 而不是用来修改文本的样式的

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

在浏览器中会独占一行

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

P标签：

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

格式：

xxxxxx

注意点：在浏览器中会独占一行

Hr标签(Horizontal Rule)

作用：在浏览器中显示一条分割线

格式：

注意点：在浏览器中会独占一行

HR标签可以写/也可以不写/, 如果不写/那么就是按照HTML的规范来编写, 如果写上/那么就是按照XHTML的规范来编写.但是在HTML5中, 由于HTML5兼容HTML和XHTML所有写不写都可以.以后我们在做前端开发时， 按照高级开发工具的提示来写即可.

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

HTML注释(Annotation)

作用：用来解释某一段程序或者某一行代码是什么意思，方便直接或程序员之间的交流

格式：

快捷键：ctrl+/

注意点：被注释的内容无法在浏览器中显示，注释是写给自己看的。

注释不能嵌套使用

img标签(image)

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

格式：[图片上传失败...(image-107814-1542794773836)]

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

属性名称 作用

src(source) 告诉浏览器需要插入的图片路径, 以便于浏览器到该路径下 找到需要插入的图片

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

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

height 设置图片显示的高度

width 设置图片显示的宽

注意点:

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

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

相对路径和绝对路径：图片路径分为两种, 一种是绝对路径, 一种是相对路径, 在企业级开发中没有人使用绝对路径

绝对路径：从电脑的具体盘符开始寻找我们需要的资源

[图片上传失败...(image-659607-1542794773837)]

以上代码表示在F盘下查找lnj文件夹, 然后在lnj文件夹下查找girl.png图片

相对路径：一个文件相对于另外一个文件的位置寻找我们需要的资源

[图片上传失败...(image-1d5b0f-1542794773837)]

假设html文件和girl.png都在lnj文件夹下, 以上代码表示在lnj文件夹下查找girl.png图片

相对路径几种查找方式

同级

直接编写, 例如: 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

br标签(Break)

作用：让内容换行

格式：

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

a标签：(anchor)

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

格式: 江哥博客

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

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

a标签的属性：

属性名称 作用

href(hypertext reference) 指定跳转的目标地址

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

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

a标签其它用法

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

格式 文字

格式 文字

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

格式跳转到指定位置

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

例如

这个是目标

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

格式: 跳转到指定位置

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

列表标签##

无序列表(unordered list)

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

格式：

选择居住城市(CN)

• 北京
• 上海
• 广州
• 铁岭

应用场景： - 导航条、商品列表、新闻列表等

注意点：浏览器会给无需列表自动添加先导符号但是一定一定千万千万要记住, ul的作用并不是给文字添加小圆点, 而是增加无序列表的语义

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

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

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

有序列表(ordered list)

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

格式：

中国房价排行

1. 北京
2. 上海
3. 广州
4. 铁岭

应用场景：排行榜

注意点：ol和ul就是语义不一样，怎么使用都是一样的以及注意点都一样

定义列表(definition list)

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

格式：

北京

国家的首都, 看升国旗的地方

上海

魔都, 遍地是黄金的地方

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

注意点：- dl是一个组标签, 一定是一坨一坨的出现, 也就是说dt和dd标签不能单独存在, 必须包裹在dl里面

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

dd和dt和li标签一样是容器标签, 里面可以添加任意标签

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

定义列表非常灵活, 可以将多个dt+dd组合拆分为多个dl

表格标签##

作用:以表格形式将数据显示出来, 当数据量非常大的时候, 表格这种展现形式被认为是最为清晰的一种展现形式

格式:

table定义表格

tr定义行

td定义单元格

able代表整个表格, 也就是一堆table标签就是一个表格

tr标签代表整个表格中的一行数据, 也就是说一对tr标签就是表格中的一行

td标签代表表格中一行中的一个单元格, 也就是说一对td标签就是一行中的一个单元格