HTML/CSS初接触

本人作为在校生，接触HTML没有多久，此前在慕课网上看过HTML/CSS的教程，但从未系统的学习过，经同学的推荐，才知道了百度前端学院， 开启了歪歪扭扭的学习之旅。
正文：

一、细节要点
1.开始编辑一个网页时最基本的框架，虽然这段代码大多数的IDE工具都能自动的生成，但对初学者来说建议还是自己打一下吧

< !DOCTYPE>声明不是HTML标签；它指示web浏览器关于页面使用哪个HTML版本进行编码的指令
在HTML 4.01中< !DOCTYPE>声明引用DTD，因为HTML 4.01基于SGML。
DTD规定了标记语言的规则，这样浏览器可以正确地呈现内容。
HTML5不基于SGML，所以不需要引用DTD <<span class="hljs-name" style="box-sizing: border-box;">html> <<span class="hljs-name" style="box-sizing: border-box;">head> <<span class="hljs-name" style="box-sizing: border-box;">meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <<span class="hljs-name" style="box-sizing: border-box;">title>网页标题</<span class="hljs-name" style="box-sizing: border-box;">title> </<span class="hljs-name" style="box-sizing: border-box;">head> <<span class="hljs-name" style="box-sizing: border-box;">body> </<span class="hljs-name" style="box-sizing: border-box;">body> </<span class="hljs-name" style="box-sizing: border-box;">html>

2.空格，在html中输入空格是没有作用的，需要输入 这个代码

3..下拉选择框或复选框，.下拉选择框selected="selected"设置默认选中，复选框checked="checked"设置默认选中

<<span class="hljs-name" style="box-sizing: border-box;">select> <<span class="hljs-name" style="box-sizing: border-box;">option>北京</<span class="hljs-name" style="box-sizing: border-box;">option> <<span class="hljs-name" style="box-sizing: border-box;">option>杭州</<span class="hljs-name" style="box-sizing: border-box;">option> <<span class="hljs-name" style="box-sizing: border-box;">option selected="selected">上海</<span class="hljs-name" style="box-sizing: border-box;">option> </<span class="hljs-name" style="box-sizing: border-box;">select>

`

运动`

4.td标签中的colspan属性设置单元格合并

二、语义化标签

以下标签语义化的表示章节结构，在HTML5之前都是用div标签进行分隔
header 页面头部／标题／logo／搜索表单 等等
nav 任何有导航性质的标签都可以用到，比如页面中的导航，可以有多个
aside 和主要内容不相关的内容，工具内容／广告什么的
article 表示独立的可重复的结构：论坛的帖子／博客的评论
section 表示文档中的一个区域：一般会带一个标题　相临的section之间是有相关性的，article则不相关，是独立的
footer 章节的尾部：版权信息／相关文档／一些独立内容的尾部也可以用到

1.首行缩进两个字符：text-intent:2em

2.img标签与div层之间会有空隙
解决方法：使用display:block就可以消除

3.优先级问题：

1.ID>Class>HTML

2.同级时选择离元素最近的一个

例如：

#p{color:red;}

#p{color:blue;}

执行颜色为blue的

三、CSS的常见属性（CSS选择器）：

1.颜色属性：

color属性定义文本颜色。
color:green
color:#ff6660 简写式 color:#f60
color:rgb(255,255,255)——r,g,b每个颜色的取值范围0~255
color:rgba(255,255,255,1)——r,g,b还是三原色，a表示Alpha的(色彩空间)透明度

2.字体属性：

1.font-size字体大小：

px:设置一个固定的值
%:父元素的百分比
smaller:比父元素更小
larger:比父元素更大
inherit:继承父元素

2.font-family定义字体：

font-family:'微软雅黑','serif';
可以使用","隔开，来确保当字体不存在的时候直接使用下一个。

3.font-weight字体加粗：

normal(默认值)、bold(粗)、bolder(更粗)、lighter(更细)
400 = normal，而 700 = bold
如果用数字表示取值范围是100～900，且必须是整百数，401之类，是绝对不可以的。

4.font-style字体样式：

normal:正常（标准）
italic:斜体
oblique:倾斜
inherit:继承

5.font-variant小型大写字母显示文本：

主要针对英文，如果选择small-caps就代表着英文字母会大写显示

normal:标准
small-caps:小型大写字母显示文本
inherit:继承

3.背景属性：

1.背景颜色 background-color

2.背景图片 background-image

background-image:url(图片路径)
background-image:none

3.背景重复background-repeat

repeat:重复铺满
repeat-x:向X轴重复
repeat-y:向Y轴重复
no-repeat:无重复

4.背景位置background-position

横向（left,center,right）
纵向（top,center,bottom）
可以用数值来表式位置

5.简写方式

background:背景颜色 url(图像) 重复 位置
background:#f60 url(beautiful.jpg) no-repeat top center

4.文本属性：

1.text-align 横向排列

left,center,right

2.line-height 文本行高

% 基于字体大小的百分比行高
数值 来设置固定值

3.text-indent 首行缩进

% 父元素的百分比
px固定值，默认为0
inherit 继承

4.letter-spacing 字符间距

normal 默认值
px 设置具体的数值（可以设置负值）
inherit 继承

5.word-spacing 单词间距

normal 标准间距
px 设置固定的值
inherit 继承

6.direction 文本方向

ltr 从左到右，默认值
rtl 从右到左
inherit 继承

7.text-transform 文本大小写

capitalize 每个单词以大写字母开头
uppercase 定义仅有大写字母
lowercase 定义无大写字母，仅有小写字母
inherit 规定应该从父元素继承 text-transform 属性的值

5.边框属性：

1.边框风格 border-style

统一风格:(简写风格)border-style
单独定义某一方向的边框样式:
border-top-style　border-bottom-style　
border-left-style　border-right-style
边框风格样式的属性值:

1. none 无边框
2. solid 直线边框
3. dashed 虚线边框
4. dotted 点状边框
5. double 双线边框
6. groove 凸槽边框
7. ridge 垄状边框
8. inset inset边框
9. outset outset边框
10. inherit 继承
    其中，6~9依托于border-color的属性值（用的比较少）

2.边框宽度 border-width

1. thin 细边框
2. medium 中等边框
3. thick 粗边框
4. px 固定值的边框
5. inherit 继承

3.边框颜色 border-color

1.统一风格：border-color
2.单独风格：
border-top-color　border-bottom-color
border-left-color　border-right-color
3.属性值：RBG、RGBA、十六位进制、inherit
4.属性值的四种情况：
一个值（border-color [上、下、左、右]）
两个值（border-color [上、下] [左、右]）
三个值（border-color [上] [左、右] [下]）
四个值（border-color [上] [右] [下] [左]）

4.简写方式

border: solid 2px #f60

6.列表属性：

1.标记类型 list-style-type

none 无标记。
disc 默认。标记是实心圆。
circle 标记是空心圆。
square 标记是实心方块。
decimal 标记是数字。
decimal-leading-zero 0开头的数字标记。(01, 02, 03, 等。)
lower-roman 小写罗马数字(i, ii, iii, iv, v, 等。)
upper-roman 大写罗马数字(I, II, III, IV, V, 等。)
lower-alpha 小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
upper-alpha 大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
lower-greek 小写希腊字母(alpha, beta, gamma, 等。)
lower-latin 小写拉丁字母(a, b, c, d, e, 等。)
upper-latin 大写拉丁字母(A, B, C, D, E, 等。)
hebrew 传统的希伯来编号方式
armenian 传统的亚美尼亚编号方式
georgian 传统的乔治亚编号方式(an, ban, gan, 等。)
cjk-ideographic 简单的表意数字
hiragana 标记是：a, i, u, e, o, ka, ki, 等。（日文片假名）
katakana 标记是：A, I, U, E, O, KA, KI, 等。（日文片假名）
hiragana-iroha 标记是：i, ro, ha, ni, ho, he, to, 等。（日文片假名）
katakana-iroha 标记是：I, RO, HA, NI, HO, HE, TO, 等。（日文片假名）

2.标记的位置 list-style-position

inside 列表项目标记放置在文本以内，且环绕文本根据标记对齐。
outside 默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。
inherit 规定应该从父元素继承 list-style-position 属性的值。

3.设置图像列表标记 list-style-image

URL 图像的路径。
none 默认。无图形被显示。
inherit 规定应该从父元素继承 list-style-image 属性的值。

4.简写方式 list-style

list-style:square inside url('/i/arrow.jpg')

四、DIV+CSS布局

1.div和span
div和span在整个HTML标记中，没有任何意义，他们的存在就是为了应用CSS样式.
div和span的区别在于，span是内联元素，div是块级元素
2.盒模型

margin: 盒子外边距
padding: 盒子内边距
border: 盒子边框宽度
width: 盒子宽度
height: 盒子高度

3.布局相关的属性

1.position定位方式

1.relative 正常定位
2.absolute 根据父元素进行定位
3.fixed 根据浏览器窗口进行定位
4.static 没有定位
5.inherit 继承

2.定位

left、right、top、bottom 离页面顶点的距离

3.z-index 层覆盖先后顺序(优先级)

4.display显示属性

display:none 该层不显示
display:block 块状显示，在元素后面换行，显示下一个块元素(block会尽可能的占据更多的width)
display:inline 内联显示，多个块可以显示在一行内(只占据它需要的width)

5.float浮动属性

left 左浮动
right 右浮动

6.clear清除浮动

clear:both

7.overflow溢出处理(主要是盒子小了，内容多了)

hidden 隐藏超出层大小的内容
scroll 无论内容是否超出大小都添加滚动条
auto 超出时自动添加滚动条

8.box-sizing设定盒模型的类型

通常，当我们定义一个div的时候，我们给出的width和height其实仅仅只是盒子的content的宽和长。
padding和border会另外加上。
比如：
div {
　 　width:300px;
　 　height:300px;
　 　padding:10px;
　 　border:10px;
}
此时的盒模型将会是320x320的大小，并不是我们希望的300x300
为了避免这样情况的发生，我们会使用

• {
  　 box-sizing:border-box;
  }
  这时候，我们同样使用如下代码，
  div {
  　 　width:300px;
  　 　height:300px;
  　 　padding:10px;
  　 　border:10px;
  }
  此时的盒模型，大小依旧是300x300,content只有260x260
• 五、细节要点

• 1、每写完一句要想换行每次都要加一个换行标签< br/>比较麻烦，而预格式文本（所谓预格式文本就是指代码页和网页展示是一样的格式，不用额外添加换行符标签就能换行）< pre>....< /pre>标签的使用把后面的换行符都删掉，将其内容丢到<pre>标签中，就可以得到与之前差不多的格式。

• 2、.定义性列表

  定义列表通常用于术语的定义和解释。定义列表由< dl>开始，术语由< dt>开始，解释说明由< dd>开始，< dd>....< /dd>里的文字缩进显示

•