HTML----常用标签

常用标签

1.基本标签

标签	含义	说明
br	换行标签	非关闭型标签
p	段落标签	关闭型标签，块级标签，前后段落
h1、h2、h3…h6	标题标签	按照h1到h6逐渐变小，块级标签，并且文本会加粗显示
pre	预格式化标签	保留编码时的格式
div	分区标签	常用容器来使用，一般用于页面布局划分，块级标签
span	范围标签	默认情况下没有任何效果，一般用来设置行内的特殊格式
ol、li	有序列表	有顺序的项目列表
ul、li	无序列表	无顺序的项目列表
dl、dt、dd	定义列表	对术语、图片等进行描述和定义的列表
hr	水平线标签	非关闭性标签，块级标签
lmg	图像标签	非关闭型标签

1.1有序列表

ol：ordered list

li：list item

默认情况下使用阿拉伯数字，从1开始标记，可以通过属性进行修改

• type属性：设置列表前的符号标记，取值，数字1（默认），字母a或A，罗马数字1或i

• start属性：设置起始值，但必须是数字

  1.2无序列表

  ul：unodered list

  li：list item

默认使用实心圆作为标记符号，可以通过属性进行修改

type属性：设置列表前的标记符号，取值；disc实心圆（默认）、circle空心圆、square正方形，none不显示符号

1.3定义列表

dl：definition list

dt：definition title

dd：definition description

1.4水平线标签

hr：horizontal

常用的属性：

• color颜色

  两种颜色

  ​ 颜色名称：blue、green、white、orange、red、pink等

  ​ 16进制的RGB：Red、Green、Blue 用法：#RRBGGBB 每种颜色是取值范围0-256，转换为16进制00-FF

  eg：#FF0000红色、#00FF00绿色、#0000FF蓝色、#0000黑色、#CCCCCC灰色、#FF7300橙色

• size：粗细、数值

• width宽度

  两种写法：

  ​ 像素，绝对值（固定值）

  ​ 百分比：相对值，相对于

• align对齐

  取值：默认center居中 left right

  1.5 图形标签

  img:image
  常见的图片格式：.jpg .png .gif .bmp
  常见属性：

  src:source指定图片的路径（来源），必选参数

  如果图片与html源代码在同一个文件夹中，可以直接书写图片的名称
  习惯上，会将多个图片存放到一个单独的文件夹中，如project\image,此时，需要在图片名称的前面添加 路径
  路径的分类：
  相对路径

  表示： ./当前路径 …/当前位置的上一级文件夹

  提示：…/image

  alt:当图片无法正常显示时提示的信息

  title:当鼠标停留在图片上时显示的提示信息

  width/height:设置图片的宽度和高度

  默认情况下原始尺寸显示

  如果只设置其中一个，则另一个按比例自动缩放

  如果同时设置宽和高，可能会导致图片变形

  两种写法： 像素：绝对值（固定值）

  百分比，相对值，相对该标签所在的上一级父容器的宽度 的百分比

  2其他标签

  标签	含义	说明
  i	斜体	italic
  em	强调的内容	在浏览器中显示一般为斜体
  address	地址	在浏览器中显示一般为斜体，块级标签
  b	加粗	bold
  strong	强调的内容	在浏览器中显示时一般为加粗
  del	删除线	delete
  ins	下划线
  sub	下标
  sup	上标
  bdo	设置文本的方向	通过属性 dir=“ltr”（left to right）“rtl”（right to left）从右到左
  abbr	设置文字缩写	通过title属性设置当前鼠标停留在文字上时显示的提示信息
  small	相对于当前其他文字的字号减小一号
  big	相对于当前其他文字的字号增大一号

为了更好的语义化

3.头部标签

• meta定义网页的摘要信息，如字符条码，关键字，描述，作者等信息

• title定义网页的标题

• style定义网页内部的css样式

• link引用外部的css样式

• script定义或引用脚本

• base定义基础路径

  默认以当前页面文件的所在位置为相对路径的参照

4.标签嵌套

一个标签中嵌套另外一个标签

标签不能乱嵌套，如下标签的嵌套是错误的

	<p
       style="width:300px;height:300px;background:green">
	<div style="width:200px;height:200px; background:blue">
		hello
	</div>
	</p>

浏览器渲染后显示的页面的页面代码与编码时有所不同

Chrome浏览器提供的开发工具：用来帮助开发人员查看和调试页面的

如何打开：

• 在页面中右键单击–>检查/审查元素/查看元素
• 按F12

常用工具：

• Elements：从浏览器的角度来看页面，浏览器渲染页面时的结构
• console：控制台，显示各种警告和错误信息
• network：查看网路请求信息，浏览器向服务器请求了哪些资源、资源大小、加载资源所共费的时间