前言

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

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。

回归基础从新认识——HTML+CSS的更多相关文章

  1. 进击的Python【第十三章】：Web前端基础之HTML与CSS样式

    进击的Python[第十四章]:Web前端基础之HTML与CSS样式 一.web框架的本质 众所周知,对于所有的Web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客 ...

  2. 回归基础: JavaScript 变量提升

    from me: javascript的变量声明具有hoisting机制,它是JavaScript一个基础的知识点,也是一个比较容易犯错的点,平时在开发中,大大小小的项目都会遇到. 它是JavaScr ...

  3. CSS3基础——笔记+实战案例(CSS基本用法、CSS层叠性、CSS继承性)

    CSS3基础——笔记 CSS是Cascading Style Sheet的缩写,翻译为"层叠样式表" 或 "级联样式表".CSS定义如何显示HTML的标签央视, ...

  4. 关于SqlServer那些事1（回归基础）

    即将实习,回归基础总结,希望可以再好好打磨一下基础的一些东西 关于如何在重新修改表结构时该变其权限设置 步骤: 点击工具 进入选项 设计器 取消勾选阻止保存要求重新创建表的更改 关于创建创建数据库以及 ...

  5. CSS基础篇之了解CSS和它的基本属性

    CSS是什么? CSS英文全名是Cascading Style Sheets翻译过来就是层叠样式表,它主是把网页表现与内容分离的一种样式设计语言.这种语言能优化我们编程,把东西简化和优化写法,而且不同 ...

  6. 零基础学WEB前端-CSS

    CSS指层叠样式表(Cascading Style Sheets),CSS 是标准的布局语言,用来控制元素的尺寸.颜色.排版.CSS 由 W3C 发明,用来取代基于表格的布局.框架以及其他非标准的表现 ...

  7. 基础面试题——HTML/CSS

    1. 常用那几种浏览器测试?有哪些内核(Layout Engine)? (Q1)浏览器:IE,Chrome,FireFox,Safari,Opera. (Q2)内核:Trident,Gecko,Pre ...

  8. 前端读者 | 前端面试基础手册（HTML+CSS）

    本文来自@羯瑞:希望前端面试基础手册能帮助要找工作的前端小伙伴~~ HTML 前端需要注意哪些SEO? 合理的title.description.keywords:搜索对着三项的权重逐个减小,titl ...

  9. 图片与文本基础（html和css）

    图片与文本基础 -----注释添加可以用/**/ 5.1图片 1.gif图片:最大颜色数256,保存时采用无损压缩 2.JPEG图片:可以包含1670万种颜色,保存时采用有损压缩,压缩率小的质量更高. ...

随机推荐

  1. OutLook 2010 收件箱子文件夹收到新邮件时没有桌面通知

    开始---规则----管理规则和通知 规则和通知---电子邮件规则---批量选择账号---更改规则---在新邮件通知和窗口显示(选中)---确定 录入通知邮件消息---确定 效果如下:

  2. 如何解决JavaWeb乱码问题

    作为一个合格的web开发人员应该是什么问题都遇到过的,尤其是乱码问题.大家也许都体会到了,我们中国人学编程,很大的一个不便就是程序的编码问题,无论学习什么技术,我们都需要探讨他的编码问题. 今天来讲一 ...

  3. 软件源(Software Sources)

    写在前面:浏览了很多国内外的网站,看了很多关于软件源(Software Sources)设置的文章,发现有很多文章中对软件源的设置存在误解,为了让新人能顺利进入Ubuntu的大家庭,特地作此文,详细地 ...

  4. drawInRect:withAttributes:

    - (void)drawRect:(CGRect)frame { NSMutableParagraphStyle *textStyle = [[NSMutableParagraphStyle defa ...

  5. 用macports装了一份openssl

    我已经用macports装了一份openssl,然后自己又编译了一份openssl....第三方给Mac出的一个类似BSD Ports的一个软件包管理工具装的话只需要sudo port install ...

  6. 使用msys

    下载地址:http://msys2.github.io/ 更新:pacman -Syu 安装git:pacman -S git 或者使用cygwin 调色:编辑~/.minttyrc Foregrou ...

  7. HDU 4642 (13.08.25)

    Fliping game Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Tot ...

  8. iOS中的图像处理（一）——基础滤镜

    最近在稍微做一些整理,翻起这部分的代码,发现是两个多月前的了. 这里讨论的是基于RGBA模型下的图像处理,即将变换作用在每个像素上. 代码是以UIImage的category形式存在的: typede ...

  9. UIButton上同时显示图片和文字的方法

    copy from CPLASF_lixj  http://blog.csdn.net/qijianli/article/details/8152726 项目中经常会遇到Button上同时显示图片和文 ...

  10. 版本管理工具：linux下svn的基本使用

    参考: linux下安装SVN    http://jingyan.baidu.com/article/3c343ff7039de20d37796306.html svn客户端使用linux篇  ht ...