HTML
< !DOCTYPE>
定义：定义文档类型。告诉浏览器怎么处理代码
DOC：document翻译为文档
TYPE：翻译为类型
任何一个HTML文档都必须要在第一行声明文档类型
< html >
定义：定义一个HTML文件
< head >
定义：定义一个HTML头部
< title >
定义：定义HTML文档标题
< meta >
定义：定义页面的元信息（描述页面信息的信息）
用法：
-
<meta>标签位于文档的头部 -
<meta>是一个单标签 -
<meta>采用‘名值对’的形式定义元信息
语法
<meta name="description" content = "少年时驰骋的风，比黄金都贵呀；若在许我少年时，一两黄金一两风；人间总有一两风，填我十万八千梦。">
常见的meta设置：
字符集
<meta charset="UTF-8">
页面描述：
<meta name="description" content = "不要让时代的遗憾成为你的遗憾">
页面关键词：
<meta nema="keywords" content="少年时驰骋的风,比黄金都贵呀,若在许我少年时,一两黄金一两风,人间总有一两风,填我十万八千梦"
视口：为移动设备设置
<meta name="viewport" content="width=device-width, initial-scale=1.0">
< link >
定义：用于定义当前文档和外部资源的关系。
- 外部资源：可以CSS文件，也可以是图片
- ico图片：icon的缩写，表示图标的意思
用法：
- 使用< link> 关联外部的CSS文件
<link rel="stylesheet" href = "CSS文件地址"
- 使用< link>管理收藏夹图片
<link rel="shortcut icon" href="icon图标地址"
< script>
定义：<script>标签用于定义客户端脚本，比如JavaScript
- 客户端：指访问网站的用户的浏览器
- 脚本：目前使用率对高的是js（其他：ActionScript）
用法1：
<script src='脚本文件路径'></script>
用法2：
<script>
//脚本区域
</script>
< body >
定义：<body>定义文档的主体
- 主体：给用户看的内容全部放在body内
- 文档次要部分：< head>
用法：
一个HTML只能有一个body
< header >h5
定义:定义文档的页眉
- 页眉包括声什么？
- logo
- 搜索框
- 主导航
- 登陆区
svg
svg文件是什么？
1.svg是一种矢量图片格式
2.svg是一种可修改的xml文本文件格式。使用xml记录图像数据信息
单词
- main 主要的
- aside 旁白
H5的语义化语义：标签所藴含的意义
HTML4标签的语义化并不明显
有语义的标签
<h1>一级标题</h1>
<p>段落</p >
<ul>无序列表</ul>
<li>无序列表项目</li>
<ol>有序列表</ol>
<img>图片
<strong>加粗</strong>
<em>倾斜</em>
HTML4中没有语义的
<div id=header>块</div>
<div id='nav'>导航navigation</div>
<div id='main'>主要内容区域</div>
<div id='sidebar'>次要内容区</div>
<div id='footer'>页尾</div>
HTML对<div>派生出了多个语义化标签
<header></header>
<nav></nav>
<main></main>
<aside></aside>
<footer></footer>
< main> h5
定义： 定义文档的主要内容。
< aside > h5
定义 ： 定义边栏
< section >h5
定义：定义章节。具有通用性
< footer >h5
定义:定义页尾
< nav> h5
定义：定义导航栏
常见页面布局
- 分屏式布局
- 工字形布局
- 圣杯布局
- 口字型布局
- 两栏布局
- 三栏布局
H5标签可以在项目中使用吗？
- 开会商量方案
- 确定你的观点：有一个网站可以帮你决策
- Can I Use：http://www.caniuse.com
CSS
box-sizing 属性
定义：用于定义盒模型的计算规则。
语法：
div{box-sizing : content-box border-box}
- content-box : 内容盒模型，是默认值
- border-box：边框盒模型。
解释：
- 盒模型规定了元素的结构。任何一个元素都由四部分构成：内容、内边距、边框、外边距
- 内容盒模型：width属性，控制内容的宽
- 边框盒模型：width属性，控制内容、内边距、边框和的宽度
声明CSS变量的语法
语法：
body{
--变量名：red; //定义颜色变量
}
CSS变量是什么
-
CSS变量就是css的自定义属性
- 每个自定义属性名称是有使用
--开头，后跟属性名称 - 每个自定义属性包含一个值。
- 每个自定义属性名称是有使用
-
调用CSS变量
- 调用CSS变量的语法：
var(自定义变量)- 自定义属性可以在CSS中反复调用.
- 调用CSS变量的语法：
-
定义在哪里？
- 定义在哪里就在那里调用
- 通常定义在伪类选择器：
:root根伪类选择器上。目的： 创建全局变量 - 也可以定义在body选择器上，也能创建全局变量。
构建元信息的标签
- < head >
- < title >
- < meta >元数据
- < link >
格式化内容的标签 : 直接格式化内容,都属于块元素
<ul>
<li>新闻标题1</li>
<li>新闻标题2</li>
<li>新闻标题3</li>
</ul>
<ol>
<li></li>
</ol>
<dl>
<dt></dt>
<dd></dd>
</dl>
<div>
</div>
描述内容标签：不会具有格式，
<a></a>
<span></span>
<strong></strong>
<em></em>
<i></i>
分章节标签：用来组织标签的标签
<h1>
</h1>
<main></main>
1.元素是什么？
在HTML中，元素由三部分构成
- 开始标签
- 内容
- 结束标签
2.标签是什么？
标签就是带有尖括号的关键词
3.元素/标签用途是什么？
标签用于描述网页内容。通过标签告诉浏览器我是什么？
4.设置html标签的人叫什么
蒂姆伯纳斯（绰号：万维网之父）
5.元素类型
行内元素：也叫”内联元素“
块元素：把元素显示为块元素
行内块元素：把元素显示为行内块元素
none：把元素显示为无
向页面引入CSS的方式
- link标签引入
- style标签引入
- style属性引入
- 使用@import规则引入
列表是什么？
列表是相关项目的集合
二、HTML中有几种列表？
- 无序列表 ：不强调列表项目顺序的列表
- 有序列表：强调列表项目顺序的列表
- 定义列表：
- dl：定义列表
- dt：定义列表标题
- dd：定义列表项
三、列表属性
- list-style-position 规定列表项目符号位置
- list-style-type 规定列表项符号的类型
- list-style-image 使用图片设置列表符号
- list-style 复合属性
一、谈一谈你对盒模型的认识
- 盒模型是什么
盒模型又叫“框模型”。它规定了元素显示的基础。它假设任何一个HTML标签都存在一个元素框：在元素的中央是内容区，在内容区的外面是内边距，在内边距的外面是边框，在边框的外面是外边距。 - 用途：盒模型用于计算元素在文档中占据的空间大小。box-sizing属性规定了两种计算元素尺寸的方法：一种是内容盒，一种是边框盒。
- 怎么办？在移动端的项目中，我们经常使用边框盒模型，因为它的计算方法更加方便，适合移动端灵活多变的特点。
二、CSS的三大特性
继承性：元素的属性值可以传递给后代元素。
层叠性：
特殊性
三、哪些属性可以继承
可以继承的属性
- 字体属性组
- 文本属性组
不能继承的属性
- 盒模型：宽高、内边距、外边距、边框、背景
- 布局模型：浮动、定位、盒模型(Flexbox)、网格(grid)
