HTML5+css3
html5
1.第一个网页
<!--DOCTYPE 告诉浏览器，使用什么规范 -->
<!DOCTYPE html>
<html lang="en">
<!--head标签代表网页的头 -->
<head>
<!-- meta标签性标签，它用来描述网站的一些信息 -->
<!-- meta一般用来做SEO -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- title代表网页的标题 -->
<title>Document</title>
</head>
<!-- body标签代表网页的主体 -->
<body>
</body>
</html>
2.基本标签
<body>
<!-- 标题标签 -->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
<!-- 段落标签 -->
<p></p>
<!-- 换行标签 -->
<br/>
<!-- 水平线标签 -->
<hr>
<!-- 粗体标签 斜体标签 -->
<strong>粗体</strong> <em>斜体</em>
<!-- 空格 -->
<!-- 大于 --> >
<!-- 小于 --> <
<!-- 版权所有 --> ©版权所有
3.图像标签
<img src=\'图片地址\' alt="头像" title="悬停文字" width="300px" height="200px">
4.链接
4.1 a标签
<a href="" target=""></a>
<!-- target 打开窗口的方式 默认_self 在当前窗口打开页面 _blank新窗口打开页面 -->
4.2 锚点链接
在网页内部,点击链接，可以快速定位到页面的某个位置
<a href="#div1">点击到达</a>
<div id="div1"></div>
5.iframe内联框架
<iframe src="https://www.baidu.com" frameborder="0" width="500px" height="500px"></iframe>
6.表单
<!-- 表单
action： 表单提交的位置，可以是网站，也可以是一个请求处理的地址
method: post ,get 提交方式
get 方式提交：我们可以看到我们提交的信息 不安全，高效
post :比较安全，传输大文件
-->
<form action="1.html" method="POST">
<p> <input type="text" name="username"> </p>
<p> <input type="password" name="pwd"></p>
<!-- input type="radio" value: 单选框的值 name ： 表示组-->
<p>性别
<input type="radio" value="boy" name="sex"> 男
<input type="radio" value="girl" name="sex"> 女
</p>
<p><input type="button"></p>
<p>
下拉框
<select name="地区">
<option>四川</option>
<option>北京</option>
<option>上海</option>
</select>
</p>
<input type="file" value="上传文件">
<label for="text">用户名：</label>
<input type="text" id="text">
<!-- label 绑定一个表单元素 当点击label文本时，鼠标会自动转到对应的表单元素上 -->
<!-- 文本域 -->
<textarea name="" cols="30" rows="10">
文本内容
</textarea>
</form>
css
1.css基础选择器
1.1 类选择器
<head>
<style>
.red{
color: red;
}
</style>
</head>
<body>
<div class="red">变红色</div>
</body>
类命名规则
头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebare 栏目:column
页面外围控制整体布局宽度:wrapper 左右中:left right center 登录条:loginbarp
标志:logo 广告:banner 页面主体:main 热点:hot 新闻:news 下载:download
子导航:subnave 菜单:menu 子菜单:submenue
类选择器多类名使用
<head>
<style>
.red{
color: red;
}
.font35{
font-size: 35px;
}
</style>
</head>
<body>
<div class="red font35">变红色</div>
</body>
1.2 id选择器
<head>
<style>
#red{
color: red;
}
</style>
</head>
<body>
<div id="red">变红色</div>
</body>
id选择器和类选择器的区别
1.类选择器( class ）好比人的名字，一个人可以有多个名字，同时一个名字也可以被多个人使用。
2.id 选择器好比人的身份证号码全中国是唯一的，不得重复。
3.id选择器和类选择器最大的不同在于使用次数上。
4.类选择器在修改样式中用的最多，id选择器一般用于页面唯一性的元素上，经常和JavaScript 搭配使用。
2 字体属性
2.1 字体系列
p{
font-family: \'微软雅黑\';
}
2.2 字体大小
p{
font-size: 20px;
}
2.3 字体粗细
p{
font-weight: bold()
}
/* bold:粗体 bolder:特粗体 lighter:细体 实际开发中提倡加数字*/
2.4 字体样式
p{
font-style: italic; //斜体
}
3 文本属性
3.1 文本对齐
<style>
h1{
text-align: center;
/* left:左对齐 right:右对齐 center:居中 */
}
</style>
<body>
<h1>文本对齐</h1>
</body>
3.2 文本装饰
text-decoration属性规定添加到文本的修饰。可以给文本添加下划线、删除线、上划线等。
div{
text-decoration: underline;
/*underline：下划线 none：无 */
}
取消a链接下划线
a{
text-decoration: none;
}
3.3 文本缩进
p{
text-indent: 20px;
/* 文本的首行缩进 多少距离 */
}
3.4 行间距
line-height属性用于设置行间的距离(行高)。可以控制文字行与行之间的距离.
div{
line-height: 20px;
}
4 emmet语法
4.1 快速生成html语法结构
1.生成标签直接输入标签名按tab键即可比如div然后tab键，就可以生成
2.如果想要生成多个相同标签加上* ，就可以了比如div*3就可以快速生成3个div
3.如果有父子级关系的标签，可以用> 比如ul > li就可以了
4.如果有兄弟关系的标签，用＋就可以了比如div+p
5.如果生成带有类名或者id名字的，直接写.demo或者#two tab键就可以了
6.如果生成的div类名是有顺序的，可以用自增符号$
5 css复合选择器
5.1 后代选择器
元素1 元素2{ 声明样式 }
元素1和元素2中间用空格隔开
元素1是父级，元素2是子级，最终选择的是元素2
<style>
ul li{
color: red;
}
</style>
<body>
<ul>
<li>你好</li>
<li>你好</li>
<li>你好</li>
</ul>
</body>
5.2 子元素选择器
元素1>元素2{样式声明}
<style>
.nav>a{
color: red;
}
</style>
<body>
<div class="nav">
<a href="">我是儿子</a>
<p>
<a href="">我是孙子</a>
</p>
</div>
</body>
注意：元素1与元素2用 > 隔开
5.3 并集选择器
并集选择器可以选择多组标签，同时为他们定义相同的样式。通常用于集体声明.
并集选择器是各选择器通过英文逗号(，)连接而成，任何形式的选择器都可以作为并集选择器的一部分。
元素1,元素2{样式声明}
5.4 伪类选择器
a:link /*选择所有未被访问的链接*/
a:visited /*选择所有已被访问的链接*/
a:hover /*选择鼠标指针位子其上的链接*/
a:active /*选择活动链接（鼠标按下未弹起的链接）*/
<style>
/* 为访问的链接 */
a:link {
color: red;
text-decoration: none;
}
/* 访问过或鼠标点击过的链接 */
a:visited {
color: sandybrown;
}
/* 鼠标放上 */
a:hover{
color: lightblue;
}
</style>
<body>
<a href="#">点击我</a>
</body>
6 css的元素选择模式
6.1 块元素
常见的块元素有
<h1>、<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。
块级元素的特点∶
①比较霸道，自己独占一行。
②高度，宽度、外边距以及内边距都可以控制。
③宽度默认是容器（父级宽度）的100%。
④是一个容器及盒子，里面可以放行内或者块级元素。
6.2 行内元素
常见的行内元素有
<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<sins>、<U>、<span>
等，其中span标签是最典型的行内元素。有的地方也将行内元素称为内联元素。
行内元素的特点:
1.相邻行内元素在一行上，一行可以显示多个。
2.高、宽直接设置是无效的。
3.默认宽度就是它本身内容的宽度。
4.行内元素只能容纳文本或其他行内元素。
6.3 行内块元素
在行内元素中有几个特殊的标签—— img 、input 、td，它们同时具有块元素和行内元素的特点
有些资料称它们为行内块元素。
行内块元素的特点:
1.和相邻行内元素(行内块)在一行上，但是他们之间会有空白缝隙。一行可以显示多个(行内元素特点）
2.默认宽度就是它本身内容的宽度（行内元素特点
3.高度，行高、外边距以及内边距都可以控制(块级元素特点）。
6.4 元素显示模式转换
display:用来设置显示的类型.
转换为块元素:display:block;
转换为行内元素:display:inline;
转换为行内块元素:display: inline-block; 既可以设置宽度和高度，又不会独占一行.
6.5 一个小工具的使用snipaste
常用快捷方式:
1.F1可以截图.同时测量大小,设置箭头书写文字等
2.F3在桌面置顶显示
3.点击图片, alt可以取色(按下shift可以切换取色模式)
4.按下esc取消图片显示
7 flex布局
<style>
div{
display: flex;
width: 80%;
height: 300px;
background-color: lightblue;
justify-content: space-around;
}
div span{
height: 100px;
background-color: lightcoral;
margin-right: 5px;
flex: 1;
}
</style>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
7.1 flex布局父属性常见属性
flex-direction:设置主轴的方向
justify-content:设置主轴上的子元素排列方式
flex-wrap:设置子元素是否换行
align-content:设置侧轴上的子元素的排列方式(多行）
align-items :设置侧轴上的子元素排列方式(单行）
flex-flow:复合属性，相当于同时设置了flex-direction和flex-wrap
7.1.1 flex设置主轴方向
div{
display: flex;
width: 80%;
height: 300px;
background-color: lightblue;
justify-content: space-around;
/* 默认的主轴是x轴 元素是跟着主轴来排列的*/
/* flex-direction: row; 设置主轴 */
}
7.1.2 justify-content设置主轴上的子元素排列方式
<style>
div{
display: flex;
width: 800px;
height: 300px;
background-color: lightblue;
/* 默认的主轴是x轴*/
flex-direction: row;
/* justify-content: ; 设置子元素在主轴上的排列方式 */
/* justify-content:flex-start; */
/* justify-content: flex-end; */
/* 子元素居中对齐 */
/* justify-content: center; */
/* 平分剩余空间 */
/* justify-content: space-around; */
/* 先贴两边在平分剩余空间 */
justify-content: space-between;
}
</style>
7.1.3 flex-warp默认不换行
<head>
<style>
div{
display: flex;
width: 600px;
height: 300px;
background-color: lightblue;
/* flex布局中，子元素默认不换行，如果装不下，子元素会缩小宽度。flex-wrap: nowrap; */
/* flex-wrap: wrap; 换行 */
}
div span{
width: 150px;
height: 100px;
background-color: lightcoral;
margin: 10px;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</div>
</body>
7.1.4 align-items设置侧轴上的子元素排列方式
<style>
div{
display: flex;
width: 600px;
height: 300px;
background-color: lightblue;
justify-content: center;
align-items: center;
/* flex水平垂直居中 */
/* align-items: stretch; 拉伸 但盒子不能给高度 */
}
</style>
7.1.5 align-content设置侧轴上的子元素排列方式
<style>
div{
display: flex;
width: 600px;
height: 300px;
background-color: lightblue;
flex-wrap: wrap;
/* 有了换行，侧轴上控制元素对齐方式align-content: ; */
/* align-content:flex-start ; */
/* align-content: flex-end; */
/* align-content: space-around; */
align-content: space-between;
}
div span{
width: 150px;
height: 100px;
background-color: lightcoral;
margin: 10px;
}
</style>
7.1.6 flex-flow
flex-flow属性是flex-direction和flex-wrap属性的复合属性
<style>
div{
display: flex;
width: 600px;
height: 300px;
background-color: lightblue;
/* flex-direction: column;
flex-wrap: wrap; 简写*/
flex-flow: column wrap;
}
</style>
7.2 flex布局子项常见属性
<style>
section{
display: flex;
width: 60%;
height: 150px;
background-color: lightcyan;
}
section div:nth-child(1){
width: 100px;
height: 150px;
background-color: seashell;
}
section div:nth-child(2){
flex: 1;
}
section div:nth-child(3){
width: 100px;
height: 150px;
background-color: seashell;
}
p{
display: flex;
width: 60%;
height: 150px;
background-color: skyblue;
margin: 100 auto;
}
p span{
flex: 1;
}
</style>
</head>
<body>
<section>
<div></div>
<div></div>
<div></div>
</section>
<p>
<span>1</span>
<span>2</span>
<span>3</span>
</p>
</body>