回归基础从新认识——HTML+CSS

前言

这段时间工作没那么繁杂，索性就想说来套系统的学习，之前去面试的时候，有被问及些基础的知识，居然回答不上来，也不能说是回答不上吧，回答的不全面。前端群上问了那个机构比较好，选择了慕课网。看了一段时间还是觉得不错的。

HTML

语义化标签

1. 更容易被搜索引擎收录。

2. 更容易让屏幕阅读器读出网页内容。

文章常用

<p>，添加段落

<hx>，h1、h2、h3、h4、h5、h6，添加标题

<strong>和<em>，但两者在强调的语气上有区别:<em> 表示强调，<strong> 表示更强烈的强调。并且在浏览器中<em> 默认用斜体表示，<strong> 用粗体表示。

<q>，短文本引用，网页的文章里想引用某个作家的一句诗，这样会使你的文章更加出彩，那么<q>标签是你所需要的。注意要引用的文本不用加双引号，浏览器会对q标签自动添加双引号

<blockquote>，对长文本的引用，如在文章中引入大段某知名作家的文字，这时需要这个标签。<q>标签是对简短文本的引用

<cite> ，标签通常表示它所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。

设置单独样式

<span>标签是没有语义的，它的作用就是为了设置单独的样式用的

分行显示文本

<br />，xhtml1.0写法

<br>，html4.01写法

现在一般使用 xhtml1.0 的版本的写法（其它标签也是），这种版本比较规范

空格

输入空格，必须写入&nbsp;

水平横线

<hr>标签

地址信息

<address>，为网页加入地址信息，在浏览器上显示的样式为斜体。

编程代码

<code>，加入一行代码

<pre>，为你的网页加入大段代码

<var>，标签表示变量的名称，或者由用户提供的值，通常显示为斜体

列表

<ul>，无序列表，添加新闻信息列表

<ol>，有序列表，添加图书销售排行榜

<dl>，是定义列表，会默认前后层级关系

 

逻辑划分

<div>，设置div当作一个容器，把一些独立的逻辑部分划分出来

表格

<table>，整个表格以<table>标记开始、</table>标记结束

<tbody>，当表格内容非常多时，表格会下载一点显示一点，但如果加上<tbody>标签后，这个表格就要等表格内容全部下载完才会显示。

<tr>，表格的一行，所以有几对tr 表格就有几行

<td>，表格的一个单元格，一行中包含几对<td>...</td>，说明一行中就有几列

<th>，表格的头部的一个单元格，表格表头

表格中列的个数，取决于一行中数据单元格的个数

<caption>，为表格添加标题和摘要

<table summary="表格简介文本">，摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化)，使搜索引擎更好的读懂表格内容，还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。

链接

<a>，链接到另一个页面，title有利于seo。图像可以是GIF，PNG，JPEG格式的图像文件

图片

<img>，为网页插入图片

属性：

src：标识图像的位置；

alt：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本；

title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；

表单

<form>，为用户输入创建 HTML 表单

<input>，搜集用户信息，类型buttom（可点击按钮），checkbox（复选框），file（文件上传），hidden（隐藏的输入字段），image（图像形式的提交按钮），password（密码字段），radio（单选按钮），reset（重置），submit（提交），text（单行输入框）

 

<textarea>，文本域，可多行

同一组的单选按钮，name 取值一定要一致，才可以起到单选的作用。

<select>，下拉列表框，设置multiple="multiple"属性，就可以实现多选功能。

<label>，为鼠标用户改进了可用性。如果你在 label 标签内点击文本，就会触发此控件。就是说，当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（就自动选中和该label标签相关连的表单控件上）。注意：标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。

HTML总结

之前面试有被问及：HTML标签可以怎么样分类？这里我简单的按照我的想法分下。

按照标签形态（常用）：

块状元素：<div>，<p><h1>...<h6>，<ol>，<ul>，<dl>，<table>，<address>，<blockquote>，<form>。。。

内联元素：<a>，<span>，<br/>，<i>，<em>，<strong>，<lable>，<q>，<var>，<cite>，<code>。。。

内联块元素：<img>，<input>。。。

tip:为什么table是块元素，原理table的宽度并不是占一行，而是自适应子元素宽度的（但是当然下一个元素会换行，块状元素的特性），相当于一个宽度永远大于子元素的定宽块状元素，因此可以margin:0 auto;设置自己水平居中，子元素随之居中。可以删掉table中的子元素，并加上border试试，宽度随之变化。

按照使用场景（常用）：

文章：<h1>...<h6>，<p>，<strong>，<em>，<q>，<blockquote>，<cite>，<img>。。。

表格：<table>，<tbody>，<tr>，<td>，<th>，<caption>。。。

列表：<ol>，<ul>，<li>，<dl>，<dt>，<dd>。。。

表单：<form>，<input>，<textarea>，<select>，<label>。。

编程代码：<core>，<pre>，<var>。。

标准分类（较详细）：

文档标签：<html>，<head>，<body>，<title>，<meta>，<base>，<style>，<link>，<script>，<noscript>

框架标签：<frame>，<frameset>，<iframe>，<noframes>

布局标签：<div>

表格标签：<table>，<thead>，<tbody>，<tfoot>，<tr>，<td>，<th>，<col>，<colgroup>，<caption>

表单标签：<from>，<input>，<textarea>，<button>，<select>，<optgroup>，<option>，<label>，<fieldest>，<legend>

列表标签：<ul>，<ol>，<li>，<dl>，<dt>，<dd>

链接标签：<a>

多媒体标签：<img>，<map>，<area>，<object>，<param>

文章标签：<h1>...<h6>，<p>，<br/>，<span>，<bdo>，<pre>，<acronym>，<abbr>，<blockquote>，<q>，<ins>，<del>，<ins>，<address>

字体样式标签：<tt>，<i>，<b>，<big>，<small>，<em>，<strong>，<dfn>，<code>，<samp>，<kbd>，<var>，<cite>，<sup>，<sub>

特殊标签：<!DOCTYPE>，<!-- -->，<hr>

CSS

css 样式：由选择符和声明组成，而声明又由属性和值组成

选择符：又称选择器，指明网页中要应用样式规则的元素

声明：在英文大括号“｛｝”中的的就是声明，属性和值之间用英文冒号“：”分隔。当有多条声明时，中间可以英文分号“;”分隔

注释语句

/*注释语句*/——Html中使用<!--注释语句-->

CSS 样式代码插入的形式：内联式、嵌入式和外部式

内联式：style=""

嵌入式：写在<style> 标签对中

外部式：也称为外联式，就是把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在<head>内（不是在<style>标签内）使用<link>标签将css样式文件链接到HTML文件内

注意：

1、css样式文件名称以有意义的英文字母命名，如 main.css。

2、rel="stylesheet" type="text/css" 是固定写法不可修改。

3、<link>标签位置一般写在<head>标签之内。

4、层级大小：内联式 > 嵌入式 > 外部式，但是 嵌入式>外部式 有一个前提：嵌入式css样式的位置一定在外部式的后面

ID选择器，类选择符区别

1、为标签设置id="ID名称"，而不是class="类名称"。

2、ID选择符的前面是井号（#）号，而不是英文圆点（.）。

3、ID选择器只能在文档中使用一次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次。（虽然在浏览器还是能体现相同的效果，但是不符合W3C规则）

后代选择器（空格）与子选择器（>）的区别

子选择器（child selector）仅是指它的直接后代，或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择，而子选择器是通过“>”进行选择。“>”作用于元素的第一代后代，空格作用于元素的所有后代。

伪类选择符

允许给html不存在的标签（标签的某种状态）设置样式，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色——:hover

分组选择符“,”

分组选择符，当你想为html中多个标签元素设置同一个样式时——a,b{color:red}

CSS样式继承

CSS的某些样式是具有继承性的，继承是一种规则，它允许样式不仅应用于某个特定html标签元素，而且应用于其后代，例如：line-height；font-size；color

CSS权值

浏览器是根据权值来判断使用哪种css样式的，权值高的就使用哪种css样式

第一等：代表内联样式，如: style=””，权值为1000。

第二等：代表ID选择器，如：#content，权值为100。

第三等：代表类，伪类和属性选择器，如.content，权值为10。

第四等：代表类型选择器和伪元素选择器，如div p，权值为1。

通用选择器（*），子选择器（>）和相邻同胞选择器（+）并不在这四个等级中，所以他们的权值都为0

 

 

如果在html文件中对于同一个元素可以有多个css样式存在并且这多个css样式具有相同权重值？

层叠就是在html文件中对于同一个元素可以有多个css样式存在，当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用。

!important 优先级

当网页制作者不设置css样式时，浏览器会按照自己的一套样式来显示网页。并且用户也可以在浏览器中设置自己习惯的样式，比如有的用户习惯把字号设置为大一些，使其查看网页的文本更加清楚。

这时注意样式优先级为：浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式，但记住!important优先级样式是个例外，权值高于用户自己设置的样式。注意：!important要写在分号的前面。

三大标签类型

前面就给标签分了类，下面就在说说特点：

块状元素（block）：

 

1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）

 

2、元素的高度、宽度、行高以及顶和底边距都可设置。

 

3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

 

内联元素（inline）：

1、和其他元素都在一行上；

2、元素的高度、宽度及顶部和底部边距不可设置；

3、元素的宽度就是它包含的文字或图片的宽度，不可改变。

内联块元素（inline-block）:

1、和其他元素都在一行上；

2、元素的高度、宽度、行高以及顶和底边距都可设置。

三种布局模型

1、流动模型（Flow）

块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。如右侧代码编辑器中三个块状元素标签(div，h1，p)宽度显示为100%。内联元素都会在所处的包含元素内从左到右水平分布显示。（内联元素可不像块状元素这么霸道独占一行）

2、浮动模型 (Float)

3、层模型（Layer）

三种形式：绝对定位(position: absolute)、相对定位(position: relative)、固定定位(position: fixed)

font属性简写

使用这一简写方式你至少要指定 font-size 和 font-family 属性，其他的属性(如 font-weight、font-style、font-varient、line-height)如未指定将自动使用默认值；在缩写时 font-size 与 line-height 中间要加入“/”斜扛。

长度单位

总结：常用到px（像素）、em、% 百分比，要注意其实这三种单位都是相对单位。

1、像素为什么是相对单位呢？因为像素指的是显示器上的小点（CSS规范中假设“90像素=1英寸”）。实际情况是浏览器会使用显示器的实际像素值有关，在目前大多数的设计者都倾向于使用像素（px）作为单位。

2、em。就是本元素给定字体的 font-size 值，如果元素的 font-size 为 14px ，那么 1em = 14px；如果 font-size 为 18px，那么 1em = 18px。但当给 font-size 设置单位为 em 时，此时计算的标准以 p 的父元素的 font-size 为基础。

3、百分比。p{font-size:12px;line-height:130%}设置行高（行间距）为字体的130%（12 * 1.3 = 15.6px）。

W3C倡导结构、样式、行为分离

结构化标准语言（html和xml）

表现标准语言（css）

行为标准语言（dom和ECMAScript）

盒子模型层级

边框 > 内容+内边距 > 背景图片 > 背景颜色 > 外边距

绝对定位 ,如果父元素没有相对定位的话，会一直追溯，最后没有的情况想是根据根元素html定位，不是body。

posted @ 2016-04-20 22:38  羯瑞  阅读(525)  评论(0)  编辑  收藏  举报