标签：定位 background color 标签元素笔记 HTML 设置 CSS

HTML(超文本标记语言)

w3c标准：

结构化标准语言（XHTML、XML）

表现标准语言：（CSS）

行为标准：（DOM、ECMScrit）

一、基本标签

块级标签：无论多少内容，在网页独占一行，前后换行
标题标签:   <h1>一级标题</h1>  
               ......
          <h6>六级标题</h6>
段落标签:   <p>这是一段文字哦</p>
水平线标签:  <hr/>
有序列表：<ol type="A">   //type控制顺序的样式
            <li>列表项1</li>
            <li>列表项2</li>
        </ol>
无序列表：<ul type="circle"> 
            <li>列表项1</li>
            <li>列表项2</li>
        </ul>
描述列表：<dl>
            <dt>标题</dt>
            <dd>描述</dd>
        </dl>
表格:<table border="1">
        <tr>
            <td>第一行第一列</td>
            <td>第一行第二列</td>
            <td>第一行第三列</td>
        </tr>
        <tr>
            <td>第二行第一列</td>
            <td>第二行第二列</td>
            <td>第er行第三列</td>
            </tr>
        </table>
        
表单:<form>
        用户名：<input type="text" /><br />
        密码：<input type="password" />
    </form>
行级标签：逐个横向摆放，直至不够再换行
换行标签:   <br/>
范围标签：<span> </span>
图像标签:   <img src="图片路径" style="width:1px;height:1px;" alt="音乐"/>
斜体标签:   <em>倾斜的</em>
加粗:      <strong>我是加粗的</strong>
下划线:     <u></u>

二、超链接

功能：

-实现页面的跳转

-锚链接功能：①目标a标签定义name

②点击的a标签href指定#+name

<a href="#zjl">找到周杰伦</a>
<p><a href="#" name="zjl">周杰伦</a></p>

-功能性链接 QQ MSN 电子邮件

调用QQ

<a href="tencent://message/?uin=你的qq&Site=老王&Menu=yes">qq联系我</a>

属性：

href:超链接点击后跳转的资源（网页）

target:目标窗口的打开位置

可选值：

_self：自身页面打开默认

_blank:在空白页面打开

_top:在页面顶端打开 (不常用)

_parent:在父窗口打开（和框架集连用）

三、表格高级用法

rowspan：跨行

colspan：跨列

创建多个行和列的方法

table>(tr>td)*3

<table border="1" width="400px" align="center" style="text-align: center;"cellspacing="0" cellpadding="0" >
            <!--表头-->
            <caption>年终财务报表</caption>
            <!--th 列的表头   居中加粗-->
            <!--表格头-->
            <thead style="background-color: pink;">
                <tr>
                    <th>名称</th>
                    <th>金额</th>
                </tr>
            </thead>
            <!--表格身体-->
            <tbody style="background-color: lightyellow;">
                <tr>
                    <td>21</td>
                    <td>22</td>
                </tr>
                <tr>
                    <td>31</td>
                    <td>32</td>
                </tr>
            </tbody>
            <!--表格尾部-->
            <tfoot style="background-color: green;">
                <tr>
                    <td>41</td>
                    <td>42</td>
                </tr>
            </tfoot>
        </table>

四、表单

主要用于网页中与用户进行交互，收集信息

action:表单内容提交到的地址服务器程序等

method:表单的提交方式 get post

表单中的各个组件称为表单元素：

input:type属性控制元素的性质

type可选值;

text:文本框

password:密码框

hidden:隐藏域隐藏信息但是真实存在

file:文件域

image:图片按钮指定图片位置带有提交功能

radio：单选按钮 name一致可以控制任选其一

checkbox:复选框，建议name都是一个

reset:重置按钮重置当前表单数据

submit:提交按钮提交当前表单信息

button：普通按钮

select-option:下拉框（下拉按钮）

textarea 文本域名多行文本框

属性：

name:表单元素的名字，用于以后服务器收集信息

value：

-用在按钮上表示的按钮的文字

-用在单选、复选框上表示的是提交是真实的值

-用在输入型input中表示默认值

placeholder：模拟输入显示删除显示效果

disabled:禁用属性，本来需要属性名与值相等，hmlt5提出只要包含属性即可使用

readonly:只读属性，只能看不能改

checked:默认选中单选或复选的某个按钮

<form action="#" method="post"> 
            用户名: <input type="text"  placeholder="请输入..." disabled /><br />
            密码：<input type="password" value="123" readonly /><br />
            隐藏域：<input type="hidden" value="money" /><br />
            文件域：<input type="file" /><br />
            图片按钮：<input type="image" src="img/1.jpg" /><br />
            性别：
            <input type="radio" name="sex" value="男" checked />男
            <input type="radio" name="sex" value="女" />女
            <br />
            爱好：
                <input type="checkbox" name="ball" value="篮球" />篮球
                <input type="checkbox" name="ball" value="足球" />足球
                <input type="checkbox" name="ball" value="乒乓球" checked />乒乓球
            
            <br />
            <!--非input表单元素-->
            <select>
                <option>请选择地区</option>
                <option>昆明</option>
                <option>玉溪</option>
                <option>大理</option>
            </select>       
            <textarea></textarea>
            <br /><br /><br /><br />
            <input type="reset"  value="取消" />
            <input type="submit" value="确定" />
            <input type="button" value="点我" />
                
        </form>

<form action="#" method="get">
            <input type="color" />
            <input type="date" />
            <input type="datetime-local"/>
            <input type="week" />
            <input type="range" />
            <input type="search" />
            <input type="email" />
            
            
            <hr />
            <input type="url" list="source" />
            <datalist id="source">
                <option label="百度" value="http://www.baidu.com"></option>
                <option label="淘宝" value="http://www.taobao.com"></option>
            </datalist>
            
            
        </form>
        <br /><br /><br /><br />
        <form action="#">
            <label for="username">用户名：</label>
            <input type="text" id="username" /><br /><br /><br />
            
            <!--把用户分组-->
            <fieldset>
                <legend>用户名信息：</legend>
                <label for="username">用户名：</label>
                <input type="text" id="username" />
            </fieldset>
            
            <select multiple>
                <!--下拉内容分组-->
                <optgroup label="本地">
                    <option value="昆明">昆明</option>
                    <option value="昭通">昭通</option>
                    <option value="德宏">德宏</option>
                </optgroup>
                <optgroup label="外地">
                    <option value="北京">北京</option>
                    <option value="上海">上海</option>
                    <option value="广州">广州</option>
                </optgroup>
            </select>
            
            
        </form>

五、实体

大于&gt;
小于&lt;
空格&nbsp;
农夫山泉&reg;
哇哈哈&trade;

六、框架

<iframe src="http://www.baidu.com" width="800px" frameborder="0" name="open"></iframe>
        <a href="http://www.baidu.com" target="open">打开百度</a>

七、音视频

 <audio controls>
  			<source src="audio/1.mp3" type="audio/ogg">
		</audio>
		<video width="300px" controls >
			<source src="video/mi.mp4" type="video/mp4"></source>
		</video>

八、列表

列表标签

标签	描述
<ol>	定义有序列表。
<ul>	定义无序列表。
<li>	定义列表项。
<dl>	定义定义列表。
<dt>	定义定义项目。
<dd>	定义定义的描述。

CSS(层叠样式表)

选择器

/*全局选择器 选择所有元素*/
*{
	/*color: red;*/
}

/*标签选择器 指定标签名*/
span{
	/*color: red;*/
}

/*类选择器 class的值 可以有多个*/
.p1{
	color: yellow;
}

/*id选择器*/
#box{
	background-color: black;
}


/*并集选择器 一起选中多个内容不只是标签*/
span,h1,.p1,#box{
	/*color: red;*/
}

/*后代元素选择器 */
.list li{
	/*color: red;*/
}

/*子元素选择器*/
.list > span{
	color: red;
}

/*相邻元素选择器*/
.box001 + p{
	color: blue;
}

/*属性选择器 选择具有xx属性的标签*/
div[class='box001']{
	color: palegreen;
}

/*选择某元素中的第几个*/
li:nth-child(2){
	background-color: red;
}

/*获取元素的最后一个*/
li:last-child{
	background-color: red;
}

伪类(超链接)

默认情况浏览器会根据历史记录判断超链接是否点击过

伪类：在某一个状态下有某个样式

通常都是指的是超链接的伪类

:link 超链接未点击前的状态

.a2:link,.a2:visited{
				color: cadetblue;
			}

:hover 鼠标移入超链接时的状态适用于所有的标签

:active 鼠标单击超链接时的状态适用于所有的标签

:visited 鼠标点击超链接后的状态

背景

background	简写属性，作用是将背景属性设置在一个声明中。
background-attachment	背景图像是否固定或者随着页面的其余部分滚动。	fixed（不滚动） scroll（默认值)
background-color	设置元素的背景颜色。
background-image	把图像设置为背景。
background-position	设置背景图像的起始位置。background-position： xx xx 方向：top right bottom left center
background-repeat	设置背景图像是否及如何重复。

大小

background-size:

cover:图片比例不变，将元素填满

contain:图片比例不变，将图片在元素里面完整显示

注：background-size必须在background-position的后边使用/隔开

background: #008000 url(../../html/images/qq.png) no-repeat center center/100px 100px ;

文本

color]	设置文本颜色
letter-spacing	设置字符间距
line-height	设置行高
text-align	对齐元素中的文本
text-decoration	向文本添加修饰
text-indent	缩进元素中文本的首行
text-shadow	设置文本阴影
vertical-align	设置元素的垂直对齐
word-spacing	设置字间距

列表

list-style	简写属性。用于把所有用于列表的属性设置于一个声明中
list-style-image	将图像设置为列表项标志。
list-style-position	设置列表中列表项标志的位置。
list-style-type	设置列表项标志的类型。

设置列表项标志的类型。

none	无标记。
disc	默认。标记是实心圆。
circle	标记是空心圆。
square	标记是实心方块。
decimal	标记是数字。

字体

Property	描述
font	在一个声明中设置所有的字体属性
font-family	指定文本的字体系列
font-size	指定文本的字体大小
font-style	指定文本的字体样式	italic（斜体）oblique（倾斜）
font-variant	以小型大写字体或者正常字体显示文本。
font-weight	指定字体的粗细。

盒子模型

-CSS将页面中所有的元素都设置为一个矩形的盒子

-将元素设置为矩形的盒子后，对页面的布局就变成了不同盒子的嵌套和摆放盒子的位置（布局）

盒子模型从里到外：
-content内容区：
能够在盒子中存放内容的区域，width height
			
-padding内边距
内容区到边框之间的填充叫内边距
		
-border边框 
盒子外边缘的框线 内容不会超过边框
		
-margin外边距
盒子边框到另外一个盒子边框的距离

border-style：指定边框的样式
	 solid  表示实线
	 dashed 虚线
	 dotted 点状虚线
	 double 双实线

子元素在父元素的内容区中排列

如果子元素的大小超过了父元素则会从父元素中溢出

使用overflow属性来设置父元素如何处理溢出的子元素

可选值：

visible：默认值子元素溢出在父元素外部显示

hidden 溢出内容将会被裁剪不会显示

scroll 生成两个滚动条，通过滚动条来查看完整的内容

auto 根据需要生成滚动条

margin的值

-数值

-auto:设置当前外边距为最大值

设置左右两边为auto可以让元素在父元素内居中 */

margin-left: auto;
margin-right: auto;

垂直外边距重叠（折叠）

-相邻的垂直方向的外边距会发生重叠现象

1.兄弟元素：

-兄弟元素之间的相邻垂直外边距会去两者之间的最大的值（正值）

-特殊情况：

如果相邻的外边距一正一负则去两者的和
如果是相邻的外边距都是负值，则取两者中绝对值较大的
2.父子元素
父子元素之间的相邻垂直外边距会发生重叠
子元素的外边距会传递给父元素
会影响页面布局需要处理
处理
①将子元素和父元素的垂直外边距重叠的区域隔开
比如设置父元素的边框（盒子的大小会加上边框）
②使用伪元素来解决
问题：内容区+边框=盒子宽度？

默认情况下，盒子可见框的大小由内容区+内边距+边框共同决定的 box-sizing用来设置盒子尺寸的计算方式（设置width和height的作用）可选值： content-box 默认值宽度和高度用来设置内容区的大小 box-sizing: border-box;

行级元素的盒模型

-行级元素不支持设置高度和宽度

-行级元素可以设置padding 但是垂直方向上padding不会影响布局(水平方向正常)

-行级元素可以设置border 垂直方向的border不会影响布局(水平方向正常)-行级元素可以设置margin 垂直方向的margin不会影响布局

(水平方向正常)

将行级元素设置高宽

display 用于设置元素的显示的类型

display:inline	默认值：将元素设置为行级元素行级元素默认值就是它
display:block	将元素设置为块级元素块级元素的默认是就是它
display :inline-block	将元素设置为行内块元素既可以设置高宽还可以逐个摆放
display :none	元素不在页面中显示不占位置
display:table	将元素设置为一个表格

visibility(用来设置元素的可见状态)

hidden 元素在页面中隐藏但是依然占据页面的位置
visible 默认值 元素在页面中正常显示

全局选择器去除所有标签样式

		*{
			margin: 0px;
			padding: 0px;
		}

解决垂直外边距重叠

1、在父元素之前加上一个空的内容但性质为table（边框）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.box1{
				width: 200px;
				height: 200px;
				background-color: red;
			}
			.box2{
				width: 100px;
				height: 100px;
				background-color: green;
				margin-top: 100px;
			}
			/*解决垂直外边距重叠：
			 * 在父元素之前加上一个空的内容但性质为table（边框）
			 */
			/*.box1:before{
				content: "";  
				display: table;
			}*/
			
			/*工具类*/
			.clear:before{
				content: "";  /*加空内容*/
				display: table;
			}
			
		</style>
	</head>
	<body>
		<div class="box1 clear">
			<div class="box2"></div>
		</div>
	</body>
</html>

高度塌陷

在浮动布局中父元素的高度默认是被子元素撑开的，当子元素浮动以后会完全脱离文档流子元素会从文档流中脱离，将无法撑起父元素高度导致父元素高度丢失，父元素高度丢失以后，其下方的元素会自动上移导致页面布局混乱，高度塌陷是浮动布局中比较常见的问题必须要处理

解决方案：

①在浮动元素后+一个空白的div清除两侧浮动不推荐

②使用伪元素解决

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			
			.outer{
				width: 80%;
				border:1px solid red;
				
			}
			
			.inner{
				width: 100px;
				height: 100px;
				background-color: pink;
				float: left;	
			}
			/*解决高度塌陷*/
			.clear:after{
				content: "";
				display: block;
				clear: both;
			}
		</style>
	</head>
	<body>
		<div class="outer clear">
			<div class="inner"></div>
			<!--<div style="clear: both;"></div>-->
		</div>
		55
	</body>
</html>

圆角

四个值：左上右上右下左下

三个值：左上右上/左下右下

两个值：左上/右下右上/左下

border-radius: 10px 40px;*/

		/*设置为一个圆形的话  50%*/
		border-radius: 50% ;

浮动

浮动元素不会盖住文字，文字会自动环绕在浮动元素的周, 所以我们可以利用浮动来设置文字环绕图片的效果

			/*其他：
			 元素浮动会脱离文档流：
			 脱离文档流的特点：
			 块级元素
			 1.块级元素不再单独占页面的一行
			 2.脱离文档流以后 块元素的默认高度和宽度都被内容撑开
			  行级元素：
			  行级元素脱离文档流后会变得像块级元素 但是有些特点不一样
			  一旦脱离文档流以后，不需要区分块级元素和行级元素了
			 * */

既可以解决高度塌陷又可以解决垂直外边距重叠

.clear:after,.claear:before{

content:" ";

display:table;

clear :both;

}

定位(position)

-定位是一个更加高级布局手段

-通过定位可将将元素摆放到页面的任意位置

-使用position属性来设置定位

属性值	描述
static	默认值，元素是静止的没有开启定位
relative	开启元素的相对定位
absolute	开启元素的绝对定位
fixed	开启元素的固定定位
sticky	开启元素的粘滞定位

相对定位

		 		-当元素position属性的值设置为relative 开启了相对定位
		 		-相对定位的特点：
		 		1.元素开启相对定位以后，如果不设置偏移量元素不会发生任何改变
		 		2.相对定位是参照与原来自身在文档流中的位置进行定位的
		 		3.相对定位会提升元素的层级
		 		4.相对定位不会脱离文档流
		 		5.相对定位不会改变元素的性质

-偏移量

当我们开启定义以后可以通过偏移量来设置元素的位置

top 定位元素和定位位置上边的距离

bottom 定位元素和定位位置下边的距离

left 定位元素和定位位置左侧的距离

right 定位元素和定位位置右侧的距离

指定每个方向上的距离默认向右向下为+值负值会反方向偏移

绝对定位：

         * -当元素设置了position属性为absolute则开启了元素的绝对定位
		 * -绝对定位的特点：
		 *  1.开启绝对定位后，元素会从文档流中脱离 下方元素上移
		 *  2.开启绝对定位后，如果不设置偏移量位置不会发生改变
		 *  3.绝对定位会是元素提升一个层级
		 * 	4.绝对定位会改变元素的性质，
		      块级标签高度和宽度都是被内容撑开
		      行级元素变成块元素
		 *  5.绝对定位是相对于离他最近的开启了定位的祖先元素定位的
		 * 都没开启， 绝对定位相对于浏览器窗口进行定位的
		 /*总结：
			 使用绝对定位的用法：当大盒子中已经装满内容需要在放一个漂浮的元素
			 需要使用定位，而使用定位通常的做法是：
			 父元素相对定位不设置偏移量（位置不动）
			 子元素绝对定位（位置不动）
			 * */

阿里图标的使用

/*阿里图标的使用： * 官网-添加需要的图标到购物车-购物车加入到项目（新建）-下载 * 1.解压 * 2.复制到项目中 * 3.引入需要的css * 4.使用：类名+编码 * 纯类名 * 伪元素需要将编码的&#x变成\ 如:\e600 * 5.如果需要调整样式写一个类即可 */

        /*.iconfont{
            font-size: 500px !important;
            color: pink;
        }*/
        
        .green{
            color: green;
        }
        .green:hover{
            color: red;
        }
        
        /*为p标签前加入内容*/
        .p1:before{
            content: "\e600";
            font-family: 'iconfont';
            font-size: 30px;
            color: green;
        }
        .p2:before{
            content: "\e602";
            font-family: 'iconfont';
            font-size: 10px;
            color: blue;
        }
        .p3:before{
            content: "\e605";
            font-family: 'iconfont';
            font-size: 20px;
            color: red;
        }
        
        .test:hover{
            color: pink;
        }
        
    </style>
</head>
<body>
    <!--1.使用unicode编码+类iconfont-->
    <i class="iconfont" >&#xe600;</i>
    <i class="iconfont green">&#xe605;</i>
    <i class="iconfont" >&#xe602;</i>
    
    <!--2.使用纯类名-->
    <i class="iconfont icon-format10"></i>
    
    <p class="p1">小孩</p>
    <p class="p2">树叶</p>
    <p class="p3">卡车</p>

标签：定位,background,color,标签,元素,笔记,HTML,设置,CSS
From： https://www.cnblogs.com/GodsLayer/p/16586056.html

HTML+CSS笔记