HTML笔记（二）

常用元素

常用元素

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.如果属性值里再出现了特殊字符，比如双引号，应该用字符实体，比如双引号（&quot；）

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样式）
• 标签语义化的好处
  方便代码维护。
  减少让开发者之间的沟通成本
  能让语音合成工具正确识别网页元素的用途，以便作出正确的反应
  让搜索引擎能够正确识别重要的信息
  ……
  总结：使用最合适的标签去做最合适的事情