常用元素
常用元素
h 、p、strong元素
- h
表示网页的标题
h1~h6共规定了6个等级的标题p元素 - p
表示文章中的一个段落（paragraph） - strong元素
用于强调某些文本，粗体的显示效果
h元素和SEO
- h元素有助于网站的SEO（Search Engine Optimization）优化，可以促进关键词排名** 建议在网页中最多只有1个h1元素
- 乱用h元素不仅不会给网站带来好的权重，同时也有可能被搜索引擎认为作弊，最后导致K站
pre
- 在默认情况下，HTML代码中的大多数空格都会被浏览器压缩，比如一段连续的空格会被压缩成1个空格
-
如果想完全保留HTML代码中的空格、换行，可以使用pre元素
image.png
字符实体（Character Entity）
- HTML中有一些字符是预留出来作特殊用途的，比如小于号（<）大于号（>）
-
要想在网页中正确地显示这些预留字符，必须使用字符实体，书写格式--般有2种&entity_namei
&#entity_number；
image.png
记住常用的几个，不会就百度搜索字符实体
-
常用的字符实体
image.png
-
补充 当鼠标移动到元素上时，title属性的内容会自动显示出来
image.png
- 提醒：
属性值建议--定要用双引号”“包住
2.如果属性值里再出现了特殊字符，比如双引号，应该用字符实体，比如双引号（"；）
code br 元素
- code元素
code元素用于显示程序代码br元素 - br元素
单标签，表示强制换行 -
使用code标签是为了表达清楚语义
image.png
- 应该使pre标签包住tcode标签，不应过使用code标签包Epre标签
img元素
-
img元素专门用来显示图片（img是image的缩写）
image.png
- src属性（src是source的缩写）用来设置图片的路径（URL）
绝对路径：完整的描述文件位置的路径
相对路径：由这个文件所在的文件夹引起的跟其它文件的路径关系
. 代表当前文件夹（1个.），可以省略
.. 代表上级文件夹（2个.） - 对于网页来说，不管什么操作系统（Windows、Mac.Linux），路径分隔符都是/，而不是\
- 注意
img元素如果只设置了width（或height），浏览器会自动根据图片宽高比计算出height（或width）
在HTML5规范中，alt是img元素的必要属性
常用的图片格式
- web中常用的图片格式有
png：静态图片，支持透明(但不代表一定透明，可以选择)
jpg：静态图片，支持透明
gif：动态图片、静态图片，支持透明
像素
像素（px）是图像显示的最小单位
每个像索都能表示一种颜色
计算机显示出来的图像都是由一堆像索组成的
组成图片的像素越多，显示越清晰
平时说的屏隔分辨率，一般都是用像素作为单位
image.png
a iframe元素
-
a元素的作用
定义超链接，用于打开新的URL
image.png
-
常用属性
href：指定要打开的URL Hypertext
Reference的简称
target：在哪里打开URL
-
target可以有以下几种取值
_self：默认值，在当前窗口打URL
_blank：在一个新的窗口中打开URL
_parent：在父窗口中打开URL（iframe才有）
_top：在最顶层窗口中打开URL（iframe才有）
某个iframe的name值（不能使用id）：在某个iframe中打开UR（iframe才有）
image.png
- iframe元素是在一个网页中嵌入另一个网页
- 常用属性
- src 其他页面的URL
- frameborder,是否需要边框
1.需要
0.不需要
base 元素（了解）
- 可以利用base元素设置当前页面所有a元素的默认行为
-
base元素写在head元素中
image.png
锚点链接
-
锚点链接跳到网页头部，只需要用“#”号
锚点链接可以实现：跳转到网页中的具体位置
image.png
*注意：只有a元素可以通过name属性实现锚点链接
<a href="#one">go</a>
点击go会定位到
id值为one的元素
name值为one的a*元素，其他元素不可以
伪链接（了解）
- 有时候点击链接的时候并不希望打开新的URL，而是希望干点别的事情，这时可以使用伪链接
- 伪链接：没有指明具体链接地址的链接
- 点击链接后具体要做什么事情，需要编写对应的JavaScript代码
-
如果暂时不做任何事，可以先写成下面形式
image.png
- 所以有时候可以把链接当作按钮来使用
图片链接
<a scr="www.baidu.com">
<img src="图片地址"></img>
</a>
URL
- 浏览器访问https://www.baidu.com/img/bdlogo.gif的过程如下图
image.png
- 什么叫URL?
URL的全称是Uniform Resource Locator（统-资源定位符）
URL就是资源的地址、位置，互联网.上的每个资源都有一一个唯一的URL - URL的基本格式= protocol://hostname/path =协议：//主机地址/路径
eg
https://www.baidu.com/img/bdlogo.gif http://183.232.231.173/img/bdlogo.gif - 协议：不同的协议，代表着不同的资源查找方式、资源传输方式
- 主机地址：存放资源的主机的IP地址（域名）
- 路径：资源在主机中的具体位置
常见协议
- http协议
超文本传输协议，访问的是远程的网络资源，格式是http://
http协议是在网络开发中最常用的协议
https协议相当于是http协议的安全版 - file
访问的是本地计算机上的资源，格式是file://（不用加主机地址） - mailto
访问的是电子邮箱地址，格式是mailto - ftp
访问的是共享主机的文件资源格式是ftp:// - ed2k
通过支持ed2k（专用下载链接）协议的P2P软件访问该资源（代表软件：电驴），格式是ed2k:// - thunder
通过支持thunder（专用下载链接）协议的P2P软件访问该资源（代表软件：迅雷），格式是thunde://
更具体的URL
-
URL更具体更完整的语法格式为：protocol://hostname[：port]/path/iparameters][？query]#fragment http：//www.baidu.com：80/s？wd=ios#page
-
port（端口号）
一台拥有IP地址的主机可以提供许多服务，比如Web服务、FTP服务、SMTP服务等
主机通过"ITP地址+端口号”来区分不同的服务，端口号类似于营业厅的窗口
端口号的范围从0到65535，HTTP默认端口号是80，FTP默认端口号是21
image.png
-
query
请求参数，提交给服务器的数据 -
`fragment
锚点位置
标签语义化
- 什么是标签语义化？
选择标签的时候要尽量让每一个标签都有正确的语义 - 虽然很多标签之间互换之后也能实现功能，但还是要遵守“标签语义化”的原则
比如用strong实现a、img的功能（通过添加css样式） - 标签语义化的好处
方便代码维护。
减少让开发者之间的沟通成本
能让语音合成工具正确识别网页元素的用途，以便作出正确的反应
让搜索引擎能够正确识别重要的信息
……
总结：使用最合适的标签去做最合适的事情
网友评论