html+css入门
1 HTML
好早之前写的，今天突然看到了，发出来吧，不能浪费自己的劳动力啊！！！
1.1 基础知识
html可扩展超文本标记语言
让你的每个想法成为现实
是一个平台，css，gs
API 定位、音频、视频
在移动设备开发HTML5应用只有两种方法，要不就是全使用HTML5的语法，要不就是仅使用JavaScript引擎。
1.2
<html>html> html5程序
<head>head> 头部 <title>title> 标题
<body>body> 躯干（文字、图片、链接）1.3 一个标准开头 （！+Tab）文件后缀名为html
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
head>
<body>
body>
html>1.4 h1~h6 六种标题模式，格式大小依次减小
这是一个标题
这是一个标题
这是一个标题
这是一个标题
这是一个标题
这是一个标题
1.5
<p>这是一个段落p>1.6
水平线<hr/>1.7
换行<br/>1.8
引用<blockquote>blockquote>
预格式<pre>pre>1.9
ol>li*3 + Tab 自动生成列表格式
<ol>
<li>li>
<li>li>
<li>li>
ol>1.10
h2*3 + Tab 自动生成3个
<h2>h2>
<h2>h2>
<h2>h2>1.11 有序列表标签
<ol>
<li>填写信息li>
<li>提交信息li>
<li>注册成功li>
ol>1.12 无序标签
<ul>
<li>li>
<li>li>
<li>li>
ul>文字前面加项目号“点”
1.13 描述标签
<dl>
<dt>标题dt>
<dd>描述1dd>
<dd>描述2dd>
dl> 标题
描述1
描述2
1.14 div把网页分成不同的布局、分区、容器
1.15
Ctrl+/ 注释选中的内容、注释该行
1.16
< header>
//但是在显示上没有区别
头部logo、搜索框、目录等
</header>1.17
<footer> //但是在显示上没有区别
尾部联系信息、版权信息等
footer> 1.18 增加样式
<footer style="background-color: blue">
这是尾部
footer>1.19 < nav>网页主导航
<nav>
<ul> //无序标签
<li>首页li>
<li>产品介绍li>
<li>公司新闻li>
<li>技术中心li>
<li>联系我们li>
ul>
nav>1.20 < hgroup> 标题组
<hgroup>hgroup>1.21< article>定义文章
<article>article>1.22 各种标签可以嵌套使用
1.23
<section>
定义节，表示专题
section>会生成大纲目录，而div不会生成
里面一般跟< h1>标题< h2> …… 不加的话会导致专题错乱
1.24 < aside>侧边
1.25 html直接命名方式：
输入“网页.html” Ctrl+S 保存
1.26 输入文字时，没有任何区别
<header>头部logo、搜索框、目录等header>
<footer>尾部联系信息、版权信息等footer>
<article>文章article>
<section>定义节，表示专题section>
<aside>侧边aside>
<time>时间戳time>1.27 HTML 表单
1.27.1
元素是最重要的表单元素。
元素有很多形态，根据不同的 type 属性。
HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。
- email
- url
- number
- range
- Date pickers (date, month, week, time, datetime, datetime-local)
- search
- color
1.27.2 Action 属性
action 属性定义在提交表单时执行的动作。
向服务器提交表单的通常做法是使用提交按钮。
通常，表单会被提交到 web 服务器上的网页。
在上面的例子中，指定了某个服务器脚本来处理被提交表单
如果省略 action 属性，则 action 会被设置为当前页面。
<form action="action_page.php">1.27.3 Method 属性
method 属性规定在提交表单时所用的 HTTP 方法（GET 或 POST）：
<form action="action_page.php" method="GET">
<form action="action_page.php" method="POST">何时使用 GET？
如果表单提交是被动的（比如搜索引擎查询），并且没有敏感信息。
当您使用 GET 时，表单数据在页面地址栏中是可见的：
action_page.php?firstname=Mickey&lastname=Mouse
GET 最适合少量数据的提交。浏览器会设定容量限制。
何时使用 POST？
如果表单正在更新数据，或者包含敏感信息（例如密码）。
POST 的安全性更加，因为在页面地址栏中被提交的数据是不可见的。
1.27.4 Name 属性
如果要正确地被提交，每个输入字段必须设置一个 name 属性。
本例只会提交 “Last name” 输入字段：
<form action="action_page.php">
First name:<br>
<input type="text" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
form> 1.27.5 Name 属性
用 组合表单数据
元素组合表单中的相关数据
元素为 元素定义标题。
| 属性 | 描述 |
|---|---|
| accept-charset | 规定在被提交表单中使用的字符集（默认：页面字符集）。 |
| action | 规定向何处提交表单的地址（URL）（提交页面）。 |
| autocomplete | 规定浏览器应该自动完成表单（默认：开启）。 |
| enctype | 规定被提交数据的编码（默认：url-encoded）。 |
| method | 规定在提交表单时所用的 HTTP 方法（默认：GET）。 |
| name | 规定识别表单的名称（对于 DOM 使用：document.forms.name）。 |
| novalidate | 规定浏览器不验证表单。 |
| target | 规定 action 属性中地址的目标（默认：_self）。 |
| onsubmit | onsubmit 属性在提交表单时触发。onsubmit 属性只在 |
2 CSS
2.1 CSS
外观美化
布局、定位
2.2. header、footer、center、left、right
头 尾 中间 左 右
2.3. 三种定义样式的方法
#### ①在本文件下的表示方法
<head>
<style type="text/css"> //样式
选择器（即修饰对象）{ //.g{ }
对象属性1：属性值1； //font：
对象属性2：属性值2； //height：50px；
}
style>
head>②在1.css文件中的表示方法
"stylesheet" type="text/css" href="1.css">③直接跟着定义样式
2.4. red = #FF0000 = rgb(255,0,0) 红色
blue = #0000ff = 蓝色
green = #00FF00 = 绿色
#ccc = #cccccc 灰色
#fff = #ffffff 白色
black = #333 黑色2.5. li标签选择器
html:
列表项1 （改变标签里的样式类型）
css:
针对所有列表
li{
color: rgb(255,0,0); /*#ff0000 red*/
font-size: 30px;
} color: rgb(255,0,0); 颜色
font-size: 30px; 字体大小2.6. 类选择器 class（把一堆样式划为一类）
div.topBar +Tab = <div class="topBar">div>当前页面内可以多个同样
html:
<li class="blue">列表项2li>css:
.blue{
color: #0000ff;
}2.7. ID选择器 id（也可控制某个DIV样式）
当前页面内唯一id；
如果页面内出现多个相同id，虽然可以解析出，但不规范，不建议
id="item">列表项1
#item{
color: #00FF00;
font-size:40px;
}| 标签选择器 | 类选择器 | ID选择器 | 优先级 |
|---|---|---|---|
| 1 | 10 | 100 | 权重 |
权重越大，优先级越高，优先级高的覆盖优先级低的
各种选择器可以用在列表li、容器div等中
html:
<div>这是一个Divdiv>CSS:
div{
background-color: #ccc;
}2.8. 为CSS单独建立文件（建立链接link）
<link rel="stylesheet" type="text/css" href="style.css">
<link + Enterstyle.css 新建文件
@charset 'utf-8';2.9. font
width: 200px;宽度
font-weight: bold; 字体粗细（粗体）
font-size: 12px; 字体大小
color: #ff7300; 字体颜色
background-color: #ccc; 背景色2.10. 长度单位：px 像素
颜色
十六进制：#ffffff
颜色名称：red
尺寸属性：
Height、max_height、min_height
width、max_width、min_width
字体、字号：
font 缩写形式
font-weight 粗细
font-size 大小
font-family 字体系列
font-style 字体样式
字体颜色
color
opacity 透明度 css3
行距、对齐等
line-height 行高
text-align 对齐
letter-spacing 字符间距
text-decoration 文本修饰
overflow 浮动
text-overflow
text-indent2.11. 列表宽度决定了列表项宽度
height: 100px;
line-height: 100px; 使其上下居中对齐
text-align: right; 水平对齐方式：水平靠右
text-align: center; 水平对齐方式：水平居中
letter-spacing: 10px; 字间距
text-decoration: none; 下划线设置（去除）
white-space: nowrap; 设为一行显示
overflow: hidden;
display: block; 隐藏多余内容2.12. 链接 默认带下划线
2.13.图片
background-image: url(images/1.jpg); 插入图片
background-image: url(../images/1.jpg); 插入上一级文件夹中images文件夹中的图片1.jpg
background-repeat: no-repeat; 图片默认多大就是多大（不加自动复制显示）
background-position: 50px 50px; 移动图片（正数为右下角，负数为左上角）2.14.
<div class=" size show show-1">div>每个样式间用空格隔开，有三个样式 size、show、show-1
2.15. list-style:none; 去除前面的列表序列号
2.16. 块级元素 默认占一行
★float: left; 浮动 将块级元素变为行级元素 让多行在一行 如果一行放不下，自动转第二行
height: 50px; /*使其上下居中对齐*/
line-height: 50px; /*使其上下居中对齐*/
text-align: center; 水平对齐方式：水平居中
margin-right: 5px; 每个元素间间隔5px
font-size: 20px; 字体大小2.17. background: #fff; 背景为白色
cursor: pointer; 当移动到当前位置时（配合li:hover）变成小手
transition: all 1s ease; 渐变效果（有些浏览器不支持）
-webkit-transition:all 1s ease;
-o-transition:all 1s ease;
-moz-transition:all 1s ease;
-ms-transition: all 1s ease; 对于不支持的浏览器，解决方案2.18. border 边框
2.19.height 高度
width 宽度（可以认为是长度）
font-family：隶书；字体
2.20. 焦点
鼠标移到当前位置时的状态
a:hover{
color: red;
}
/*鼠标激活选定状态*/
a:active{
color: green;
}2.21. border: 1px solid red; 添加边框
2.22.
<div style="clear: both">div> 用于消除浮动效果导致的顺序错乱2.23. 超链接样式的四种状态
未访问状态 a:link
已访问状态 a:visited
鼠标移上状态 a：hover
激活选定状态 a：active2.24 盒子（矩形方框）
margin（外边距/边界）
border（边框）
padding（内边距/填充）
width 宽度
height 高度
2.25 margin 外边距/边界
margin：1px 2px 3px 4px 外边距/边界（上右下左）
margin：1px 2px 外边距/边界（上下、左右）
margin：1px 外边距/边界（上下左右、通常表现出来上左）
margin
一个值：4边
两个值：上下、左右
四个值：上右下左
margin-left: auto; 左边距自动
margin-left: auto; /水平居中/
margin-right: auto; /水平居中/
margin: 0px auto; /水平居中，有的浏览器不支持/
2.26 默认下，div没有边框border（有颜色）
默认不显示border
border-color: blue;
border-width: 10px;
border-style: solid; 以上三句话使其最终显示 solid实心的
border width style color
border：20px solid green 一句话也可以显示
border-top:30px solid #ccc; 设置上边框属性
2.27 padding-top: 20px; 内边距（上）
padding: 20px; 内边距（上下左右）
padding: 20px 50px; 内边距（上下、左右）
2.28 对同一属性做设置，后面的优先级高
6. 对外边距/边界设置，一般统一格式，不要上边设下边距，下边设上边距；如果设置，按大的显示
margin-bottom: 30px;
2.29
.topbar .search .topabar .link{float:right;} 共用一种样式{浮动 将块级元素变为行级元素}
2.30 解决浮动问题，使用尾类
.fix{*zoom:1;*clear:both;}
.fix:before,.fix:after{
display: table;clear:both;
content: '';
}
"wrap fix"> +fix谁的子元素浮动，就可以清除影响
.fix{*zoom:1;*clear:both;}
.fix:before,.fix:after{
display: table;clear:both;
content: '';
}
2.31 定位
position: absolute; 绝对定位
position: relative; 相对定位
参照物是距离最近 定位的父元素
2.32 对定位元素显示排序
z-index: 1; 数字越大，优先级越高
设置 鼠标指到哪里，哪里在上边
.c4:hover{
z-index: 3;
}
2.33 响应式
viewport
设备方向：Orientation
设备方向：Orientation
2.34
top: 25px; 距离上方25px
left: 15px; 距离左边15px
2.35 display: none;不显示
2.36
@media screen and (max-width: 900px){ } 当分辨率小于900px时
2.37 line-height: 1.8; 行高