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
只需要设置一次即可,以后都可以自动保存格式化代码