HTML----常用标签

常用标签

1.基本标签

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：查看网路请求信息，浏览器向服务器请求了哪些资源、资源大小、加载资源所共费的时间

• 点赞
• 收藏
• 分享
• 文章举报