html常用标签
嵌套页面
<!-- 嵌套页面 -->
<div>
<!-- target属性值可以通过指定的iframe的name属性值，
实现超链接页面，在嵌套页面展示-->
<a href="https://www.jd.com" target="main_page">百度</a><!-- 百度不能跳转 -->
<a href="http://www.taobao.com" target="main_page">淘宝</a>
</div>
<iframe src="http://www.bilibili.com" main="main_page" width="100%"
height="800px scrolling="auto"></iframe>
表单标签
<!-- form表单标签 -->
<form>
<!-- type=text 声明该控件，placeholder 提示语，value文本框的输入内容 -->
<input type="text" placeholder="请输入账号名" value="">
<input type="password" placeholder="请输入密码" >
<!-- 下拉框，option子标签的value属性表示每一个下拉选项的值，value属性才会被表单提交到后台 -->
<select>
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">广州</option>
</select>
<!-- 单选框，要想实现单选，标签内加统一name值 -->
<input type="radio" name="sex" id="1">男
<input type="radio" name="sex" id="0">女
<!-- 复选框（多选），同样实现复选加统一name属性值 -->
<input type="checkbox" value="1" name="hobby">唱
<input type="checkbox" value="2" name="hobby">跳
<!-- 文本域 -->
<textarea maxlength="50" desabled></textarea>
<!-- 按钮 -->
<input type="submit" value="提交按钮">
<input type="reset" value="重置按钮">
<input type="button" value="普通按钮">
<hr><br><br>
</form>
实体Entities
运算符表示
大于小于号可能会被误认为是标签
小于号： <
大于号： >
空格：
等同于圈c： ©
块级元素
永远独占一行
div 常用的块级元素，用于页面分区
form表单标签
h1-h6标题标签
ol有序列表
ul无序列表
p段落标签
table表格标签
内联元素
和相邻的内联元素在同一行
a 超链接标签
b粗体
br下划线
i斜体
s中划线
img图片
input输入框
label 表格标签
select下拉选择框
textarea文本域，多行文本输入框
CSS
定义
层叠样式表，定义如何显示HTML元素（长宽高、颜色、间距、背景等展示效果）
基本语法
内联样式优先级>内部样式表>外部样式表
（内部外部样式表h5改为谁在后面谁优先级大，即前面写的会覆盖后面写的）
内联样式
/*body标签内*/
<p style="color : blue;">123abc <p>
内部样式表
/*在head标签的style标签内*/
p{/* 选择器 */
color: red;/* 属性：值 */
font-size: 14px;/* 属性：值 */
}
选择器：声明哪个元素采用这个样式表（选择器可以是标签、class、id和属性）
属性：样式属性
值：属性对应的值
选择器分类
标签选择器
p{/* 选择器 */
color: red;/* 属性：值 */
font-size: 14px;/* 属性：值 */
}
类选择器
标签中声明class属性
head的style内
.p1{/* 类选择器，找的是标签的class属性值，多个标签的class属性值可以
相同*/
font-weight: bold;
}
.p2{
font-family: '楷体';
}
body内
<p class="p1">11111111111111</p>
<!-- 一个标签的class属性可以有多个值 -->
<p class="p1 p2"> 中享思途 </p>
id选择器
style内
#ip1{/* id选择器 :id属性的值不能重复*/
color: green;
width: 80%;
}
body内
<input type="text" id="ip1">
属性选择器
style内
input[type=password]{/* 属性选择器 :选择具有某一个属性值的元素*/
font-size: 24px;
}
body内
<input type="password">
选择器分类
（奇奇怪怪选择器）
3.1 上下文选择器（派生选择器）
通过依据元素在其位置的上下文关系来定义样式。
分类：
后代选择器
tr td { color: pink;}
子元素选择器
a>img { width:200px;}
/*style*/
a>img{
width: 500px;
}
/*body*/
<a href="http://www.baidu.com">
<img src="img/study.jfif">
</a>
<img src="img/R-C (1).jfif">
相邻兄弟选择器
h1+p { padding: 5px;}
style
h1+p{
font-size: 90px;
}
body
<p>444444444444444</p>
<h1>1111111</h1>
<p>22222222222</p>
<p>33333333333</p>
引入样式
引入外部样式表（推荐）
外部样式表：将头部标签内style标签里面的内容封装到一个css文件中，将文件保存到CSS文件目录下
路径：网页与css文件所在文件夹同级别，直接文件夹名/.css表示路径，若操作页面与css文件所在文件夹低一级，则用../调整为同级别再进行文件夹名/.css表示路径（即../CSS/xxx.css）
在头部标签插入
<link rel="stylesheet" type="text/css" href="css/cssDemo">
CSS盒子模型
div：盒子标签
如果把h5元素看成是一个盒子，盒子组成应该是：外边距：margin 边框粗细：border 内边距：padding 内容：content
margin padding
css文件中
#parents{
border: 1px solid black;
width: 500px;
height: 400px;
padding: 40px;/*padding距离内边框 和margin距离外边框 其他用法同理*/
margin: 0 auto;/*置顶居中，表示在html中的位置上下（上）距离0，左右距离自动*/
margin: 20px 40px 50px 70px;/*表示该div盒子顺时针表示距离上右下左边框分别为：20px,40px,50px,70px*/
margin-top: 40px;/*距离顶部40px*/
/* margin-bottom: 40px;
margin-left: 30px;
margin-right: 40px;; */
}
div{
border: 1px solid black;
width: 300px;
height: 200px;
}
body中
<div id="parent">
<div></div>
</div>
border边框
border：设置整个边框的属性：粗细，边框类型，颜色 solid实线dashed虚线
border-width:设置边框宽度（粗细） ：border-width：1px
border-color
border-style：边框样式（实线虚线）
border-top：设置上边框样式：border-top： 1px solid black
文本样式
font：设置所有的字体属性
font-family：设置字体
font-size：字体大小
font——style：样式：normal正常默认字体，italic、oblique斜体
font-weight：字体粗细：font-weight： 300；（500正常，600加粗）
背景样式
background: 设置背景全部属性
background-color：设置背景色
background-size:背景图尺寸
background-image：设置背景图
background-position：设置背景图的起始位置：background-position：top center
background-position：50px 100px；左右50px，上下100px
background-attachment:背景图像是否固定或随页面的其余部分滚动
background-attachment：fixed（相对浏览器窗口而言是固定的，相对内容来说是滚动的）
background-repeat：设置背景图像是否重复：background-repeat：no-repeat;
body{
background-color: aqua;/*背景色*/
background-image: url(CSS/cssDemo.css);
}
CSS定位
position：属性定位
fixed：参照物：浏览器，脱离DOM流，不占空间，常用作漂浮广告，返回顶部等特效样式
relative：参照物：自身，存在DOM流中，占据原先的空间（top、bottom、left、right等，使指定元素相对其正常的位置进行便宜，不脱离文档流）
static静态定位：HTML元素的默认值，没有定位，元素出现在正常的流中，（按照文档的书写布局自动分配在一个合适的地方，用magin改变位置）
absolute：参照物：最近的已定位（fixed、relative、absolute）祖先元素
绝对定位：如果没有已定位的祖先元素，那么他的位置相对于html或body脱离DOM流不占据空间（通过top、right、left、bottom等属性设置偏移值）
/* position: fixed; *//* 定位：相对于浏览器窗口固定位置 */
/* position: relative; *//* 相对自身原来的位置 */
/* left: 50px;
top: 200px; */
position: absolute;/* 参照物是距离最近的已经定位的祖先元素，如果祖先元素没有定位，则参照物是body标签 */
left: 100px;
right: 150px;
overflow属性（溢出）
见day27
