前端开发入门——HTML基础标签一
本文创建于2020年8月,以下为正文:
文本标记语言即HTML,适用于描述网页文档的一种标记语言。以下是小编为大家整理的HTML基本标签。
HTML元素指的是从开始标签到结束标签的所有代码
ps:开始标签常被称为开放标签(opening tag),结束标签常成为闭合标签(closing tag )
HTML元素基本格式是<标签名 属性1=值1 属性2=值2…>元素内容</标签名>
HTML中常用标签
HTML实例解释
< p>元素:
< p>Hello world< /p>
这个< p>元素定义了HTML文档中的一个段落。
元素内容是:Hello world
< body>元素:
< body>
< p>Hello world< /p>
< /body>
< body>元素定义了HTML文档中的主体
这个元素拥有一个开始标签< body>,以及一个结束标签< /body>
元素内容是另一个HTML元素(p元素)
字体样式标签是怎样标记的?
< font> 标记的是html里最常用的文字格式控制标记,通过改变font标记的属性可以改变文字的大小、颜色、字体等,但在XHTML里font标记应用比较少。
文本样式标记< font>及其face、size、color属性。face属性可以描述字体的样式,size属性描述字体大小,且其最大值为7,如果超过7则默认size为7,color属性则用来修改文本的颜色。
加粗:< strong>…< /strong> < b>…< /b>
斜体:< em>…< /em> < i>…< /i>
下划线文本:< u>…< /u>
中划线:< s>…< s>
特殊符号
在HTML网页中,我们经常会看到一些漂亮的图片,这就产生了一个问题,这些图片是怎样引入到网页中的呢?
其实并没有想象中的那么复杂,只需要使用HTML中的< img>标签就能实现。
“img”是英文单词“image”的缩写,有图像的意思,在HTML中用来引入图像。
在HTML中,< img>标签是使用来在网页中嵌入一副画像。从技术上讲,图像并不是插入到网页中,而是链接到网页中, < img>标签的作用是为被引用的图像创建占位符。
< img>标签语法格式为:<img src="URL" width="300" alt="替换文本属性" /
其中src属性使用来指定需要嵌入到网页中的图像的地址的;alt属性是使用来规定图像的替代文本,当图像不显示时,将显示该属性值内容。搜索引擎会读取出属性值内容作为图像表示的意思,所以搜素引擎优化中需注意该属性;src属性和alt属性是< img>标签必须属性。
常用属性:width,height,alt,title
- src:指定我们要加载的图片的路径和图片的名称以及图片格式。
- width:指定图片的宽度,单位px、em、cm、mm。
- height:指定图片的高度,单位px、em、cm、mm。
- border:指定图标的边框宽度,单位px、em、cm、mm。
- title:当网页上的图片被加载完成后,鼠标移动到上面去,会显示这个图片指定的属性文字,也就是鼠标悬停时显示的内容。
-
alt:如果图像没有下载或者加载失败,会用文字来代替图像显示;搜索引擎可以通过这个属性的文字来抓取图片。
绝对路径和相对路径的关系
1.绝对路径<a href="">
标签< /a>`
代码中的URL地址为绝对路径,向一个特定 的服务器上的文件发送请求
绝对路径总是包含协议和服务器,所以当想要连接到其他网站或者服务器上的时候,通常都是使用绝对路径。
2.相对路径< a href=“123.html” target="_blank"标签``< /a>
代码中的123.html为相对路径,相对路径从来不包含协议和服务器
如果不包含协议或服务器,浏览器会假设协议和服务器与发生请求的页面相同。所以要连接的网页在相同的服务器上时,通常会使用相对路径。
绝对路径和相对路径这两者的优缺点是什么呢?
优点:1.防止网站被恶意抄袭,使用绝对路径,如果有人抄袭采集你的内容,里面的链接还会指向你的网站。有些抄袭的比较懒,连里面的链接一起抄了过去
2.如果站长不能做301转向,因而有网址规范化的问题,使用绝对路径有助于链接指向选定的URL版本
3.就算网页被移动位置,里面的链接还是指向正确的URL
缺点:1.除非链接是动态插入的,不然没办法在测试服务器上进行测试。因为里面的链接将直接指向真正的域名URL,而不是测试服务器中的URL。
2.除非链接是动态插入的,不然移动内容页面将很困难。因为内容页面位置发生变化,在其他页面上的链接却可能无法跟着变化,还指向原来的已经硬编码的绝对路径 。
后续还会更新相关基础标签,请持续关注哦!
(ps:如果您觉得有用,请点赞转发,让更多人看到哦)