Web前端之HTML+CSS的知识总结

Html和CSS的关系

学习web前端开发基础技术需要掌握：HTML、CSS、JavaScript语言。下面我们就来了解下这三门技术都是用来实现什么的：

HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。
CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。

HTML篇

认识html

html不是一种编程语言，是一种标记语言。
标记语言是由一套标识标签组成的
html使用标签来描述网页

html结构

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body></body>
</html>

不成对出现的标签
<br> <hr> <meta> <img> <input..> <option> <link>

html基本标签讲解

<html> <head> <body> 标签
<h1>—<h6> 仅仅用于标题文本，不要为了产生粗体文本使用它们
<p> 段落标签
<strong> <b> 标签让文字产生加粗效果

<strong>用于强调文本，强度更深，表示重要文本—>用于SEO优化
<b>只是视觉加粗效果—>单纯为了产生加粗

<em> <i> 标签

em用于强调文本
i只是视觉斜体效果
<strong>比<em>强调更强

特殊符号：
&nbsp; —->空格
&gt; —>大于号
&lt；—>小于号
&quot；—>引号
&copy;–>版权号

HTML基本标签

span 标签
对被用来组合文档中的行内元素
注意：span没有固定的格式表现，当对它应用样式时，才会产生视觉上的变化
<pre> 标签
文字的格式按源码的排版来显示，我们称之为预处理格式
<a>标签—>他有一个必不可少的属性 href
target属性：
_self(在原来页面打开)
_blank（新窗口打开）
_top（打开时忽略所有的框架）
_parent（在父窗口中打开）

创建锚点和锚链接
锚点也是一种超链接，是页面内进行跳转的超链接
第一步：创建锚点 <a name="锚点名称"></a>
第二步：使用创建好的锚点名称 <a href="#锚点名称">内容</a>

marquee标签
可以创建一个内容滚动效果

<marquee direction="down" loop="4" οnmοuseοver=this.stop() οnmοuseοut=this.start()></marquee>

direction表示滚动方向，取值有（left,right,up,down,默认left）
loop表示滚动循环的次数，默认为无限循环

 οnmοuseοver=this.stop()  οnmοuseοver=this.start()  scrollamout="1"(滚动速度)

表示当鼠标移上区域的时候停止滚动，鼠标移开继续滚动

img图片标签与路径

图片标签与路径：

常见图片格式：jpg/Jpeg png(半/全透明都支持) gif(只支持全透明)

图片标签写法：

<img src=" " alt=" " width=" " height=" " />

图片四要素：
src="" 图片路径
alt="" 图片含义
width=""图片宽度和图片大小保持一致
height=""图片高度和图片大小保持一致
title="" 标题

相对路径、绝对路径：

相对路径：(Relative Path) 相对于该文件的路径；
绝对路径：(Absolute Path) 从磁盘出发的路径；

列表

1、无序列表
<ul> 无序列表

无序列表是一个没有顺序项目的列表，此列表项默认粗体圆点进行标识

<ul><li> </li><li> </li><li> </li>
</ul>

2、有序列表
有序列表也是一列项目，只是列表项目使用的是数字进行标记。有序列表始于 <ol> 标签。每个列表项始于 <li>标签。

<ol><li>内容一</li><li>内容二</li><li>内容三</li></ol>

列表符号

无序列表-列表符号：
type="circle"空心圆 type=“disc”实心圆默认值 type="square" 方块符
有序列表-列表符号
1、type="A" A B C D
2、type="a"a b c d
3、type="1"1 2 3 4 默认值type=”I” I II III type=”i” i ii iii

3、无序列表-嵌套

   <ul><li>柚子<ul><li>沙田柚</li><li>蜜柚</li></ul></li><li>荔枝</li><li>苹果</li>
</ul>

4、有序列表-嵌套

<ol><li>茶<ul><li>红茶</li><li>绿茶</li></ul></li><li>果汁</li><li>牛奶</li>
</ol>

5、定义列表

定义列表不仅仅是一列项目，而是项目及其注释的组合
定义列表以 <dl> 标签开始。每个定义列表项以 <dt>开始。每个自定义列表项的定义以 <dd> 开始。

<dl><dt>pc网页制作</dt><dd>学习DIV+CSS JS JQ 项目实战/dd><dt>手机网页制作</dt><dd>手机网页制作实战</dd>
</dl>

dd是对dt的解释

< dl>< /dl>用来创建一个普通的列表,
< dt>< /dt>用来创建列表中的上层项目，
< dd>< /dd>用来创建列表中最下层项目，
< dt>< /dt>和< dd>< /dd>都必须放在< dl>< /dl>标志对之间。

 <dl><dt>中国城市</dt> <dd>北京 </dd><dd>上海 </dd> <dd>广州 </dd><dt>美国城市</dt><dd>华盛顿 </dd><dd>芝加哥 </dd><dd>纽约 </dd></dl>

dl是definition list的缩写
dt是definition title的缩写
dd是definition description的缩写

list-style属性具有三个属性分量：
list-style-position：设置列表项图标的位置，位于文本内或者文本外
list-style-type：设置列表项图标的类型
list-style-image：使用图像设置列表项图标

表单元素

<form>表单标签
<form>表单是一个包含表单元素的区域，包括起来的都是表单的内容

<form><input type="text"/></form>

html标签 - Action和确认按钮

当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。

<form action="html.do" method="get">    username:  <input type="text" name="user" />   <input type="submit" value="提  交" /</form>

<input>标签常用type类型

<input type="" name="" value="" />
type="text"单行文本输入框
type="password" 密码（maxlength=""）
type="radio" 单项选择（checked="checked"）
type="checkbox"多项选择
type="button"按钮
type="submit"提交 type="image"图片提交
type="file"上传文件
type="reset"重置
type="hidden"隐藏

<label>标签

<label></label>

label 元素不会向用户呈现任何特殊效果。
不过，它为鼠标用户改进了可用性。
如果您在 label 元素内点击文本，就会触发此控件。
就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

<p>单向选择</p><label for="male">男：</label><input type="radio" name="sex" id="male"/><label for="nv">女：</label><input type="radio" name="sex"checked="check"/>

表单和表格标签：
<textarea>文本域标签
<textarea>标签：
<textarea></textarea>是文本域标签，可以在其中插入一段文字内容，它有两个常用属性rows和cols

rows表示这个文本域有多少行
cols表示这个文本域有多少列
除了这两个属性它还有readonly（只读，文本域的内容无法改变，相当于协议）和title（鼠标放上提示）

<select>标签的掌握

当提交表单时，浏览器会提交选定的项目，或者收集用逗号分隔的多个选项，将其合成一个单独的参数列表，并且在将表单数据提交给服务器时包括 name属性

  <form>     <select name=""  id=""><option value="1">1月</option>  <option value="2">2月</option>      </select></form>

<table>表格标签
<table>表格标签：<table>是表格标签，可以用它定义一个表格。

 <table border="1"><tr><td>姓名</td><td>性别</td></tr></table>

<table>的border属性不能少
<tr>可以定义表格中的一行，一个<tr></tr>表示一行。
<td>可以定义表格中的一个单元格，<td></td>表示一个单元格。

HTML5标签集合

CSS篇

css的特征

css解决了两个问题：
1>. 将HTML页面的内容与样式分离。
2>. 提高web开发的工作效率。
css的优势:
1>. 内容与表现分离
2>. 网页的表现统一，容易修改
3>. 丰富的样式，使页面布局更加灵活
4>. 减少网页的代码量，增加网页浏览器速度，节省网络带宽
5>. 运用独立页面的css,有利于网页被搜索引擎收录
css语法：
1>. 选择器；
2>. 声明=属性+值；

       /*这是注释*/

css的引入

1. 内嵌式
一般不写内嵌式，以后不好维护

<h1 style="font-size: 10px;color: yellow">我是h1路飞学城</h1>

2. 内链式

        <style type="text/css">h2{font-size:30px;color:red;}</style>

3. 外链式

    链接式

         link css 同时加载的！<link rel="stylesheet" type="text/css" href="./css/index.css">

    导入式

          实际用的很少，先加载html，在加载cssimport 是css2.1特有的，对于不兼容css2.1的浏览器是无效的eg:IE5以下<style type="text/css">@import url('./css/index.css');</style>

        注意：@import url()必须写在文件最开始的位置。

链接式与导入式的区别：
1、标签属于XHTML,@import是属性css2.1
2、使用链接的css文件先加载到网页当中，再进行编译显示
3、使用@import导入的css文件，客户端显示HTML结构，再把CSS文件加载到网页当中
4、@import是属于CSS2.1特有的，对于不兼容CSS2.1的浏览器来说就是无效的

优先级：内嵌式 > 内链式 > 外链式

选择器

什么是选择器：css选择器就是要改变样式的对象

css选择器

class 类选择器可以重复使用
id 选择器唯一

id选择器
选择id命名的元素以 # 开头 #p1{color:#0f0;}
class选择器，选择clas命名的元素以.开头 .first{color:#00f;}

css代码写完后上线前要经过压缩处理
本地和服务器分两个css版本（备份）
压缩后注释都清除，空间体积减少

群组选择器
选择多个元素,以逗号隔开 #main,.first,span,a,h1{color:red;}
包含选择器
选择某元素的后代元素，也称后代选择器，父类与子类间以空格隔开p
span{color:red;}
属性选择器
选择包含某一属性的元素
a[title]{color:red;}选择包含title的a标签
a[title][href]{color:red;}选择包含title和href的a标签

背景属性

背景颜色的添加:
background:red;
backgronnd-color:red;
背景图片的添加：

background:url(“images/1.jpg”);
backgronnd-image:url(“images/1.jpg”);

背景的平铺
什么是平铺？平铺就是图片是否重复出现
不平铺：background-repeat:no-repeat;
水平方向平铺：background-repeat:repeat-x;
垂直方向平铺：background-repeat:repeat-y;
完全平铺：默认为完全平铺
背景图片的定位
背景图片的定位就是可以设置显示背景图片的位置，通过属性background-position来实现
background-position的取值可为英文单词或者数值和百分值。
background-positon的英文单词取值

top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right

background-positon的数值取值
background-position:x y;
positon的百分值取值
background-position:x% y%;

背景图片的大小
背景图片的大小可以通过属性background-size来设置

background-size的取值可为数值和百分值。
background-size的数值取值
background-size:x y;
background-size的数值取值
background-size:x% y%;

背景图片的滚动
背景图片是否随着内容的滚动而滚动由background-attachment设置
background-attachment:fixed; 固定，不随内容的滚动而滚动
background-attachment:scroll; 滚动，随内容的滚动而滚动

文字文本属性

文字属性

color:red; 文字颜色font-size:12px; 文字大小font-weight:“bold” 文字粗细(bold/normal)font-family:“宋体” 文字字体font-variant:small-caps小写字母以大写字母显示

文本属性

text-align:center; 文本对齐(right/left/center)line-height:10px; 行间距(可通过它实现文本的垂直居中)text-indent:20px; 首行缩进text-decoration:none;文本线(none/underline/overline/line-through)letter-spacing: 字间距

盒子模型

HTML文档中的每个元素都被描绘成矩形盒子，这些矩形盒子通过一个模型来描述其占用空间，这个模型称为盒子模型。

为了更好的控制页面效果，css定义了盒子模型，一个HTML元素就是一个盒子

盒子模型组成部分：
自身内容：width、height 宽高
内边距： padding
盒子边框： border 边框线
与其他盒子距离： margin外边距
内容+内边距+边框+外边距=面积

盒子定位共有四种方式：相对定位、绝对定位、固定定位、浮动。

相对定位 relative
　　元素在显示时，相对自己本来的位置向下或者向右偏移指定数值，但元素本身并不脱离文档流，也就说后面的元素还认为此元素在原来的位置，所以会排列在此元素原本位置的后面（但会造成覆盖）
绝对定位absolute
　　以最近的已经定位的祖先元素为基准进行偏移（如果没有这样的祖先元素则以浏览器窗口为基准），元素本身脱离文档流，也就说后面元素认为此元素不存在，所以会占据此元素原来的位置（但会造成覆盖，脱离文档流后就不具有块级元素独占一行的性质了）
固定定位fixed
　　和绝对定位类似也会脱离文档流，但总是以浏览器窗口为基准，而且位置不会随着滚动条移动
盒子浮动float
　　如果一个盒子向左浮动(float: left;)：这个元素会成为行内元素；它后面的块级元素会失去一半的独占一行的特性，即左边紧靠在浮动元素后面，右边延伸到行尾。向右浮动和向左浮动效果类似，可以使用clear: both;清除浮动效果对后面盒子的影响

实用的css代码片段

页面优化方法

减少请求数
图片合并
CSS文件合并
减少内联样式
避免在 CSS中使用 import
减少文件大小
选择适合的图片格式
图片压缩
CSS 值缩写（Shorthand Property)
文件压缩
页面性能
调整文件加载顺序
减少标签数量
调整选择器长度
尽量使用CSS 制作显示表现
增强代码可读性与可维护性
规范化
语义化
模块化