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:查看网路请求信息,浏览器向服务器请求了哪些资源、资源大小、加载资源所共费的时间
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
经导师精心指导并认可、获 98 分的毕业设计项目!【项目资源】:微信小程序。【项目说明】:聚焦计算机相关专业毕设及实战操练,可作课程设计与期末大作业,含全部源码,能直用于毕设,经严格调试,运行有保障!【项目服务】:有任何使用上的问题,欢迎随时与博主沟通,博主会及时解答。 经导师精心指导并认可、获 98 分的毕业设计项目!【项目资源】:微信小程序。【项目说明】:聚焦计算机相关专业毕设及实战操练,可作课程设计与期末大作业,含全部源码,能直用于毕设,经严格调试,运行有保障!【项目服务】:有任何使用上的问题,欢迎随时与博主沟通,博主会及时解答。 经导师精心指导并认可、获 98 分的毕业设计项目!【项目资源】:微信小程序。【项目说明】:聚焦计算机相关专业毕设及实战操练,可作课程设计与期末大作业,含全部源码,能直用于毕设,经严格调试,运行有保障!【项目服务】:有任何使用上的问题,欢迎随时与博主沟通,博主会及时解答。 经导师精心指导并认可、获 98 分的毕业设计项目!【项目资源】:微信小程序。【项目说明】:聚焦计算机相关专业毕设及实战操练,可作课程设计与期末大作业,含全部源码,能直用于毕设,经严格调试,运行有保障!【项目服务】:有任何使用上的问题,欢迎随时与博主沟通,博主会及时解答。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值