HTML与盒模型

时间 2019-12-07

标签 html 模型栏目 HTML 繁體版

原文原文链接

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双边距问题。html

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

HTML5的文档类型：1种 HTMLweb

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>标签