HTML，CSS，JAVASCRIPT-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_68723918/article/details/146350060

HTML

垂直对齐方式：verticle-align

HTML

html结构

基本结构

<html >
<head>
    <title>第一个页面</title>
</head>
<body>
    hello world
</body>
</html>

html标签

注释标签

<body>
    hello world    <!-- 我是注释 -->
</body>

标题标签 h1-h6

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>标题标签</h1>
    <h2>标题标签</h2>
    <h3>标题标签</h3>
    <h4>标题标签</h4>
    <h5>标题标签</h5>
    <h6>标题标签</h6>
</body>
</html>

段落标签 <p> </p>

换行标签 <br>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>br标签</title>
</head>
<body>
    <p>你好</p>
    <br>
    <p>你好</p>
</body>

格式化标签

加粗 strong 标签和 b 标签
倾斜 em 标签和 i 标签
删除线 del 标签和 s 标签
下划线 ins 标签和 u 标签

<strong>	加粗	<b>	加粗
<em>	倾斜	<i>	倾斜
<del>	删除线	<s>	删除线
<ins>	下划线	<u>	下划线

<body>
    <Strong>加粗</Strong>
    <b>加粗</b>
 
    <em>倾斜</em>
    <i>倾斜</i>
 
    <del>删除线</del>
    <s>删除线</s>
    
    <ins>下划线</ins>
    <u>下划线</u>
 
</body>

图片标签 img

<body>
    相对路径
    <img src="OIP.png" width="200px" height="200px" > <p></p>
    绝对路径
    <img src="D:\gitee\HTML_code\html_code\domo2\OIP.png" width="200px" height="200px">
</body>

视频标签

<video src="video/林俊杰%20-%20不潮不用花钱.mp4" controls="controls">
    林俊杰，不潮不用花钱MV
</video>

音频标签

<audio controls="controls" loop="loop">
	<source src="audio/极乐净土.mp3" type="audio/mp3"></source>
</audio>

超链接标签a

 <a href="https://www.baidu.com">点击进入百度</a>

href是必须要有的，表示点击后跳转到那个页面。

    <a href="https://www.baidu.com" target="_blank">点击进入百度</a>

target表示用新的标签页打开。如果上述的默认，则是在当前标签页打开。

外部链接

外部链接表示此链接是引用外部网站的链接。

    <a href="https://www.baidu.com" target="_blank">点击进入百度</a>

内部链接

网页内部页面之间的链接，可以直接写相对路径。

我们在当前html1文件的同一个目录下再创建一个html2文件,然后在html2文件里面就可以写其他的网页，当我们点击这个内部之间的链接时，就会跳转到html2.html这个网页上

    <!-- 我是html1 -->
    <a href="html2.html">点我跳转到html2.html</a>

空链接

使用#在href中占位

<a href="#">空链接</a>

下载链接

href中写的路径是一个文件，点击就可以进行下载这个文件，（文件可以是zip格式）。

当我们点击下载的时候，浏览器就会自动下载这个文件

    <a href="OIP.zip">点击下载</a>

网页元素链接

可以给图片等任何元素添加链接，当我们点击这个图片时，就会跳转到我们href中所写的地址上去。

<a href="https://www.baidu.com" target="_blank">
        <img src="OIP.png" title="点击跳转到百度">
    </a>

描点标签

我们可以给标签给具体的id值，然后在href中填入对应的id的值，就可以进行描点链接跳转。

    <a href="#1">跳转到1</a>
    <a href="#2">跳转到2</a>
    <p id="1">
        abc <br>
        def <br>
    </p>
    <p></p>
    <p></p>
    <p id="2">
        hhh <br>
        mooo <br>
    </p>

表单标签

table 标签: 表示整个表格
tr: 表示表格的一行
td: 表示一个单元格
th: 表示表头单元格. 会居中加粗
thead: 表格的头部区域(注意和 th 区分, 范围是比 th 要大的)
tbody: 表格得到主体区域.

table 包含 tr , tr 包含 td。

 
<body>
    <table  border="1" width ="400px" hight="200px">
        <thead> <!-- 表头标签-->
            <th>姓名</th>   <!-- 表头的单元格  会居中加粗-->
            <th>年龄</th>
            <th>性别</th>
        </thead>
        <tbody>  <!-- 表格的主体区域-->
            <tr> <!-- 表示表格的每一行-->
                <td>张三</td> <!-- 表示表格每个单元格-->
                <td>18</td>
                <td>男</td>
            </tr>  
            <tr> <!-- 表示表格的每一行-->
                <td>李四</td> <!-- 表示表格每个单元格-->
                <td>19</td>
                <td>男</td>
            </tr> 
            <tr> <!-- 表示表格的每一行-->
                <td>王五</td> <!-- 表示表格每个单元格-->
                <td>20</td>
                <td>男</td>
            </tr> 
        </tbody>
    </table>
</body>

合并单元格

跨行合并

先群定要合并的单元格，然后需要在合并之前删除多余的单元格

<table  border="1" width ="400px" hight="200px">
        <thead> <!-- 表头标签-->
            <th>姓名</th>   <!-- 表头的单元格  会居中加粗-->
            <th>年龄</th>
            <th>性别</th>
        </thead>
        <tbody>  <!-- 表格的主体区域-->
            <tr> <!-- 表示表格的每一行-->
                <td>张三</td> <!-- 表示表格每个单元格-->
                <td>18</td>
                <td>男</td>
            </tr>  
            <tr> <!-- 表示表格的每一行-->
                <td>李四</td> <!-- 表示表格每个单元格-->
                <td rowspan="2">19</td>
                <td>男</td>
            </tr> 
            <tr> <!-- 表示表格的每一行-->
                <td>王五</td> <!-- 表示表格每个单元格-->
                <td>男</td>
            </tr> 
        </tbody>
    </table>

跨列合并

 <table  border="1" width ="400px" hight="200px">
        <thead> <!-- 表头标签-->
            <th>姓名</th>   <!-- 表头的单元格  会居中加粗-->
            <th>年龄</th>
            <th>性别</th>
        </thead>
        <tbody>  <!-- 表格的主体区域-->
            <tr> <!-- 表示表格的每一行-->
                <td colspan="2">张三</td> <!-- 表示表格每个单元格-->  <!-- 跨列合并-->
                <td>男</td>
            </tr>  
            <tr> <!-- 表示表格的每一行-->
                <td>李四</td> <!-- 表示表格每个单元格-->
                <td rowspan="2">19</td> <!-- 跨行合并-->
                <td>男</td>
            </tr> 
            <tr> <!-- 表示表格的每一行-->
                <td>王五</td> <!-- 表示表格每个单元格-->
                <td>男</td>
            </tr> 
        </tbody>
    </table>

列表标签

无序列表 ul li
有序列表 ol li
自定义列表 dl (总标签) dt (小标题) dd (围绕标题来说明) 上面有个小标题, 下面有几个围绕
着标题来展开的。

无序列表

<h3>无序列表</h3>
    <ul>
        <li>天暗星</li>
        <li>天罡星</li>
        <li>天罪星</li>
    </ul>

有序列表

    <h3>有序列表</h3>
    <ol>
        <li>天暗星</li>
        <li>天罡星</li>
        <li>天罪星</li>
    </ol>

自定义列表

<h3>自定义列表</h3>
    <dl>
        <dt>不良人</dt>
        <dd>天暗星</dd>
        <dd>天罡星</dd>
        <dd>天罪星</dd>
    </dl>

表单标签

表单是让用户输入信息的重要途径.
分成两个部分:
表单域: 包含表单元素的区域. form 标签。
表单控件: 输入框, 提交按钮等. input 标签。

form标签

描述了把数据以怎样的方式提交到那个地方

<form action="https://www.baidu.com" method="get">
        <!-- form 中的数据-->
    </form>

intput标签

<form action="https://www.baidu.com" method="get">
        <!-- form 中的数据-->
        姓名：<input type="text"><br> <!-- 文本框-->
        密码：<input type="password"><br>  <!-- 密码框-->
        性别：<input type="radio" name="sex" value="男">男&nbsp;&nbsp;&nbsp;&nbsp;<!-- 单选框-->
        <input type="radio" name="sex" value="女">女 &nbsp;&nbsp;&nbsp;&nbsp;
        <input type="radio" name="sex" value="第三性别">第三性别<br>
 
        爱好：<input type="checkbox">听音乐&nbsp;&nbsp; <!-- 复选框-->
        <input type="checkbox">看电视&nbsp;&nbsp;
        <input type="checkbox">打羽毛球 <br>
 
        头像：<input type="file"> <br> <!-- 选择文件标签-->
        日期：<input type="date">   <!-- 日期-->
        颜色：<input type="color">  <!--颜色-->
        提交：<input type="submit">  <!-- 提交按钮-->
    </form>

select标签

大学：<select>  <!-- 下拉菜单标签-->
            <option>北京大学</option>  <!-- 第一个就是默认选项-->
            <option>清华大学</option>
            <option>陇南大学</option>
            <option>兰州大学</option> 
        </select> <br>

textarea 标签

 备注：<textarea cols="50" rows="5"></textarea><br>

无语义标签 div span

div 是独占一行的, 是一个大盒子.
span 不独占一行, 是一个小盒子

<div>
        <span>天暗星</span>
        <span>天暗星</span>
        <span>天暗星</span>
        </div>
        <div>
        <span>天罡星</span>
        <span>天罡星</span>
        <span>天罡星</span>
        </div>
        <div>
        <span>天罪星</span>
        <span>天罪星</span>
        <span>天罪星</span>
        </div>

CSS

使用方法

内嵌样式

混合在HTML标记中使用的方式

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>样式使用</title>
</head>
<body>
	<a href="http://www.taobao.com" style="color:red; font-size: 28px;">淘宝</a> <br>
	<a href="http://www.taobao.com" >淘宝</a>
</body>
</html>

内部样式

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>样式使用</title>
<style type="text/css">
		#p{
			color: red;
			font-size: 28px;
		}
 
</style>
</head>
<body>
	<a href="http://www.taobao.com" id="p">淘宝</a> <br>
	<a href="http://www.taobao.com" >淘宝</a>
</body>
 
</html>

外部样式

html文件：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>样式使用</title>
</head>
	<link rel="stylesheet" type="text/css" href="css3-3.css">
<body>
	<a href="http://www.taobao.com" id="p">淘宝</a> <br>
	<a href="http://www.taobao.com" >淘宝</a>
</body>
</html>

css文件：

#p{
     color:red;
     font-size:20px;
}

选择器

元素选择器

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>元素选择器</title>
	<style type="text/css">
		h2{
			color: red;
		}
		span{
			color: blue;
			font-size: 48px;
		}
	</style>
</head>
<body>
 	<h2>hello</h2>
 	<h3>hello</h3>
 	<span>hello</span>
</body>
</html>

类选择器

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>类选择器</title>
	<style type="text/css">
		.p1{
			color: red;
			font-size: 25px;
		}
		.p2{
	
			font-size: 36px;
			text-decoration: underline;
			color: green;
		}
	</style>
</head>
<body>
	<h2 class="p1">hello</h2>
	<h2 class=p2>hello</h2>
</body>
</html>

ID选择器

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>类选择器</title>
	<style type="text/css">
		#p1{
			color: red;
			font-size: 25px;
		}
		#p2{
	
			font-size: 36px;
			text-decoration: underline;
			color: green;
		}
	</style>
</head>
<body>
	<h2 id="p1">hello</h2>
	<h2 id=p2>hello</h2>
</body>
</html>

包含选择器

语法格式：

祖先选择器 后代选择器{
    样式属性: 属性值;
    样式属性: 属性值;
    ......
}

注意：祖先选择器和后代选择器之间必须用空格进行分隔。祖先选择器可以包括一个或多个用空格分隔的选择器。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>包含选择器</title>
	<style type="text/css">
		h2 span{
			color: red;
			font-size: 48px;
		}
		
	</style>
</head>
<body>
	<h2>hello <span>word!</span></h2>
	<h3>hello <span>word!</span></h3>
	<h4>hello <span>word!</span></h4>
	<span>world</span>
</body>
</html>

组合选择器

组合选择器也称为并集选择器，是各个选择器通过逗号连接而成的，任何形式的选择器(包括标记选择器、类选择器及id选择器等)都可以作为组合选择器的一部分。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>组合选择器</title>
	<style type="text/css">
		p,h2,span{
			color: red;
			font-size: 28px;
		}
	</style>
</head>
<body>
	<h2>hello</h2>
	<h3>hello world!</h3>
	<h4>hello world!</h4>
	<h5>hello world!</h5>
	<span>world</span>
	<p>hello</p>
 
</body>
</html>

父子选择器

不选择所有后代，只选择某个元素的子元素。父子选择器使用大于号作为选择器的分隔符。格式如下：

父选择器>子选择器{
    样式属性:属性值;
    样式属性:属性值;
    ......
}

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>父子选择器</title>
	<style type="text/css">
		h2 span{
			color: blue;
		}
		h2>span{
			color: red;
			font-size: 48px;
		}
	</style>
</head>
<body>
		<h2>hello<span>world!</span></h2>
		<h2>hello <p><span>world</span></p></h2>
</body>
</html>

相邻选择器

如果需要选择紧接在某一个元素后的元素，并且二者有相同的父元素，可以使用相邻选择器。相邻选择器使用加号作为选择器的分隔符，其语法格式如下:
选择器1+选择器2 {
    样式属性:属性值;
    样式属性:属性值;
    ......
}
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>相邻选择器</title>
	<style type="text/css">
		h2+span{
			color: red;
			font-size: 48px;
		}
	</style>
</head>
<body>
	<h2>hello<span>hello</span></h2>
	<span>hello</span>
	<span>hello</span>
</body>
</html>

属性选择器

属性选择器是CSS3选择器，其主要作用是对带有指定属性的HTML元素进行样式设置。
属性选择器的语法格式如下:
标记名称[属性选择符] {
    样式属性:属性值;
    样式属性:属性值;
    ......
}
例如：定义具有href属性的超链接元素，让文字显示为红色，语法格式如下:
a[href] {
    color:red;
}

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>属性选择器</title>
	<style type="text/css">
		p[align]{
			color: red;
			font-size: 38px;
		}
		p[align=right]{
			color: blue;
			font-size: 24px;
		}
	</style>
</head>
<body>
	<p align="center"> hello </p>
	<p align="right"> world </p>
</body>
</html>

通用选择器

通用选择器的作用就像是通配符，匹配所有可用元素。

语法格式如下：
*{
    样式属性:属性值;
    样式属性:属性值;
    ......
}
注意：*代表所有

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>通用选择器</title>
	<style type="text/css">
		*{
			color: red;
			font-size: 36px;
		}
	</style>
</head>
<body>
	<h5>hello</h5>
	<p> world</p>
	<span>hello world</span>
</body>
</html>

基本属性

字体属性

font-size	设置字体的尺寸。常用单位为像素(px)
font-style	设置字体风格。Normal 为正常; italic 为斜体; oblique 为倾斜
font- weight	设置字体的粗细。Normal 为正常; lighter 为细体; bold 为粗体; bolder 为特粗体
font-family	设置字体系列。例如“隶书”等

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>字体属性</title>
	<style type="text/css">
		#p1{
			font-family: Times New Roman,serif;         
			/*设置字体类型*/
			font-size: 28px;
			/*设置字体大小*/
			font-weight: bold;
			/*设置字体粗细*/
		}
		#p2{
			font-family:Arial,sans-serif; 
			font-size:20px;
			font-style: italic;
			/*设置字体风格*/
			font-weight:lighter;
		}
		#p3{
			/*设置字体倾斜、加粗、大小为24像素，行高为36像素，字体为arial,sans-serif*/
			font:oblique bold 24px/36px arial,sans-serif;
		}
	</style>
</head>
<body>
	<p id=p1>hello world1</p>
	<p id="p2">hello world2</p>
	<p id="p3">helllo world3</p>
</body>
</html>

文本属性

color	设置颜色
direction	设置文本方向
letter-spacing	设置字符间距，就是字符与字符之间的空白。其属性值可以为不同单位的数值，并且允许使用负值，默认值为normal
line-height	设置行高，单位为像索。此属性在用于进行文字垂直方向对齐时，属性值与height属性值的设置相同
text-align	设置文本内容的水平对齐方式。left 为左对齐( 默认值)，center 为居中对齐，right为右对齐
text- decoration	向文本添加修饰。none 为无修饰(默认值)，underline 为下划线，overline 为上划线，line-through为删除线
text-overflow	设置对象内溢出的文本处理方法。clip 为不显示溢出文本，ellipsis 为用省略标记"..."标示溢出文本
text-indent	设置首行文本的缩进
text-transform	控制文本转换。none为不转换(默认值)，capitalize 为首字母大写。uppercase为全部字符转换成大写，lowercase 为全部字符转换成小写
text-shadow	设置文本阴影
unicode-bidi	设置文本方向
word-spacing	设置字间距。只针对英文单词
white-space	设置元素中空白的处理方式

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>文本属性</title>
	<style type="text/css">
		#one{
			text-align: center;
			/*文字左对齐*/
			word-spacing: 30px;
			/*单词之间的间距为30像素*/
 
		}
		#two{
			text-align: center;
			/*文字居中对齐*/
			word-spacing: -10px;
			/*单词之间的间距为-15像素*/
		}
		#three{
			text-align: center;
			/*文字右对齐*/
			letter-spacing: 5px;
			/*字母之间距离为28个像素*/
			text-decoration: underline;
			/*文字修饰：加下划线*/
			text-transform: uppercase;
			/*文字全部大写*/
		}
	</style>
</head>
<body>
	<p id=one>hello  world</p>
	<p id="two">hello  world</p>
	<p id="three">hello  world</p>
</body>
</html>

text-shadow属性是css3的属性，是向文本添加一个或多个阴影，该属性是用逗号分割的
阴影列表，每个阴影由两个或三个长度值和一个可选的颜色值进行规定，省略的长度是0

其中，h-shadow是必须定义的，表示水平阴影的位置，如果是正值则表示阴影向右位移的距离，如果是负值则表示阴影向左位移的距离:v-shadow是必须定义的，表示垂直阴影的位置，如果是正值则表示阴影向下位移的距离，如果是负值则表示阴影向上位移的距离;blur是可选项，表示阴影的模糊距离;color是可选项，表示阴影的颜色。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>文本属性</title>
	<style type="text/css">
		h2{
			font-size: 50px;
			font-family: 黑体;
			text-shadow: red 6px -6px 6px,pink 16px -16px 10px;
		}
	</style>
</head>
<body>
	<h2>hello world</h2>
</body>
</html>

背景属性

background-attachment	设置背景图像是否固定或者随着页面的其余部分滚动。scroll指背景图像随内容滚动; fixed 指背景图像不随内容滚动
background-color	设置元素的背景颜色
background-image	把图像设置为背景
background-position	设置背景图像的起始位置。left 为水平居左，right 为水平居右，center 为水平居中或垂直居中，top 为垂直靠上，bottom为垂直靠下或精确的值
background-repeat	设置背景图像是否重复及如何重复。repeat-x 为横向平铺; repeat-y 为纵向平铺; norepeat 为不平铺; repeat 为平铺背景图片，该值为默认值

background-clip属性规定背景的绘制区域，该属性是CSS3的属性，主要用于设置背景图像的裁剪区域，其基本语法格式是:

background-clip : border-box|padding-box|content-box;

border-box	默认值，表示从边框区域向外裁剪背景
padding-box	从内边距区域向外裁剪背景
content-box	从内容区域向外裁剪背景

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>背景裁剪属性</title>
	<style type="text/css">
		div{
			width: 400px;            
			height: 230px;				 
			padding: 25px;			 
			background-color: red;	
			background-clip: content-box;     
			border: 10px solid pink;   
		}
	</style>
</head>
<body>
	<div>
		你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好
		你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好
		你好你好你好你好你好你好你好你好你好你好你好你好
		你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好
		你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好
		你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好
		你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好
		你好你好你好你好你好你好你好你好你好你好你好你好你好你好
		你好你好你好你好你好

	</div>
</body>
</html>

边框属性

设置对象边框的颜色、样式以及宽度。格式：
border :边框宽度 边框样式 边框颜色
注意：border-width属性可以单独设置边框宽度;border-style属性可以单独设边框样式;border-color属性可以单独设置边框颜色。

none 无边框 ridge 菱形边框
double 双线边框 dashed 虚线边框
hidden 隐藏边框 solid 实现边框
groove 3D凹墙边框 inset 3D内嵌边框
dotted 点线边框 outset 3D凸边框

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		p.dotted {border-style: dotted;}
		p.dashed{border-style: dashed;}
		p.solid {border-style:solid ;}
		p.double {border-style:double ;}
		p.groove{border-style: groove;}
		p.ridge{border-style:ridge ;}
		p.inset {border-style:inset ;}
		p.outset {border-style: outset;}
	</style>
</head>
<body>
	<p class="dotted">dotted border</p>
	<p class="dashed">dashed border</p>
	<p class="solid">solid border</p>
	<p class="double">double border</p>
	<p class="groove">groove border</p>
	<p class="ridge">ridge border</p>
	<p class="inset">inset border</p>
	<p class="outset">outset border</p>
</body>
</html>

border-radius:增加圆角边框。格式：

border-radius :像素值|百分比

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		#circle1{
			width: 110px;
			height: 110px;
			border-radius: 30px;   
			border: 10px solid black;
			background: pink;
		}
		#circle2{
			width: 110px;
			height: 110px;
			border-radius: 50%;          
			border: 10px solid black;
			background: pink;
		}

	</style>
</head>
<body>
<div id="circle1"></div>
<div id="circle2"></div>

 
</body>
</html>

列表属性

list-style-type	设置列表项标记的类型：disp（空心圆），circle（空心园），square（实心方块），none（无）
list-style-image	设置使用什么图像作为列表符号
list-style-position	指定列表符号的显示位置

鼠标属性

格式：
cursor:鼠标指针样式;
crosshair 十字准线 s-resize 向下改变大小
poiter | hand 手行 e-resize 向右改变大小
wait 沙漏或表 w-resize 向左改变大小
help 问好或气球 ne-resize 向上右改变大小
no-drop 无法释放 nw-resize 向上左改变大小
text 文本或编辑 se-resize 向下右改变大小
move 移动 sw-resize 向下左改变大小
n-resize 向上改变大小

margin和padding

margin

作用：定义元素外部的透明间距，控制元素与其他元素之间的距离。

特点：

位于边框（border）之外。

背景色/图片不会延伸到 margin 区域（始终透明）。

相邻元素的 margin 可能会发生重叠（margin collapsing）。

用途：

控制元素之间的间隔。

实现水平居中（如 margin: 0 auto）。

调整元素在页面中的位置。

语法：
margin: 值; /* 四个方向统一 */
margin: 上下 左右;
margin: 上 左右 下;
margin: 上 右 下 左; /* 顺时针方向 */
margin-left 左外边距
margin-right 右外边距
margin-top 上外边距
margin-bottom 下外边距

padding

作用：定义元素内部的间距，控制内容与边框（border）之间的距离。

特点：

位于边框（border）之内。

背景色/图片会延伸到 padding 区域。

不会发生间距重叠。

用途：

增加内容与边框之间的留白。

调整元素内部的空间（如按钮文字与边框的距离）。

语法：
padding: 值; /* 同 margin 的简写规则 */
padding-left 左内边距
padding-right 右内边距
padding-top 上内边距
padding-bottom 下内边距

关键区别

特性	Margin	Padding
位置	边框外部	边框内部
背景色影响	透明	受背景色/图片影响
间距重叠	相邻元素可能发生重叠	不会重叠
用途	控制元素间距离	控制内容与边框的距离

清除内外边距

代码实现：
*{
    padding:0px;
    margin:0px;
}

浮动

语法

选择器{
    float：属性值；
}

属性值

float:left;	元素向左浮动
float:right;	元素向右浮动
float:none;	默认值，不浮动
float:inherit;	继承父元素的浮动属性

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
        div {
            width: 150px;
            height: 200px;
            background-color: blue;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
</body>

</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
        div {
            width: 150px;
            height: 200px;
            background-color: blue;
            margin: 10px;
            float: left;
        }
    </style>
</head>
<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
</body>

</html>

元素溢出overflow

作用：控制溢出元素的内容的显示方式。

hidden	溢出隐藏
scroll	溢出滚动（都显示）
auto	溢出滚动（只有溢出才显示滚动条）

代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            width: 200px;
            height: 200px;
            overflow: hidden;
            /* overflow: scroll; */
            /* overflow: auto; */
        }
    </style>
</head>
<body>
    <div>你好你好你好你好你好你好你好你好你好你好你好你好你好你好
        你好你好你好你好你好你好你好你好你好你好你好你好你好你好
        你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好
        你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好
        你好你好你好你好你好你好你好你好你好你好你好你好你好你好
        你好你好你好你好你好你好你好你好你好你好你好你好你好你好
        你好你好你好你好你好你好你好你好你好你好你好你好你好你好
        你好你好你好你好你好你好你好你好你好你好你好你好你好你好
        你好你好你好你好你好你好你好你好你好你好你好你好你好你好
    </div>
</body>

</html>

hidden：

scroll / auto：

垂直对齐方式：verticle-align

baseline 基线对齐（默认）
top 顶部对齐
middle 居中对齐
bottom 底部对齐

过渡属性：transition

作用：可以为一个元素在不同状态之间切换的时候添加过度效果。

属性值：过渡的属性花费时间（s）

注：

过渡的属性可以是具体的CSS属性
也可以为all（两个状态属性值不同的所有属性，都产生过渡效果）
transition设置给元素本身

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        img{
            width: 300px;
            transition: all 1s;
        }
        img:hover{
            width: 500px;
        }
    </style>
</head>
<body>
    <img src="../img/001.png">
</body>

</html>

（1）

（2）

鼠标悬停在图片上时，图片有（1）变为（2），变化时间为1秒。

修饰属性：opacity

作用：设置整个元素的透明度。

属性值：0 - 1

0：完全透明（元素不可见）
1：不透明
0 - 1之间：半透明

变换transform

transform-style 定义 子元素是否保留其 3D 位置，即是否在父元素的 3D 空间内进行变换。

flat（默认）子元素不保留3D位置，所有变换都在2D平面进行
preserve-3d 子元素保留3D位置，允许在3D空间内变换

2D变换

平移

transform: translate(x, y);  /* 水平x, 垂直y */
transform: translateX(n);    /* 仅水平移动 */
transform: translateY(n);    /* 仅垂直移动 */

旋转

transform: rotate(angle);    /* 顺时针旋转角度，如45deg */

注：在角度前加负号可以变为逆时针旋转。

缩放

transform: scale(x, y);      /* 宽度x倍, 高度y倍 */
transform: scaleX(n);        /* 仅水平缩放 */
transform: scaleY(n);        /* 仅垂直缩放 */

倾斜

transform: skew(x-angle, y-angle);  /* x轴和y轴倾斜角度 */
transform: skewX(angle);     /* 仅x轴倾斜 */
transform: skewY(angle);     /* 仅y轴倾斜 */

3D变换

3D平移

transform: translate3d(x, y, z);
transform: translateZ(z);

3D旋转

transform: rotate3d(x, y, z, angle);
transform: rotateX(angle);
transform: rotateY(angle);
transform: rotateZ(angle);

3D缩放

transform: scale3d(x, y, z);
transform: scaleZ(z);

多重变换

transform: rotate(45deg) scale(1.2) translateX(50px);

transform-origin 属性

设置变换的起点（默认是元素中心）

transform-origin: x-axis y-axis z-axis;
/* 值可以是: top, bottom, left, right, center, 长度或百分比 */

动画animation

动画的核心是使用 @keyframes 规则定义动画序列：
@keyframes example {
  0% {
    background-color: red;
    transform: translateX(0);
  }
  50% {
    background-color: yellow;
    transform: translateX(100px);
  }
  100% {
    background-color: green;
    transform: translateX(200px);
  }
}
注：“example”是可以自己命名的。

基本属性

animation-name	指定@keyframes动画的名称	自定义名称：none
animation-duration	动画完成一个周期的时间	时间值（s / ms）
animation-timing-function	动画的速度曲线	ease , linear , ease-in , ease-out , ease-in-out , steps(n) , cubic-bezier(n,n,n,n)
animation-delay	动画开始前的延迟时间	时间值（s / ms）
animation-iteration-count	动画播放次数	数字，infinite
animation-ditection	动画播放方向	normal , reverse , alternate , alternate-reverse
animation-fill-mode	动画执行前后如何应用样式	none , forwards , backwards , both
animation-play-state	控制动画播放状态	running , paused

注意：

顺序：复合属性中，duration 和 delay 必须按顺序出现（先duration后delay）
必填性：至少需要指定 animation-name 和 animation-duration 才能生效

复合写法

.element {
  animation: slideIn 2s ease-in-out 0.5s 3 alternate forwards running;
}
/* 等价于：
animation-name: slideIn;
animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-delay: 0.5s;
animation-iteration-count: 3;
animation-direction: alternate;
animation-fill-mode: forwards;
animation-play-state: running;
*/

伪类和伪元素

伪类

格式：

选择器:伪类{
    属性:属性值;
    属性:属性值;
    ......
}

1. 表示状态

:link: 选择未访问的链接。
:visited: 选择已访问的链接。
:hover:选择鼠标指针移人链接。(必须在:link 与 :visited 之后)
:active: 被激活的链接，即按下鼠标左键但未松开。（必须在:hover之后）
:focus: 选择获取焦点的输人字段。

2. 结构化伪类

:not:否定伪类，用于匹配不符合参数选择器的元素。
:first-child: 匹配元素的第一个子元素。
:last-child: 匹配元素的最后一个子元素。
:first-of-type:匹配属于其父元素的首个特定类型的子元素的每个元素。
:last-of-type: 匹配元素的最后一个子元素。
:nth-child: 根据元素的位置匹配一个或者多个元素，并接受一个an+b形式的参数( an+b最大数为匹配元素的个数)。
:nth-last-child:与:nth-child相似，不同之处在于是从最后一个子元素开始计数的。
:nth-of-type:与nth-child相似，不同之处在于只匹配特定类型的元素。
:nth-last-type:与nth-of-type相似，不同之处在于是从最后一个子元素开始计数的。
:only-child: 当元素是其父元素中唯一一个子元素时，:only-child匹配该元素。
:only-of-type: 当元素是其父元素中唯一一个特定类型的子元素时，:only-child匹C配该元素。
:target: 当URL带有锚名称，指向文档内某个具体元素时，:target匹配该元素。

3. 表单相关伪类

:checked:匹配被选中的input元素，这个input元素包括radio和checkbox。
:default:匹配默认选中的元素，例如，提交按钮总是表单的默认按钮。
:disabled:匹配禁用的表单元素。
:empty: 匹配没有子元素的元素。如果元素中含有文本节点、HTML元素或者一个空格，则:empty不能匹配这个元素。
:enabled: 匹配没有设置disabled属性的表单元素。
:valid:匹配条件验证正确的表单元素。
:invalid: 与:valid相反，匹配条件验证错误的表单元素。
:optional: 匹配具有optional属性的表单元素。当表单元素没有设置为required时，即为optional属性。
:required: 匹配设置了required属性的表单元素。

伪元素

:before:在某个元素之前插人一些内容。
:after: 在某个元素之后插人一-些内容。
:first-letter:为某个元素中文字的首字母或第一个字使用样式。
:first-line:为某个元素的第一行文字使用样式。
:selection:匹配被用户选中或者处于高亮状态的部分。
:placeholder:匹配占位符的文本，只有元素设置了placeholder属性时，该伪元素才能生效。

JavaScript

概念：

JavaScript 是一种强大的脚本语言，用于网页交互和服务器端开发，实现人机交互效果。

作用：

网页特效
表单验证
数据交互

使用方法

内部

直接写在html文件里，用script标签包住，script标签写在</body>上面

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        
    </head>
    <style>

    </style>
    <body>
        <script>
            alert('hello')//页面弹出警示框
        </script>
    </body>
</html>

内嵌

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        
    </head>
    <style>

    </style>
    <body>
        <button onclick="alert('hello')">haha</button>
    </body>
</html>

外部

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        
    </head>
    <style>

    </style>
    <body>
        <script src="../Javascript/demo.js"></script>
    </body>
</html>

none	无边框	ridge	菱形边框
double	双线边框	dashed	虚线边框
hidden	隐藏边框	solid	实现边框
groove	3D凹墙边框	inset	3D内嵌边框
dotted	点线边框	outset	3D凸边框

crosshair	十字准线	s-resize	向下改变大小
poiter \| hand	手行	e-resize	向右改变大小
wait	沙漏或表	w-resize	向左改变大小
help	问好或气球	ne-resize	向上右改变大小
no-drop	无法释放	nw-resize	向上左改变大小
text	文本或编辑	se-resize	向下右改变大小
move	移动	sw-resize	向下左改变大小
n-resize	向上改变大小

margin-left	左外边距
margin-right	右外边距
margin-top	上外边距
margin-bottom	下外边距

padding-left	左内边距
padding-right	右内边距
padding-top	上内边距
padding-bottom	下内边距

baseline	基线对齐（默认）
top	顶部对齐
middle	居中对齐
bottom	底部对齐

flat（默认）	子元素不保留3D位置，所有变换都在2D平面进行
preserve-3d	子元素保留3D位置，允许在3D空间内变换