一、HTML模板解读
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
1.文档类型声明
<!DOCTYPE html>
当前页面是HTML5版本
2.lang语言
<html lang="en">
en 英语网站
zh-CN 中文网站
3.Charset字符集
<meta charset="UTF-8">
字符集（Character set）是多字符的集合。以便计算机能够识别和存储各种文字。
UTF-8成为万国码，包含全世界所以国家需要用到的字符。
一、CSS简介 层叠样式表
CSS：层叠样式表（Cascading Style Sheets）也称CSS样式表或级联样式表。也是一种标记语言。
格式： 给谁改样式 { 改什么样式 }
<style>
p {
color: red;
font-size: 12px;
}
</style>
- 写上面
二、CSS基础选择器 不同css形式div .red #red
- CSS选择器：选择标签用的。
- 基础选择器是由单个选择器组成
1.标签选择器
- 指HTML标签名称分类，为页面某一类标签指定统一css样式。
p {
color: red;
font-size: 12px;
}
2.类选择器 class .red
<style>
.red {
color: red;
}
</style>
<h4 class="red">青春</h4>
- 标签类调用
- 样式点定义，结构类（class）调用
- 一个或多个 开发最常用
- 不能用标签名
- 最好使用英文，别用中文，数字
1.类命名规则 class
头：header
内容：content/container
尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体布局宽度：wrapper
左右中：left right center
登录条：loginbar
标志：logo
广告：banner
页面主体：main
热点：hot
新闻：news
下载：download
子导航：subnav
菜单：menu
子菜单：submenu
搜索：search
友情链接：friendlink
页脚：footer
版权：copyright
滚动：scroll
内容：content
标签页：tab
文章列表：list
提示信息：msg
小技巧：tips
栏目标题：title
加入：joinus
指南：guild
服务：service
注册：regsiter
状态：status
投票：vote
合作伙伴：partner
容器: container
页头：header
内容：content/container
页面主体：main
页尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体布局宽度：wrapper
左右中：left right center
导航：nav
主导航：mainbav
子导航：subnav
顶导航：topnav
边导航：sidebar
左导航：leftsidebar
右导航：rightsidebar
菜单：menu
子菜单：submenu
标题: title
摘要: summary
2.多类名 .red class多 空格隔开
<div class="redbox font35">hongse</div>
- 多类名调用用空格隔开
- 相同的样式放一起，调用方便
- 类名随意调用
3.id选择器 id #red
#nav {
background-color: yellow;
}
<div id="nav" class="box"></div>
- 只能调用一次
- 样式#定义，结构id定义，只能调用一次，别人切勿使用
4.通配符选择器 *{}
* {
background-color: red;
}
- 不需要调用，直接都用，全局通用
