Html常见标签和属性

飞仔快乐水

已于 2023-03-29 21:00:22 修改

阅读量365

点赞数

分类专栏： html-css 文章标签： html css

于 2023-03-11 14:14:56 首次发布

本文链接：https://blog.csdn.net/qq_43714708/article/details/129462978

版权

html-css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

Html常见标签和属性

Html语义化标签与常见标签属性

标签名/属性	表示内容
header	头部
content/containere	内容
footer	底部
nav	导航
sidebar	侧边栏
column	列
loginbar	登录条
banner	广告
main	页面主体
hotv	热点
news	新闻
download	下载
subnav	子导航
menu	菜单
search	搜索

Html布局页面

表格

<table>
	<!-- 表头部 -->
	<thead>
		<!-- 行标签-->
		<tr>
			<th>表头</th>
			<td>行内列</td>
			<td>行内列</td>
		</tr>
	</thead>
	<!-- 表内容 -->
	<tbody>
		<tr>
			<th></th>
			<td></td>
			<td></td>
		</tr>
	</tbody>
</table>

cellpadding="0"单元格与文字之间的间距默认为1像素
cellspacing="0"单元格之间的间距默认为2像素
rowspan="2"跨行合并跨行：最上侧单元格为目标单元格，
colspan="2"跨列合并跨列：最左侧单元格为目标单元格
thead：用于定义表格的头部
tbody：用于定义表格的主体

列表

<ul>
	<li>无序列表，一般用在菜单栏，属性 list-style: none;  去掉列表前面的小圆点</li>
</ul>  
<ol>
	<li>有序列表，一般用在菜单项</li>
</ol>  
<dl>
	<dt></dt>
	<dd>自定义列表，一般用在底部导航菜单</dd>
</dl>

表单域

	<form action="main.html" method="POST" name="toMain">
	</form>

method get/post 用于设置表单数据的提交方式
name 名称用于指定表单的名称，以区分同一个页面中的多个表单域
serialize() 方法：以字符串的形式获取表单提交的数据(userName=张三&password=123)
reset()方法：重置表单项，获取form表单id或类名，调用reset()方法即可

表单中常见标签

input与button

<form>
	<label for="text"> 用户名:</label> <input type="text" name="username" value="请输入用户名" maxlength="6">
	<button type="submit">提交</button>
</form>

type类型	介绍
text	input文本框用户可以里面输入任何文字
password	input密码框用户看不见输入的密码
radio	单选按钮可以实现多选一
checkbox	复选框可以实现多选
reset	重置按钮可以还原表单元素初始的默认状态
button	普通按钮 button 后期结合js 搭配使用
file	文件域上传文件使用
password	密码框用户看不见输入的密码

select与textarea

<select>
	<option selected="selected">选项一</option>
	<option>选项二</option>
</select>
<textarea cols="50" rows="5">文本域 </textarea>

select下拉菜单
– option 下拉菜单选项
– selected = " selected"，当前项为默认选中项
textarea 多行文本域
– cols 一行容纳多少文字
– rows 多少行

Css

css样式

类型	介绍	使用情况	用途
行内样式	书写方便，权重高结构样式混写	较少	控制一个标签
行内样式	部分结构和样式相分离没有彻底分离	较多	控制一个页面
外部样式	完全实现结构和样式相分离需要引入	最多推荐	控制一至多个页面

css属性书写顺序(重点)

布局定位属性: display position float clear visibility overflow (建议display第一个写)
自身属性: width height margin padding border background
文本属性 : color font text-decoration text-align vertical-align white- space break-word
其他属性(CSS3 ) : content cursor border-radius box-shadow text-shadow background:linear-gradient …

<style>
.box {
	display: block ;  // 块级元素
	position: relative;  // 相对定位
	float: left;  // 浮动
	width: 100px;
	height : 100px;
	margin: 0 10px;
	padding: 20px 0;
	font-family: Arial,"Helvetica Neue', Helvetica,sans-serif;
	color: #333;
	background : rgba (0,0,0,. 5) ;
	border-radius: 10px;  // 圆角
}
</style>

字体

标签	属性	使用方式
font-size	字号	我们通常用的单位是px像素，一定要跟上单位
font-family	字体	实际工作中按照团队约定来设置字体
font-weight	字体粗细	加粗是700或者bold不加粗是normal 或者 400 牢记数字不要跟单位
font-style	字体样式	倾斜是 italic不倾斜是normal工作中我们最常用normal
font	样式连写	font: font-style font-weight font-size/line-height font-family; 1. 字体连写是有顺序的不能随意换位置；2. 其中字号和字体必须同时出现
text-indent	首行缩进	em是一个相对单位，就是当前元素( font-size)1个文字的大小,如果当前元素没有设置大小，则会按照父元素的1个文字大小
line-height	行间距	属性用于设置行间的距离(行高)，可以控制文字行与行之间的距离

元素的显示模式

元素(标签)以什么方式进行显示，HTML元素一般分为块元素和行内元素两种类型

元素模式	排列	样式	默认宽度
块级元素	一行只能放一个块级元素	可以设置宽度高度	容器的100%
行内元素	一行可以放多个行内元素	不可以直接设置宽度	它本身内容的宽高度容纳文本或则其他行内元素
行内块元元素	—行放多个行内块元素	可以设置宽度和高度	它本身内容的宽高度

元素类型转化换

	display:inline; // 转换为行内元素
	display:block; // 转换为块级元素
	display:inline-block; // 转换为行内块元素

背景

属性	作用	介绍
background-color	背景颜色	预定义的颜色值/十六进制/RGB代码
background-image	背景图片	url(图片路径)
background-size	展示效果	auto 默认/contain 完全展示/cover 按比例展示
background-repeat	是否平铺	repeat 平铺（默认）/no-repeat 不平铺/repeat-x 延x轴平铺/ repeat-y 延y轴平铺
background-position	背景位置	length/position分别是x和y坐标
background-attachment	背景附着	scroll(背景滚动)/fixed(背景固定)

注意：页面元素既可以添加背景颜色也可以添加背景图片只不过背景图片会压住背景颜色
background-position: 方位名词; 设置图片位置

如果指定的两个值都是方位名词，则两个值前后顺序无关，比如left top和top left 效果一致
例如：center top;水平居中，垂直靠上/left center;水平靠左，垂直居中
如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐
例如：right;水平靠右，垂直居中/top;水平居中，垂直靠上。
如果参数值是精确坐标，那么第一个肯定是x坐标，第二个—定是y坐标
例如：20px 50px;水平偏移20像素，垂直偏移50像素
如果只指定一个数值，那i该数值一定是x坐标，另一个默认垂直居中
例如：20px; 水平偏移20px像素，垂直居中（等价于 20px center;）
如果指定的两个值是精确单位和方位名词混合使用，则第一个值是x坐标，第二个值是y坐标
例如：20px center; 水平偏移20像素，垂直居中/center 20px; 水平居中，垂直偏移20像素

为了简化背景属性的代码，我们可以将这些属性合并简写在同一个属性background中，一般习惯约定顺序为∶
background:背景颜色背景图片地址背景平铺背景图像滚动背景图片位置
background: color url() no-repeat scroll center center

background: rgba(0, 0,0,0.3); 最后一个参数是alpha透明度，取值范国在0~1之间(CSS3提供)，我们习惯把0.3的0省略掉，写为background: rgba(0,0,0,.3)，IE9+版本浏览器才支持

选择器

在CSS中，可以根据选择器的类型把选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的
常用的复合选择器包括︰后代选择器、子选择器、并集选择器、伪类选择器等等

选择器	作用	特征	使用情况	隔开符号及用法
后代选择器	用来选择后代元素	可以是子孙后代	较多	符号是空格.nav a
子代选择器	选择最近一级元素	只选亲儿子	较少	符号是大于.nav>p
并集选择器	选择某些相同样式的元素	可以用于集体声明	较多	符号是逗号.nav,.header
链接伪类选择器	选择不同状态的链接	跟链接相关	较多	是大于.nav>p
:focus选择器	选择获得光标的表单	跟表单相关	较少	记住input:focus

链接伪类选择器

链接伪类	介绍
a: link	选择所有未被访问的链接
a: visited	选择所有已被访问的链接
a: hover	选择鼠标指针位于其上的链接
a: focus	伪类选择器用于选取获得焦点的表单元素,焦点就是光标，一般情况类表单元素才能获取，因此这个选择器也主要针对于表单元素来说

复合选择器

在CSS中，可以根据选择器的类型把选择器分为基础选择器和复合选择器。
复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的。
常用的复合选择器包括︰后代选择器、子选择器、并集选择器、伪类选择器等等

权重

选择器	权重
继承或者*	0,0,0,0
元素选择器	0,0,0,1
类选择器>伪类选择器	0,0,1,0
ID选择器	0.1,0,0
行内样式style=“”	1,0,0,0
!important重要的	无穷大

权重是有4组数字组成,但是不会有进位。
可以理解为类选择器永远大于元素选择器，id选择器永远大于类选择器，以此类推。
等级判断从左向右，如果某一位数值相同，则判断下一位数值
可以简单记忆法：通配符和继承权重为0，标签选择器为1，类(伪类)选择器为10， id选择器100，行内样式表为1000， !important无穷大
继承的权重是0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0
注意：继承的权重是0

Vscode 便捷操作

emmet语法

生成标签直接输入标签名按tab键即可比如div然后tab键，就可以生成 <div></div>
如果想要生成多个相同标签加上就可以了，比如div3生成<div></div><div></div><div></div>
如果有父子级关系的标签，可以用>。比如ul> li生成<ul><li></li></ul>>
如果有兄弟关系的标签，用＋就可以了比如div+p生成<div></div><p></p>
如果生成带有类名或者id名字的，直接写.demo或者#two 按下tab键就可以生成<div class="demo"></div> <div id="two"></div>
如果生成的div类名是有顺序的，可以用自增符号$配合*使用，如.demo$*2 生成<div class="demo1"><div> <div class="demo2"> </div>

快速格式化代码

Vscode 快速格式化代码: shift+alt+f
也可以设置当我们保存页面的时候自动格式化代码:

文件------.>【首选项】---------->【设置】;
搜索emmet.include/emmet: Preferences;
在settings.json下的【用户】中添加以下语句:
“editor.formatOnType”: true,
“editor.formatOnSave”:true
只需要设置一次即可，以后都可以自动保存格式化代码