前端之常用标签和CSS初识
外层div的宽度是100%，就是视口的大小，当视口被拉窄到小于内层div的宽度980px时，比如800px，此时
外层div宽度为800px，内层div宽度依然为980px，而css中只设置了外层div有背景色，所以说只有800px那一部分会显示背景色，而超出视口的部分是属于内层div的，内层没有设置背景色，所以是空白！
标准规范介绍
告诉浏览器文档使用哪种 HTML 或者 XHTML 规范。
HTML 5
HTML 4.01 Strict
HTML 4.01 Strict
lang属性规定元素内容的语言
- 简体中文页面：html lang=zh-cmn-Hans
- 繁体中文页面：html lang=zh-cmn-Hant
- 英语页面：html lang=en
需要了解更多请点击-->
[网页头部的声明应该是用 lang="zh" 还是 lang="zh-cn"？](http://www.zhihu.com/question/20797118?utm_source=weibo&utm_medium=weibo_share&utm_content=share_question&utm_campaign=share_sidebar "网页头部的声明应该是用 lang="zh" 还是 lang="zh-cn"？")
meta标签
http-equiv = "X-UA-Compatible"这个是IE8专有的设置
优先使用IE最高版本渲染
页面关键词 keywords
页面描述内容 description
定义网页作者 author
定义网页搜索引擎索引方式
robotterms 是一组使用英文逗号「,」分割的值，通常有如下几种取值：none，noindex，nofollow，all，index和follow。
标签分类
- 自闭合标签
- 主动闭合标签
title>老男孩
常用标签
- 空格
- > 大于
- < 小于
- p标签 段落
- br 换行
所有标签分为：
块级标签： div（白板），H系列（加大加粗），p标签（段落和段落之间有间距）
行内标签： span（白板）
标签存在的意义，css操作，js操作
input系列 + form标签
input type='text' - name属性，value="你好"
input type='password' - name属性，value="你好"
input type='submit' - value='提交' 提交按钮，表单
input type='button' - value='登录' 按钮
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' - 重置
name 和value是一对 提交到server端，用来调用， value还可以做默认值，比如type='text'
- name属性
select标签
- name,内部option value, 提交到后台，size，multiple
又来一波常用标签
a标签
- 跳转
- 锚 href='#某个标签的ID' 标签的ID不允许重复
img
src
alt
title
列表
ul
li
ol
li
dl
dt
dd
表格
table
thead
tr
th
tbody
tr
td
colspan = '' //列
rowspan = '' //行
label
用于点击文件，使得关联的标签获取光标
fieldset
legend
css
在标签上设置style属性：
background-color: #2459a2;
height: 48px;
...
编写css样式
-
标签的style属性
-
写在head里面 style标签中写样式
- id选择区
#i1{
background-color: #2459a2;
height: 48px;
}- class选择器 ******
.名称{
...
}<标签 class='名称'> </标签>
- 标签选择器
div{
...
}所有div设置上此样式
- 层级选择器（空格） ******
.c1 .c2 div{}
- 组合选择器（逗号） ******
#c1,.c2,div{}
- 属性选择器 ******
对选择到的标签再通过属性再进行一次筛选
.c1[n='alex']
优先级，标签上style优先，编写顺序，就近原则
css样式也可以写在单独文件中
注释
/* */
边框
宽度，样式，颜色 (border: 4px dotted red;)
- border-left
高度和字体颜色
height， 高度 百分比
width， 宽度 像素，百分比
text-align:ceter, 水平方向居中
line-height，垂直方向根据标签高度
color、 字体颜色
font-size、 字体大小
font-weight 字体加粗
float
让标签浪起来，块级标签也可以堆叠
老子管不住：
display
display: none; -- 让标签消失
display: inline;
display: block;
display: inline-block;
具有inline,默认自己有多少占多少
具有block，可以设置无法设置高度，宽度，padding margin
******
行内标签：无法设置高度，宽度，padding margin
块级标签：设置高度，宽度，padding margin
padding margin(0,auto)
浙公网安备 33010602011771号