HTML与css学习总结
一；html概念
1. html是一种描述网页的语言，并不是计算机语言这要分清楚；标记语言是运用一套标记标签描述网页的；
注意点：
①标签字母都要小写，标签一般都是成对出现，有开始标签与闭合标签；也有自结束标签<meat>,
<br/>等；
html标签包括行内标签和块级标签；块级标签用于搭建网页结构独占一行，行内标签用于修饰细节，宽度只有自身内容的宽度，并排显示；
常用的标签：
行内标签：span,a,strong,em,b,img,input,label,select,textarer
块级标签：div,p.ul,ol,li,dl,form,addeess,hr,h1-h6,menu,table,
要遵循嵌套规则，块套块--块套行内--行内中不要套块
使用标签还需要注意语义化，有助于网页的seo优化，提高自己的代码可读性；
ul，ol搭配li使用；p标签中间最好只放文字；
表单标签总结
表单：提交数据 form-----表单 三要素：
、action----提交地址
、name----数据名称
、submit------提交按钮 表单元素：
输入类：text、password、textarea（标签） 选择类：radio、checkbox、select（标签） 按钮类：submit、button、reset、image 文件上传：file 其他属性：
表单隐藏：hidden 提交方式： get------数据会显示在地址栏-----32k-------分享/收藏 post-----数据不显示在地址栏-----1g-----相对安全-----JS
常见标签使用↓↓↓
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head> <body>
<div></div>
<ul>
我是ul标签
<li>我是li标签</li>
</ul>
<ol>
<li>我是ol里的li标签</li>
</ol>
<dl>
定义列表标签
<dt>定义列表的标题</dt>
<dd>项目描述</dd>
<dd>可以跟多个</dd>
</dl>
<a href="#" target='_blank'>我是a标签，用于超链接操作</a>
<a name='xx'>制作锚点</a>
<img src="##" alt="替换的文字" title="我试提示信息（我试图像）"align='left'>
align='left,right,center,top,bottom,middle,bottom'可以接收上下左右
<h1>我是标题标签</h1>
<title>我是定义文档标题</title>
<hr/>我是水平线
<p dir='ltr'>我试段落标签</p> dir是规定文字走向left to right
<address>我试定义作者的标签</address>
<b>我是粗体标签</b>
<em>强调文本</em>
<i>我是定义斜体标签</i>
<form>定义表单标签</form>
<input>输入控件标签；
<textarea>定义多行文本输入</textarea>
<button>定义按钮</button>
<option>定义选项列表</option>
<menu>我是命令菜单/列表</menu>
<span>我是span标签，定义文档中的节</span>
<style>css文件放我这里</style>
<del>删除标签</del>
<table>
<caption>我是表格标签的标题</caption>
<th>表格中的表头单元格</th>
<tr>表格中的行</tr>
<td>表格中的列</td>
<thead>表格中的表头内容</thead>
<tbody>表格中主题内容</tbody>
<tfoot>表格注脚</tfoot>
</table>
</body>
</html>
2.css样式
css样式语法
css总结小特性：
1.一定记得当属性赋值结束后写上引号；一行最好一层代码，提升可读性
2.css具有继承的特性，子元素可以继承父元素的文本样式；a标签的color不能继承；
3.覆盖：父级有的样式，子级也有，用子级自己的
4.css选择器：ID >类> tag> *> 属性(优先级)，还有一些伪类选择器： first-child，last-child,nth-chid,还有一些自己平常喜欢用的属性选择器，用起来超级方便；
5.选择器比较
ID 标签 class
写法： id=“name” 无 class=“name”
#name{CSS} 标签名{CSS} .name{CSS}
精确： √ × √
重用： × √ √
用途： JS 重置 常用
6.属性选择器使用方法；
[attr]=用于带有指定属性的；
[attr=value]=用于选取指定属性指定值
[attr~=value]包含value的；
[attr^=value]开头值是value的元素
[attr|=value]开头值，但是必须整个单词
[attr$value]结尾是value的每个元素
[attr*=value]匹配指定value的每个元素；
7.子选择器；只希望更改自己直属子集的样式，不影响后面的子级；
div> span {color:red;} 只改变div下面的一级子标签span
8.相邻兄弟选择器
h1 + p {margin-top:50px;}，只改变h1下面的相邻的p标签的样式；
7.伪元素
before，向元素前面添加元素；
after，向元素后面添加元素
first-line" 伪元素用于向文本的首行设置特殊样式。
first-line" 伪元素用于向文本的首行设置特殊样式。
8.伪类
顺序是 l-v-h-a
- a:link - 普通的、未被访问的链接
- a:visited - 用户已访问的链接
- a:hover - 鼠标指针位于链接的上方
- a:active - 链接被点击的时刻
如何使用样式？
①：link引入css文件；
<link rel='stylesheet' type='text/css' href='mystyle.css'>
②写在style标签中
<head> <style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>
③写在行间样式内；
<p style="color: red; margin-left: 20px">
This is a paragraph
</p>
css样式-背景
background-color：背景色；
background-image：背景图 后面跟url地址 是否平铺 定位left、top；
background-repeact:是否平铺；
background-position：背景图定位；可以接收百分比；
background-attachment:scroll/fixed 是否随内容滚动而滚动；
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
div{background:#F00;}
</style>
</head>
<body>
<div style="width:100px; height:100px;background:#F00"></div>
<div style="width:100px;height:100px;background-image:url(http://img10.360buyimg.com/.jpg);"></div>
<div style="width:200px; height:200px;background-position:10px 10px "></div>
</body>
</html>
css文本样式
vertical-align----以文本基线为对齐方式
text-indent：1em/1px/% 文本缩进，可以接受负值；样式可以继承；
text-align:left/right/center 文本水平对齐；
word-spacing： px/em长度值 文字或者单词之间的；
latter-spacing：px/em文字或者字母之间的距离;
text-transform: uppercase 全部字母大写；
text-transform: lowercase 全部小写；
text-transform: capitalize 首字母大写；
text-decoration: 文本修饰
- none 默认
- underline 下划线
- overline 上划线
- line-through 中划线
line-height: px 行高
white-space 空白处理方式
color:设置文本颜色；
font-size:设置文字大小；
font-weight：设置出息
font-family;字体系列
font-style：字体风格
8.盒模型
引用w3c-----
同时设置四边的边距时，顺序是 top-right-bottom-left;
外边距：margin-top/bottom/left/right/不算盒模型； margin边距会发生重叠取最大值；外边距还会出现合并现象；所以会出现margin变小现象；margin：10px auto；块元素居中；
内边距：padding-top/bottom/left/right/算盒模型里；
边 框：border-width/border-style/border-color/ 可以连在一起写；也可以同时设置四个边的任意一边；left/top/right/bottom;
块元素与行内元素边距对比
块元素---支持
大小----支持
间距-----margin---支持
留白-----padding----支持
边框----border----支持
行内-----有限的盒模型
大小------不支持
留白----padding----支持（会撑大盒子的大小）
间距----margin-----有限支持（只支持左右margin）
边框-----border-支持
9. position定位；
①定位就是css提供的一种布局属性，可以建立列式布局，将布局的一部分与另一部分重叠；让元素出现在该出现的地方；
②行内元素加上定位属性后，会成为块级元素。可以设置宽高；
- static（默认）
- 元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
- relative（相对于浏览器定位，一般加给父级）
- 元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
- absolute clip:rect(0px 50px 200px 0px)剪切显示的图像；相对于有定位元素的父级定位；
- 脱离文档流，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
- fixed 固定定位；
- 元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。
定位元素的index升高，强制升高可以设置z-index属性；
10.float浮动
float 属性定义元素在哪个方向浮动。解决块级元素不能在同一行显示的问题；也可以使文本围绕在图像周围，在 CSS 中任何元素都可以浮动。浮动元素会生成一个块级框，浮动后高度消失；靠内容才能撑起来； 浮动的方向：float:left/right;出现一些问题，背景不能显示，边框不能被撑开，浮动的元素父级height消失；
清除浮动的三种方法；
1.直接给父级加高度；
2.在浮动最后的一个元素后面加上一个新元素设置属性，clear：both；
3.父级直接overflow:hidden；
浮动中还有很多内容，我只是根据自己的学习回忆能记得的东西；想学好编程。我们还要多写啊
响应式布局
1.RWD指的是响应式web设计，指能够适应不同屏幕的尺寸传递网页，
HTML统一资源定位器：
url:也被称为网址；
scheme--定义因特网服务类型。最常见的是HTTP（超文本传输协议）；
host--定义域主机（HTTP默认是www）
domain--定义域名.com.cn
:port--定义主机端口号（HTTP默认端口号是80）
path--定义服务器路径；
filename--定义文档，资源的名称；