Html标签

1.什么是标签?

标签,即Html标记标签,是html语言中最基本的单位,其作用主要为:标记html文档和html元素。Html有单标签和双标签两类

2.标签的分类

  • 单标签:以 < 开头, /> 结尾,其中填写标签名
例如:<input/><br/>
  • 双标签:以<标签名>开头,</标签名>结尾,中间存放文本
例如:<div></div>

3.一些常用的标签

<div>:常用的行元素标签,用于定义 HTML 文档中的一个区域部分
<p>:段落标签,可以标记段落
<span>:最小的标签,可以将文本的一部分独立出来单独设置css格式
<img>:图片标签,用来将图片链接到页面,常用的属性有:

  • alt:图片若无法加载时的替代文本
  • src:图片的存储路径

<input/>:标签规定了用户可以在其中输入字符,常用属性有:

  • maxlength:允许的最大字符数
  • checked:规定在页面加载时被预先选定
  • disabled:规定应该禁用

<link>:链接外部样式表只能写在head中,可以写很多个常用属性有:

  • herf:外部链接的位置
  • rel:被链接的文件与本文件的关系,
    如:icon表示被链接对象为本文档的小图标

4.标签的通用属性:

元素的属性在书写时通常是以"名称 = 值"的方式书写

  • class:标签的class名称,可以给一类标签统一添加对应class名来调用
  • id:标签的id名,一个id名只可以给一个元素添加
  • background:标签的背景颜色
  • style:标签的行内样式

5.标签选择器:

本次仅列举较为常用的标签选择器

  • class选择器:选择同一个class名的标签 .class名
  • id选择器:选择该id名的所有标签 #id名
  • 通用选择器:选择页面上所有的标签 *
  • 标签选择器:选择页面上所有的该标签 标签名
  • 群组选择器:同时选择页面上两个或多个标签 标签1,标签2
  • 后代选择器:选择父类标签中的所有指定标签 父标签 后代标签
  • 子代选择器:选择父类标签中子一级的所有指定标签 父标签>子标签
  • 相邻选择器:选择紧邻标签1 之后的标签2 标签1+标签2
  • 属性选择器:选择所有具备该属性的标签 [标签名]
  • 样式选择器:选择所有属性为指定属性的标签 [标签名=属性]

6.如何使用style改变标签样式:

使用标签选择器选择所想要改变的标签后添加标签样式即可

7.标签的样式:

改变 HTML 元素样式的方式,通常在<head>标签的<style>标签中统一设置或者书写标签文档后使用<link>标签引入即可
常用的标签样式有:

  • width:定义元素宽度(必须带有单位)
  • height:定义元素高度(必须带有单位)
  • position:开启元素定位,后接定位方式(absole,relative)
  • color:设置该标签内部文本颜色
  • background:设置该标签的背景颜色
  • text-align:规定该标签的文本水平对齐方式(left居左,center居中,right居右)
  • vertcal-align:规定该标签的文本垂直对齐方式(topd\顶部,middle中部,bottom底部)
  • size:设置改文本的文字大小
  • display:规定文本的显示样式(block,inline,inline-block)
  • border:设置元素的边框(三条属性:边框粗细,边框样式,边框颜色)

8.css样式的优先级:

  • 行间样式优先于父类的样式
  • 近的父类样式优先于远的父类样式
  • 行间样式>id选择器>class选择器/属性选择器>标签选择器>通用选择器
div{
	width:100px;
	height:100px;
	size:10px;
	color:red;
	background:green;
	border:1px solid black;
	}
改变所有div标签的样式

最终在页面呈现的便是此效果:
代码效果
本文均属个人理解

发布了3 篇原创文章 · 获赞 1 · 访问量 59
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 游动-白 设计师: 上身试试

分享到微信朋友圈

×

扫一扫,手机浏览