HTML基础知识点一

H系列标签(标题)

1.H1-H6给文本添加标题语义,被其包括后内容会独占一行。

2.在企业开发中慎用H系列标签。一般情况下,一个界面只能出现一个H1标签。(与SEO有关)

P标签

1.段落标签独占一行。

hr标签

格式:< hr/> 斜杠写不写均可 浏览器上显示一条分割线,独占一行。

img标签

不会独占一行。

src属性

图片的位置

相对路径:从.html所在文件夹开始寻找。不能跨盘符

上级:图片在html文件上级目录时(父亲目录时),采用. ./4.jpg形式, . ./就是父目录的意思。

没有空格,不知为啥连着就变成三个点了

同级:直接书写照片名字。

下级:直接采用 形如image/4.jpg形式,图片在同级目录image之下。

绝对路径:从盘符直接开始寻找

为了安全起见浏览器不能直接访问本地磁盘资源,因此直接使用网址访问无法使用绝对路径,只用直接在本地磁盘上双击html文件才能正确访问图片,但是这显然是不允许的。并且尽量不要有中文。

扫描二维码关注公众号,回复: 12051406 查看本文章

企业开发中如果要使用路径,统一为**/反斜杠**,不要使用**\正斜杠**,移植性差。其他系统里路径都是反斜杠,否则会报错。一般不使用绝对路径,可移植性差,拷贝给别人就无法运行了。

width/height

自定义照片的长宽,但是可能图片变形。如果想不变形,我们只能指定其中一个属性,系统会为我们自动调整另外一个属性。

alt属性

替换的意思。告诉浏览器图片找不到时,显示什么内容。

title属性

鼠标悬停时,弹出的图片描述框。

br标签

换行作用,可连续使用,使用几个换几行。br标签语义不是另起段落换行,而是直接换行。企业开发一般不用,语义结束换行直接使用< p>。

a标签

链接页面,用于跳转的。但是在实际企业开发中,前期我们可能不知道目标的实际跳转目标,我们就采用假链接来代替。
区别:#号的假链接会回到页面的顶部。
格式如下:

<a href="#" >Visit W3School!</a>
<a href="javscript" >Visit W3School!</a>
herf属性
<a href="目标地址">用户看到的内容可为文字或图片,可点击</a>    

如果href指定的为URL,前边需要记得加上http://或https://

目标地址不仅仅是网址,也可以是另外一个.html文件名字

<a href="09-路径问题.html">09-路径问题.html</a>    

也可为相对路径下的html文件

<a href="test/demo/10-路径练习.html">10-路径练习.html</a>
target属性

使用 Target 属性,你可以定义被链接的文档是否在本页面直接跳转还是再打开一个新的网页。默认值***_self***是不打开新网页,当值为***_blank***则在新的页面打开。

 <a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a> 
title属性

和img标签中的作用一样。

base标签

如果有多个跳转链接,每一个都需要在新的页面打开,我们全部在a标签的target属性中修改,费时费力,这个时候我们就需要base标签。

<base target="_blank">

该属性定义到标签之间,规定了所有页面打开是否跳转到新的页面。

如果部分链接我们不想打开新的页面我们可以在a标签中再次定义target属性,a标签中的target属性值优先级高,执行a标签中的。

HTML之a 链接补充锚

- name(id) 属性

在html每一个标签都有自己的省份证号就是id属性,name属性就相当于其名字,id独一无二,但是name可以相同,存在同名字的人。

在锚的使用时id可以用name属性代替。

格式如下:在href属性中填入**“#+目标id”**

<h2 id="up">我是顶部</h2>
<a href="#center1">跳转到中部</a>
<br>
<h2 id="center1">我是中部</h2>

1.跳转是瞬间的,没有过度的动画。如果想有跳转画面不能使用锚。

2.锚不仅可以跳转到当前页面的指定位置,也可以跳转到指定界面的指定位置。

只需要在href属性中填入目的界面链接紧接着写**#加目标位置id**

<a href="01-测试跳转页面.html#center1">跳转到中部</a>

猜你喜欢

转载自blog.csdn.net/LIUCHUANQI12345/article/details/108953461