HTML与盒模型

HTML结构

<!doctype html>

<html>

  <head>

    <meta charset="utf-8">

    <meta name="keyword" content="关键字">

    <meta name="description" content="描述">

    <meta http-equiv="content type" content="text/html" charset="uft-8">

    <meta http-equiv="refresh" content="20;url=http://www.baidu.com">

    <!-- 20秒后进入百度页面 -->

      <title>标题</title>

  </head>

  <body>

      <img src="图片地址">

  </body>

</html>

!docment type：文档声明，避免盒模型出现怪异解析如ie浏览器下margin双边距问题。

HTML4.0的文档类型声明：3种严格型、过渡型、框架型。

HTML5的文档类型：1种 HTML

meta，元信息，(utf-8)防止乱码

charset声明要放在title上面，以免title出现乱码

网页开发制作与开发流程

网页开发流程：

切图，分析
了解代码书写规范
整体布局
公共模块
相似模块、普通模块
网页的优化和细节方面的处理

标签、语义

<div>div没有任何语义性，主要用于布局（每个div独占一行）</div>

<h1>标题<h1>

<p>段落</p>

CSS

CSS（cascading Style Sheet）可译为层叠样式表或级联样式表，是一组格式设置规则，用于控制web页面的外观。

css的引入方式

标签内的书写：直接在标签里面添加style样式

  <div style='border: 1px solid red;'>一个边框</div>

头部写入

  在<head\>部分加入<style>标签，在<style>标签内部书写样式

外部引入

css三种引入方式优缺点

外部引入（优先级最低）

优点

代码量少
一个css文件可以控制多个页面
有利于改版和维护
有效的利用缓存机制，加快页面的访问速度
肯能有seo的压力

缺点

对于单页来说，会产生多余的代码
外部引入中的href属性会给服务器造成请求压力

头部写入

优点

代码量少。
相对于整站来说，单页面代码量少
没有服务器请求压力

标签内部写入

优点

优先级最高
个别特殊情况使用，网站维护中，如果不知道这串代码会不会导致别的修改。

路径

../返回上一级，href="../css/index.css"
./当前文件所在的层级（基本不用）
/根目录，D：/uxd/css/index.css，在D盘中任意一个文件夹href="/"这就代表D盘

CSS代码基础语法

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

选择器通常是需要改变样式的HTML元素

每条声明由一个属性和值组成，每个属性有一个值，属性和值用：分开用;结束

例如：

.wrap {

  width: 200px;

  height: 200px;

  margin: 100px;

  padding: 130px;

  background-color: #fcc;

}

其中margin和padding存在多种值类型

margin/padding

1个值上下左右

2个值上下、左右

3个值上、左右、下

4个值上、右、下、左

border：

border-left: 10px solid green;

border-right: 10px solid green;

border-top: 10px solid green;

border-bottom: 10px solid green;

CSS自身属性

盒子模型

width 宽

height 高

margin 外边距

padding 内边距

border 边框

盒模型总宽度：margin-right/left、border-right/left、padding-right/left、width

盒模型总高度：margin-top/bottom、border-top/bottom、padding-top/bottom、height

显示属性

float: none|left|right;

float先浮后动：漂浮在上面的图层，当浏览器宽度不够，就会在下一行，水槽浮动原理

所有元素都可以浮动

没有特殊设置可以和文字一样大小的边框

CSS选择器

CSS基本选择器：3种

id选择器：#开头，首字母不能是数字，且只能用一次 #wrap{border: 10px}优先级最高主要用于JS中
类选择器：.开头，首字母不能是数字，可重复使用 .test{border： 10px}优先级第二
标签选择器<p>、<div>标签