Html常见标签和属性

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()方法即可

表单中常见标签

  1. input与button
<form>
	<label for="text"> 用户名:</label> <input type="text" name="username" value="请输入用户名" maxlength="6">
	<button type="submit">提交</button>
</form>
type类型介绍
textinput文本框 用户可以里面输入任何文字
passwordinput密码框 用户看不见输入的密码
radio单选按钮 可以实现多选一
checkbox复选框 可以实现多选
reset重置按钮 可以还原表单元素初始的默认状态
button普通按钮 button 后期结合js 搭配使用
file文件域 上传文件使用
password密码框 用户看不见输入的密码
  1. 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属性书写顺序(重点)

  1. 布局定位属性: display position float clear visibility overflow (建议display第一个写)
  2. 自身属性: width height margin padding border background
  3. 文本属性 : color font text-decoration text-align vertical-align white- space break-word
  4. 其他属性(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语法

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

快速格式化代码

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

  1. 文件------.>【首选项】---------->【设置】;
  2. 搜索emmet.include/emmet: Preferences;
  3. 在settings.json下的【用户】中添加以下语句:
    “editor.formatOnType”: true,
    “editor.formatOnSave”:true
    只需要设置一次即可,以后都可以自动保存格式化代码
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值