html常用标签以及css基本属性和选择器
html常用标签
一般格式为:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 9 </body> 10 </html>
标签分类:
按闭合类型分:
- 自闭合标签
<meta /> <img /> <link /> 等
- 主动闭合标签
<title></title> <a></a>等
按区域分:
- 块级标签
div , h系列 , p
- 行内标签
span , a, input系列
head中的标签
- <meta /> 编码，跳转，刷新，关键字，描述，IE兼容
<meta charset="UTF-8" />
<!-- 编码设置 -->
<meta http-equiv="X-UA-Compatible" content="IE=IE9;IE=IE8;" />
<!-- 设置浏览器兼容先后顺序 -->
- <title></title> 网页标题
-<link /> 引用css,js等文件
-<style></style>写css样式区域
-<script></script>写js代码区域
body中的标签
-<img /> 图片,图标
属性: src , alt , title
-<p></p> 段落
-<br /> 换行
-<h1></h1> ....<h6></h6>
-<div></div>
-<span></span>
-input系列+form标签
<form></form> 属性 action='' 表单提交地址, method='' 表单提交方式 get 或者post
<input type='text' /> 单行文本输入框
<input type='password' /> 密码输入框
<input type='submit' /> 提交按钮
<input type='button' /> 按钮
<input type='radio' /> 单选框 value，checked="checked"，name属性（name相同则互斥）
<input type='checkbox' /> 复选框 value, checked="checked"，name属性（批量获取数据）
<input type='file' /> 依赖form表单的一个属性 enctype="multipart/form-data"
<input type='rest' /> 重置按钮
<textarea >默认值</textarea> 多行文本输入框
<select></select> 下拉框 , 内部option value, 提交到后台，size，multiple
-<a></a>标签
跳转 href='网址' 跳转至某个页面
锚 href='#某个标签的ID' 标签的ID不允许重复
- 列表
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
属性colspan = '3' 表示横向 占3格 ; 属性rowspan = '3' 表示纵向占3格 用于合并单元格
- label
用于点击文件，使得关联的标签获取光标
1 <label for="username">用户名：</label> 2 <input id="username" type="text" name="user" />
CSS
编写css样式：
1. 可以写在标签的style属性里
2. 可以写在head的style标签中
- id选择器
#id{
width: 60px;
height: 100px;
}
- class选择器
.名称{
....
}
表示选择class='名称'的所有标签设置此样式
- 标签选择器
div{
....
}
所有div设置上此样式
- 层级选择器(空格)
.c1 .c2 div{ .... }
给class='c1'的标签下的 class='c2'的标签下的 div标签设置此样式
- 组合选择器(逗号)
#c1 , .c2 , div{ ... }
给所有id='c1' 的标签 , 所有class='c2'的标签, 所有div标签都设置此样式
- 属性选择器 ******
对选择到的标签再通过属性再进行一次筛选
.c1[n='alex']{ width:100px; height:200px; }
给class='c1', 并且包含属性n='alex'的标签设置此样式
样式生效优先级--> 标签上的style优先, 编写顺序, 就近原则
css基本样式:
1、边框
- 宽度，样式，颜色 (border: 4px dotted red;)
- border-left ; border-right; border-top ;border-bottom
2、
height;20px height;20% 高度 百分比
width:20px width:20% 宽度 像素，百分比
text-align:ceter 水平方向居中
line-height:20px 垂直方向根据标签高度
color:#ddd 字体颜色
font-size: 12px 字体大小
font-weight :200 字体加粗
background: #ddd background:url(图片地址) 背景颜色 图片
3、 float让标签浪起来，块级标签也可以堆叠
让父标签控制子标签：<div style="clear: both;"></div>
4、display
display: none; -- 让标签消失
display: inline;
display: block;
display: inline-block;
具有inline,默认自己有多少占多少
具有block，可以设置高度，宽度，padding margin
******
行内标签：无法设置高度，宽度，padding margin
块级标签：可以设置高度，宽度，padding margin
5、内边距 外边距
padding 内边柜
margin(0,auto) 外边距
