发表于： 2019-11-13 18:59:01
1 987
今天完成的事情：
明天计划的事情：
遇到的问题：
收获：
首次接触html与cs
创建一个html5的网页
网页基本要素DOCTYPE、html、head、body
声明是H5：
<!DOCTYPE html>
声明H4（已经过时）：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">HTML网页文档的根要素，或者叫做根标记，是网页文档中最外层的标记。
<html lang="zh"></html> 属性是lang="zh"设置网页描述语言为中文
HTML其他的特殊属性：
manifest
<html manifest="example.appcache"></html>指定网页缓存文件，可以让用户在离线的时候（比如说在飞机上时）也能够访问页面。
xmlns
<html xmlns="http://www.w3.org/1999/xhtml"></html>设置html文档的名空间，比如把网页设置成xhtml的时候可以用这个属性
meta标记
<meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge">meta name指定要描述的信息的名称
meta.http-equiv设定网页的头信息，可以用于设置http协议传输时的头信息，也可以设定一些网页的行为。
meta.content和name,http-equiv等属性配合使用，记载属性的描述内容。
meta.charset指定网页的文字编码，推荐使用utf8编码。
title
设置网页的标题，可以显示在浏览器上。
title是head标记的子标记，写在head标记中。
这个也是搜索引擎优化（SEO）的一部分，所以给自己的网页起一个好的标题， 更容易被所有引擎找到。
link
link标记是链接外部文件时使用的标记，它能把外部文件的内容引用到当前的网页中来， 使当前的网页能够实现更多的功能。
- href 指定链接外部文件的路径和文件名
- rel 引用资源(文件)的类型定义
// 比如外联css样式文件 <link rel="stylesheet" href="./rWR.css">style
style标记描述CSS样式单的定义。（样式单文件的引用使用link标记）
属性
- media 指定使用样式单的媒体类型
- type 样式单的MIME多媒体属性的制定，如果省略的话则是“text/css”
- scoped(Firefox) 局部区域内的样式单设定
tempalte标记（H5）
模版标记template可以定义一个HTML的代码片段，然后通过脚本语言（javascript）向网页中动态生成内容，减少html的重复编码，增加代码的复用性，从而提高工作效率。在vue框架中常用
任务深度思考
HTML文件里开头的Doctype有什么作用
DOCTYPE是document type的简写,它并不是 HTML标签，也没有结束标签它是一种标记语言的文档类型声明，即告诉浏览器当前 HTML 是用什么版本编写的。
不声明doctype会发生什么？
声明文档的解析类型(document.compatMode)，避免浏览器的怪异模式。这个属性会被浏览器识别并使用，但是如果你的页面没有DOCTYPE的声明，那么compatMode默认就是BackCompat,
这也就是怪异的开始 -- 浏览器按照自己的方式解析渲染页面，那么，在不同的浏览器就会显示不同的样式。
标准模式和怪异模式
标准模式，浏览器使用W3C的标准解析渲染页面.
怪异模式，浏览器使用自己的怪异模式解析渲染页面。
其他进入怪异模式的方法？
除了不写DOCTYPE声明外，最常见的就是在DOCTYPE声明前面出现了这些内容：普通文本、HTML 标签、HTML 注释、XML 声明、IE条件注释。
如何理解盒模型
盒模型分为IE盒模型（怪异盒子）和W3C标准盒模型（标准盒子）。
- W3C 标准盒模型：
属性width,height只包含内容content，不包含border和padding。
width = margin（左右）+border（边框左右）+padding（左右）+content- IE 盒模型：
属性width,height包含border和padding，指的是content+padding+border。
width = border（边框左右）+padding（左右）+content默认是标准盒子但是可以将box-sizing设为border-box则用的是IE盒模型
在盒子模型中常会遇见的问题: margin重叠问题
什么是外边距margin重叠
外边距重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容、补白、边框)重合在一起而形成一个单一边界。
- 外边距重叠计算方式: 全部都为正值，取最大者；
- 不全是正值，则都取绝对值，然后用正值的最大值减去绝对值的最大值
- 没有正值，则都取绝对值，然后用0减去最大值。
元素和父元素margin值问题
父元素无 border、padding、inline content 、 clearance时，子元素的margin-top/bottom会与父元素的margin产生重叠问题。
返回列表
评论