day 26 form表单标签 & CSS样式表-选择器 & 样式：背景、字体、定位等

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