前端——HTML和CSS学习０.１

标题

HTML基础强化

• 前端三大件：

   HTML结构  CSS样式  JS行为
  

• HTML常见元素

（1）HEAD区元素：不会在页面上留下直接的内容,是与页面相关的一些资源与信息描述等等 meta,title,style,link,script,base
（2)BODY区元素：直接出现在页面上的，因此元素相对丰富
div万能的元素，语义并不明确
section/article/aside/header/footer有明确含义的区域
p比较特殊的标签，表示一个段落，连续的两个< p>标签中间是有间距的，不是紧挨在一起的
从< h1>到< h6>标题元素,默认加粗，字体大小越来越小
span表示行em默认斜体 strong默认粗体
table/thead/tbody/tr（行）/td（单元格）/th（表头）
列表类元素：ul（无序列表）/ol（有序列表）/li/dl/dt（定义列表标题）/dd（定义列表内容）
链接元素：a （整个web非常核心的元素）
表单元素：form/input（输入框）/select(下拉框）/textarea（一块文本输入区）/button（按钮）
（3）<meta charset=“utf-8”> charset表示使用的是什么字符集合 （加在HEAD区第一行）
viewport 视口：屏幕代表页面多大的尺寸 width=device-width视口宽度等于屏幕宽度
<base href="/">：指定路径

扩展总结

1、HTML分块< div>

HTML的标签< div>，在制作一个网页的时候，应先将他们划分为许多个块，再在这些块中进行操作
在定义< div>中width和height的像素值的时候可以以电脑的分辨率来大致估算

2、HTML段落< p>

< p>标签代表的是段落，连续的两个< p>标签中间是有间距的，不是紧挨在一起的。

3、HTML标题< h1>…< h6>

默认加粗，从< h1>到< h6>，字体大小越来越小。

4、HTML链接< a>

1)< a href=“http://www.baidu.com”>百度< /a>（点击百度，直接跳转到网页）
这里的百度也可以是自己放的一张图片，点击图片，跳转页面。
2)HTML链接中的target属性(默认是在本页面中跳转_self)
3)HTML链接中的id属性
直接跳转到id所在位置，（id前面要加#）这个例子本质就是一个书签。

5、HTML图像< img>

< img>有两个必要的属性：src和alt
< img src=“11.jpg” width=“100px”
height=“200px” />（放在一个目录下，可以直接写图片名字和格式）
图片的名称和尺寸是通过属性的形式提供的。
提示：（1）从技术上来讲，图像并不会插入HTML页面中，而是链接到HTML页面上。 < img>标签的作用是为被引用的图像创建占位符。（2）通过在< a>标签中嵌套< img>标签，为图像添加到另一个文档的链接。

6、HTML换行< br>

直接空一行。（是一个没有关闭标签的空标签）

7、HTML水平线< hr>

创建水平线，用于分割内容。

8、HTML折行（让连续两行紧挨在一起)< p>< br>< br>< /p>

9、HTML文本格式化

1）< b>加粗文体< /b>
通常标签 < strong> 替换加粗标签 < b> 来使用
2）< i>斜体< /i>
通常标签 < em> 替换加粗标签 < i> 来使用
3）< sub>510下标< /sub>
4）< sup>510上标< /sup>

10、HTML预格式文本

< pre>< /pre>对空行和空格进行控制。（这个写的就很随意）

11、HTML定义缩写< abbr>

< abbr title=“World Wide Web”>www< /abbr>
当鼠标移动到缩略词语上时，title可用于显示完整版本。

12、HTML指定文本方向< bdo>

< p>< bdo dir=“rtl”>该段落文字从右到左显示。< /bdo>< /p>
rtl--------right to left;
ltr--------left to right;

13、HTML新插入文本和删除文本< ins>和< del>

浏览器一般会在已删除的文本上添加一条下划线,而在新添加的文本下添加一条下划线。

14、HTML中的< base>(必须写在< head>中)

< base>为页面上的所有相对链接规定默认的URL（每一个文件都有默认的url,它包含的信息指出文件的位置以及浏览器应该怎么处理它）
就可以写一个图片库，在调用的时候直接写它的名称就行。

15、HTML表单

1）< form>标签，创建一个供用户输入的表单。
form标签里一般需要添加两个属性，一个是action,一个是method。
action的值是一个URL，它用来规定提交表单时向何处发送表单数据。
method的值有两个,get和post。它规定用于发送表单数据的HTTP方法。

值	描述
get	默认.将表单数据(form-data)以名称/值对的形式附加到URL中
post	以HTTP post事务的形式发送表单数据(form-data)

2）< input>标签
该标签规定了用户可以在其中输入数据的输入字段。
< input>元素在< form> 元素中使用，用来声明允许用户输入数据的input控件。
（1）最重要的type属性（只列了常用的几个）

button	普通按钮
text	普通的输入框
checkbox	复选框
password	密码输入框（看不见输入的内容）
submit	提交按钮
reset	重置按钮
email	邮箱输入框
url	资源地址(输入网址)
number	数值输入的空间（可以通过旁边的箭头上下浮动1）
date	日期选择控件（包含年月日）
datetime-local	本地日期时间选择控件（包含年月日几时几分）
tel	电话号码
color	颜色选择控件

（2）name属性 ------规定< input>元素的名称
它的值自己输入（text）
（3）checked属性------规定在页面加载时应该被预先选定的< input>元素。（只针对type="checkbox"或者type=“radio”）
（4）alt属性------定义图像输入的替代文本（只针对type=“image”）
它的值自己输入（text）
（5）src属性------规定显示为提交按钮的图像的URL
（6）height和width属性------规定< input>元素的高度和宽度（只针对type=“image”）
（7）value属性------指定< input>元素value的值，它的值是一个text类型。
3）< button>标签
该标签就是定义一个按钮。
在< button>元素内部，可以放置内容，比如文本和图像。这一点也是该元素与< input>元素创建的按钮之间的不同之处。
（必须为该元素规定type属性，因为不同浏览器，它的默认值不一样）
（1）type属性------规定按钮的类型
它的值包括button,reset,submit三种类型。
4）< select>标签
< select>元素用来创建下拉列表。
< select>元素中的 < option>标签定义了列表中的可用选项。
value属性-----送往服务器的选项值。
5）< label>标签------为input元素定义标注（标记）
label元素不会向用户呈现任何特殊效果。不过，他为鼠标用户改进了可用性。如果在label元素内带年纪文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
（1）for属性------规定label与那个表单元素绑定。
< label>标签的for属性应当与相关元素的id属性相同

16、HTML列表

1）< ul>标签------创建一个无序列表（通常与li一起使用）
2）< ol>标签------创建一个有序列表（通常与li一起使用）
3）< li>标签------定义一个列表项
4)< dl>标签------定义一个定义列表（与 < dt> （定义项目/名字）和 < dd> （描述每一个项目/名字）一起使用。）
5）< dt>标签------定义一个定义定义列表中的项目。
6）< dd>标签------顶一顶一列表中项目的描述。

• HTML重要属性

href：链接地址 target：你需要在哪里打开这个链接（默认在当前窗口打开）
target="_blank" 跳转到新页面打开链接
img：图片 src：图片地址 alt：替换资源 （当你的图片不可用 显示替换文字）
table：表格属性 colspan:行 rowspan:占列 占据两列
Form:表单 target：表单提交到哪里 method:用什么方式提交 enctype:用什么编码

• HTML版本问题

HTML是非常通用的标记语言
4.0之前没有太多值得研究的，比较随意，会出现很多边界情况
4/4.01是基于一种标记语言SGML写的
XML是可扩展的标记语言，非常严格
XHTML要求非常严格，所有标签，属性必须小写，属性必须有值
XHTML2.0不向前兼容，要求更严格
HTML5是基于HTML4的，严格要求放松，以开发者的感受优先，目的是为了创建更简单的Web程序
为了使web应用程序的开发变得更容易，提供了更多API，为了使HTML变得更简洁，开发出了新的属性，新的元素等等

• HTML5对比HTML4的变化

（1）新增语义

header/footer头尾 完整内容可以用
section/article区块区域
div没有语义的标签只是一个块，当知道表示什么时候用section代替div，当有更完整的东西用article 前者更零碎 后者更完整
nav导航 页面栏目，网站层级
aside不重要的内容，侧边栏 （简介，友情链接之类不进去页面大纲的东西)
em/strong强调 样式元素
Iicon做图标，不再是斜体的语义

（2）新增属性

表单相关的属性，链接相关的属性，其他属性，全局属性

• HTML元素分类

（1）按默认样式分：

样式名称	特点
块级 block	方块形状，默认情况下会占据整行；总在新的一行开始（换行）行高及顶和底边距可控制，默认情况下为整个容器的百分之百
行内 inline	不一定有规则形状，不会独占一行，在一行中的某一个地方；行高及顶和底边距不可改变
inline-block	对外和其他元素堆在一起在一行内和谐共处，对内方块形状有自己的尺寸；不自动换行，能够识别宽高，默认排列方式为从左到右

（2）按内容分：

Flow	在文档流中有一些影响的元素
Metadata	不占据文档流
Heading	标题
Sectioning	分区元素，导航元素
Interactive	有互动的元素：跟用户有交互
Phrasing	em
Embedded	嵌入的其他资源

• HTML元素嵌套关系

块级元素可以包含行内元素
块级元素不一定能包含块级元素
行内元素一般不能包含块级元素

a 是transparent元素 计算合法性时可直接将其去掉

 a>div  不一定是合法的 取决于外面是什么元素 计算时要把a拿掉 取决于拿掉a后div前面是什么

浏览器有容错功能

• HTML元素默认样式

意义：HTML是一个比较简单的文档型的标记语言，必然要带一些默认样式
问题：①有些样式是默认之外的 ②各个浏览器的默认样式并不一样
处理默认样式问题的解决方案： CSS Reset 默认样式重置

• HTML面试真题总结

（1）doctype的意义：让浏览器以标准模式渲染，让浏览器知道元素的合法性
（2）HTML XHTML HTML5的关系：HTML属于SGML，XHTML属于XML，是HTML进行XML严格化的结果，HTML5不属于SGML或XML，比XHTML宽松
（3）HTML5有什么变化：新的语义化元素，表单增强，新的API，分类和嵌套变更
（4）em和i有什么区别：默认样式都是斜体，em是语义化的标签，表强调，i是纯样式的标签，表斜体，HTML5中i不推荐使用，一般用作图标
（5）语义化的意义：开发者容易理解，机器容易理解结构（搜索，读屏软件），有助于SEO，semantic microdata
（6）哪些元素可以自闭合：表单元素input ，图片 img，br，hr，meta link （加斜杠）
（7）HTML和DOM的关系：HTML是死的，DOM由HTML解析而来，是活的，JS可以维护DOM
（8）property和attribute的区别：前者特性，活的，后者属性，死的
（9）form的作用：直接提交表单，使用submit/reset按钮，便于浏览器保存表单，第三方库可以整体提取值和进行表单验证
涉及表单的地方加个form

• DOM

文档对象模型，是针对于xml但是扩展用于HTML的应用程序编程接口，定义了访问和操作HTML的文档的标准
W3C文档对象模型是中立于平台和语言之间的接口，它允许程序和脚本动态的访问和更新文档的内容、结构、样式。总之HTML是关于如何获取、修改、添加和删除HTML元素的标准
HTML DOM方法就是可以对HTML DOM 节点进行的操作，执行的动作

CSS基础

• CSS：Cascading Style Sheet 层叠样式表

• 选择器

1.选择器{属性：值；属性：值}

（1）一个选择器可以选择很多属性

    CSS中的分号是分隔符，一般要求每一行都加分号

（2）选择器作用： 用于匹配HTML元素；有不同的匹配规则；多个选择器可叠加

2.浏览器的解析方式是从右往左的

目的：加快浏览器解析CSS的速度，让它更快的确定哪些元素不是
原因：出于性能的考虑，从左往右范围太大，考虑太多

3.选择器的分类

• 标签选择器：

选择器的名字代表html页面上的标签
选择的是页面上所有这种类型的标签，所以经常描述“共性”，无法描述某一个元素的“个性”
（1）所有的标签，都可以是选择器。比如ul、li、label、dt、dl、input、div等。
（2）无论这个标签藏的多深，一定能够被选择上。
（3）选择的所有，而不是一个

• ID选择器：规定用#来定义（名字自定义）

针对某一个特定的标签来使用，只能使用一次。绝对不用ID选择一堆元素。
css中的ID选择器以”#”来定义。
任何的HTML标签都可以有id属性。表示这个标签的名字。这个标签的名字，可以任取，但是：
（1）只能有字母、数字、下划线。
（2）必须以字母开头。
（3）不能和标签同名。比如id不能叫做body、img、a。
（4）大小写严格区分，也就是说aa,和AA是两个不同的ID
特别强调：HTML页面，不能出现相同的id，哪怕他们不是一个类型。比如页面上有一个id为pp的p，一个id为pp的div，是非法的！

• 类选择器：规定用圆点.来定义

针对你想要的所有标签使用。优点：灵活。
和id非常相似，任何的标签都可以携带id属性和class属性。但是id属性只能被某一特定标签引用一次
class属性的特点：
（1）类选择器可以被多种标签使用。
（2）同一个标签可以使用多个类选择器。用空格隔开。
应该注意：
（1）不要去试图用一个类名，把某个标签的所有样式写完。这个标签要多携带几个类，共同完成这个标签的样式。
（2）每一个类要尽可能小，有“公共”的概念，能够让更多的标签使用。
问题：到底用id还是用class？
答案：尽可能的用class，除非极特殊的情况可以用id。
原因：id是js用的。也就是说，js要通过id属性得到标签，所以css层面尽量不用id，要不然js就很别扭。另一层面，我们会认为一个有id的元素，有动态效果。

• 通用选择器，将匹配任何标签。

不建议使用，IE有些版本不支持，大网站增加客户端负担。
效率不高，如果页面上的标签越多，效率越低，所以页面上不能出现这个选择器。

• 伪元素选择器

不会出现在html中，真实存在，显示内容，设置样式

• 元素选择器：指定元素

• 属性选择题：

• 伪类选择器：表示当你的鼠标指向你的元素时元素所使用的样式，选中的是一种状态

• 组合选择器，否定选择器，通用选择器

4.选择器的权重

ID （100）＞类、属性、伪类（10）＞元素、伪元素（1）＞其它（0）
css样式优先级：行内>嵌入>链接>导入；若权重相同，则后写的会覆盖前面的
选择器权高一级压死其他
计算复合选择器权重时根据同级相加但不进位来判断
另外！important权重最大，若另一种优先级较高的也加了！important则可以覆盖

CSS布局

• 常用布局

  table表格布局，float浮动+margin，inline-block布局,flexbox布局
  

• 表格布局

把传统<table>布局中的<table>、<tr>、<td>改为合适的，符合“语义化”的标签，然后为这些标签添加对应的display属性

• 盒子模型

        content：内容    padding：内边距     border：边框      margin：外边距
  

1）默认情况下宽度和高度只对内容生效
2）边框本身占据空间，布局时需要考虑其大小
3）在Html中，每一个标签都不一样，这是因为每一个标签对应的盒子中的属性不同。上图中最里面的蓝色部分是盒子中的内容，可以对它设置宽和高。在内容的外面有一个Padding, 这个Padding我们叫做内间距。Padding可以很细分的设置上下左右。在Padding的外面有一个border,这个border我们称为外边宽，边宽的样式也是可以设置的。在border的外面是margin, 我们叫做外边距。想看出Padding与Margin的区别，可以设置一下背景颜色，背景颜色会覆盖Padding而不覆盖margin。margin一般被认为盒子与盒子之间的距离。Padding是盒子与内部文本之间的距离。

• display的属性及其作用

确定元素的显示类型

inline，block，inline-block，none

常用属性值	含义
block	默认情况下占据一行
inline	文本一样默认不占据一行
inline-block	对内block有宽高，对外inline可与其他元素排在同一行
none	表示隐藏该区域，不占用实际空间，但对后台来说真实存在，可以获取被隐藏的元素

• position的属性和作用

作用：确定元素的位置
static 默认情况下位置，静态布局，按照文档流一个一个去布局的
relative 相对位置，相对于元素本身偏移，并且偏移后不会改变原来占据的空间大小和位置
absolute绝对位置，相对于父级元素中最近的absolute或relative的定位，对其他元素的布局不会造成影响，若没有父级元素或父级元素没有absolute或relative就相对于窗口（body）定位，脱离了文档流，相当于一个独立的元素，但若只设定属性值而不设定绝对位置时，默认按照文档流布局
fixed 规定位置，固定定位，相对于Windows窗口的定位，或者是可视区域的定位，不会改变自己在窗口的位置

层级问题：默认情况下按照顺序进行层叠，如果要手工改变顺序，对于非静态元素，可以设定一个z-index属性（相当于把屏幕看成一个平面，有x,y,z坐标，以屏幕为xy平面，以屏幕到人眼为z轴方向）以此设置层叠方式，类似于PS的图层遮盖
注意：一般给不同元素设置不同区间防止它们互相覆盖

• flexbox布局

（真正用来布局，最推荐的一种布局方式）
可以简便、完整、响应式地实现各种页面布局
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
1）任何一个容器都可以指定为 Flex 布局
2）行内元素也可以使用 Flex 布局。
3）Webkit 内核的浏览器，必须加上-webkit前缀
4）设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。
5）采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"
6）容器属性有6个，控制其中的flex项目的排列方式；项目属性有6个，可以控制自身的相对顺序和大小，也可以覆盖由父级元素继承过来的某些属性

• float布局

元素”浮动“，脱离文档流，但不脱离文本流
（1）对兄弟元素影响：上面贴非float元素，旁边贴float元素；不影响其他块级元素位置，但是影响其他块级元素内部文本，即脱离文档流但不脱离文本流
（2）对自身的影响：形成“块”（BFC）（负责自己的布局，宽高由自己决定）；位置尽量靠上和靠左（右）
（3）对父级元素的影响：相当于从父级的空间里消失即从布局上消失，父级看不到它，于是会导致父级高度塌陷

清除浮动：
• 添加新的元素，应用clear：both
• after 方法：（作用于浮动元素的父亲）（不需多于的标签，而且也能很好的兼容）
原理：利用:after和:before来在元素内部插入两个元素块，从面达到清除浮动的效果。其实现原理类似于clear:both方法，只是区别在于:clear在html插入一个div.clear标签，而outer利用其伪类clear:after在元素内部增加一个类似于div.clear的效果。
clear:both;指清除所有浮动；content: '.'; display:block;对于FF/chrome/opera/IE8不能缺少，其中content（）可以取值也可以为空。visibility:hidden;的作用是允许浏览器渲染它，但是不显示出来，这样才能实现清除浮动

注意：下一标签直接清浮动兄弟标签浮动时，在下一标签的属性中直接写入清除clear:both;这样就可以清除以上标签的浮动而不用加入空标签来清除浮动

• inline-block布局

像文本一样排block元素
没有清除浮动等问题
需要处理间隙
限制：使用起来不够方便

• 响应式布局

帮助你的网页更好的适配PC端，移动端，以及不同大小的屏幕的移动端
在不同设备上正常使用
一般主要处理屏幕大小问题
主要方法：必须要有从源头设计思路的支持

  隐藏+折行（PC端有一排三四个在移动端折行成一排一两个）+自适应空间
  rem/viewport/media query

响应式布局就是做一个网站同时能兼容多个终端，由一个网站转变成多个网站，大大节省资源
四个层次：
（1）同一页面在不同大小和比例上看起来都应该是舒适的；
（2）同一页面在不同分辨率上看起来都应该是合理的；
（3）同一页面在不同操作方式（如鼠标和触屏）下，体验应该是统一的；
（4）同一页面在不同类型的设备（手机、平板、电脑）上，交互方式应该是符合习惯的。

• 其他布局方式

（1）使用BFC隐藏属性
1.在对需要自适应的元素BFC化，可以实现两栏或三栏布局
2.如果要让两栏之间有空隙，可以给浮动元素设置margin-right值，也可以给自适应的主内容设置margin-left值。但设置margin-left时，需要考虑到aside的宽度。实现三栏布局也是如此，给浮动元素设置margin值会方便一些。
3.使用BFC实现三栏布局时需要注意的是DOM的书写顺序问题
（2）float + 负margin + relative 实现思路如下：
1.两栏和自适应元素都设置同一方向的浮动(如float: left)
2.父元素设置左右padding为左右边栏的宽度。
3.自适应元素设置宽度为100%
4.左边栏margin-left为负100%，再设置relative，最后通过left属性偏移负的自身宽度。
5.右边栏margin-left为负自身宽度，再设置relative，最后通过right属性偏移负的自身宽度。
注意：宽度小于两栏宽度时，元素会因为宽度不足而掉下去

（由于对基础的掌握尚未完善，所有本周进度比较慢，稍微感觉到吃力，CSS效果还未开始，之后会尽快完善基础，加强吸收）