html和css相关操作

html第一个网页

<!DOCTYPE html> <!--html文档声明，声明此文档是一个html5的文档-->
<html> <!--html文档开头标签--><head><!--html文档的设置标签，文档的设置及资源的引用都写在这个标签中--><meta charset="UTF-8"> <!--设置网页编码--><title>我的主页</title><!--设置网页的标题--></head><body> <!--html文档的主体标签，网页上显示的内容，都写在这个标签中--><p>你好!欢迎访问我的个人主页!</p></body>
</html><!--html文档结束标签-->

设置网页在IE上观看时，以IE的最高版本渲染网页

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><!-- 设置网页在IE上观看时，以IE的最高版本渲染网页 --><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></body>
</html>

标签的的使用方法：

<!-- 1、成对出现的标签：--><h1>h1标题</h1>
<div>这是一个div标签</div>
<p>这个一个段落标签</p><!-- 2、单个出现的标签： -->
<br>
<img src="images/pic.jpg" alt="图片"><!-- 3、带属性的标签，如src、alt 和 href等都是属性 -->
<img src="images/pic.jpg" alt="图片">
<a href="http://www.baidu.com">百度网</a><!-- 4、标签的嵌套 -->
<div><img src="images/pic.jpg" alt="图片"><a href="http://www.baidu.com">百度网</a>
</div>

块元素标签(行元素)和内联元素标签(行内元素)

标签在页面上会显示成一个方块。除了显示成方块，它们一般分为下面两类：
块元素：在布局中默认会独占一行，宽度默认等于父级的宽度，块元素后的元素需换行排列。
内联元素：元素之间可以排列在一行，设置宽高无效，它的宽高由内容撑开，元素之间默认有小间距，而且是基线对齐(文字底部对齐)。

常用块元素标签

1、标题标签，表示文档的标题，除了具有块元素基本特性外，还含有默认的外边距和字体大小

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</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>

2、段落标签，表示文档中的一个文字段落，除了具有块元素基本特性外，还含有默认的外边距–默认不会换行只能用

<br>标签

<!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><!-- 段落标签 &nbsp;加空格差不多半格，但是不精确--><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;本人叫张山，毕业于某大学计算机科学与技术专业，今年23岁，<br>本人性格开朗、稳重、待人真诚、热情。有较强的组织能力和团<br>队协作精神，良好的沟通能力和社交能力，善于处理各种人际关系。<br>能迅速适应环境，并融入其中。</p><p>这是第二个段落</p>> <!-- lt和gt是小于和大于号字符实体 --><p>&lt;p&gt;是一个段落标签<p>
</body>
</html>

3、通用块容器标签—没有语义，表示文档中一块内容，具有块元素基本特性，没有其他默认样式

<div>块容器标签

<!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><!-- 创建div标签 类似p标签，但是没有间距--><div>这是第一个div</div><div>这是第二个div</div><!-- 相当于是一个容器 --><div><!-- 有间距，但是不是div标签的间距 --><h3>这是一个h3标签</h3><p>本人叫张山，毕业于某大学计算机科学与技术专业，今年23岁，本人性格开朗、稳重、待人真诚、热情。有较强的组织能力和团队协作精神，良好的沟通能力和社交能力，善于处理各种人际关系。能迅速适应环境，并融入其中。</p></div></body>
</html>

常用内联元素标签----底部对齐

1、超链接标签，链接到另外一个网页，具有内联元素基本特性，默认文字蓝色，有下划线

<a href="02.html">第二个网页</a>
<a href="http://www.baidu.com">百度网</a>
<a href="http://www.baidu.com"><img src="images/logo.png" alt="logo"></a>
<a href="#">默认链接</a>

2、通用内联容器标签，具有内联元素基本特性，没有其他默认样式—span标签没有语义，一行文字里面的一小段文字。–主要用到样式里面

<p>这是一个段落文字，段落文字中有<span>特殊标志或样式</span>的文字</p>

3、图片标签，在网页中插入图片，具有内联元素基本特性，但是它支持宽高设置。

<img src="images/pic.jpg" alt="图片" />

<!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><!-- 创建链接标签 --><!-- 本地连接 --><a href="常用块元素标签.html">去常用块元素</a><a href="http://www.baidu.com">百度网</a><!-- 设置缺省链接地址 --><a href="#">默认不确定的地址</a><!-- 图片作为链接 --><a href="http://www.baidu.com"><img src="images/logo.png" alt="ziyelogo" width="100"></a><!-- 创建图片标签 alt文字说明--><img src="images/logo.png" alt="ziyelogo" width="100"><!-- 创建span标签 --><span>这是一个span标签</span><p>本人叫张山，毕业于某大学<span>计算机科学与技术专业</span>，今年23岁,本人性格开朗、稳重、待人真诚、热情。有较强的组织能力和</p>
</body>
</html>

网页布局原理

标签在网页中会显示成一个个的方块，先按照行的方式，把网页划分成多个行，再到行里面划分列，也就是在表示行的标签中再嵌套标签来表示列，整体按照先整体，后局部，先大后小的顺序来书写结构。

布局示例

根据网页布局的原理以及上面的实例，写出网页的html结构代码。
在这里插入图片描述

标签语义化

在布局中需要尽量使用带语义的标签，使用带语义的标签的目的首先是为了让搜索引擎能更好地理解网页的结构，提高网站在搜索中的排名(也叫做SEO)，其次是方便代码的阅读和维护。
带语义的标签
1、h1~h6：表示标题
2、p：表示段落
3、img：表示图片
4、a：表示链接

不带语义的标签
1、div：表示一块内容
2、span：表示行内的一块内容

所以我们要根据网页上显示的内容，使用适合的标签，可以优化之前的代码。

布局原理–一

<!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><!-- 作为容器标签--><div><!-- 第一行 --><div><!-- 第一列 --><div>今日头条</div><!-- 第二列 --><div>更多&gt;&gt;</div></div><!-- 第二行 --><div><img src="images/banner.jpg" alt="banner"></div><!-- 第三行 --><div><p>人工智能（Artificial Intelligence），英文缩写为AI。它是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门新的技术科学。人工智能是计算机科学的一个分支，它企图了解智能的实质，并生产出一种新的能以人类智能相似的方式做出反应的智能机器，该领域的研究包括机器人、语言识别、图像识别、自然语言处理和专家系统等。</p></div></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>Document</title>
</head>
<body><!-- 作为容器标签--><div><!-- 第一行 --><div><!-- 第一列 --><h3>今日头条</h3><!-- 第二列 --><a href="#">更多&gt;&gt;</a></div><!-- 第二行 结构的优化--><img src="images/banner.jpg" alt="banner"><!-- 第三行 --><p>人工智能（Artificial Intelligence），英文缩写为AI。它是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门新的技术科学。人工智能是计算机科学的一个分支，它企图了解智能的实质，并生产出一种新的能以人类智能相似的方式做出反应的智能机器，该领域的研究包括机器人、语言识别、图像识别、自然语言处理和专家系统等。</p></div>
</body>
</html>

css概述

为了让网页元素的样式更加丰富，也为了让网页的内容和样式能拆分开，CSS由此思想而诞生，CSS是 Cascading Style Sheets 的首字母缩写，意思是层叠样式表。有了CSS，html中大部分表现样式的标签就废弃不用了，html只负责文档的结构和内容，表现形式完全交给CSS，html文档变得更加简洁。

css基本语法

css的定义方法是：

选择器 { 属性：值；属性：值；属性：值；}

选择器是将样式和页面元素关联起来的名称，属性是希望设置的样式属性，每个属性有一个或多个值。属性和值之间用冒号，一个属性和值与下一个属性和值之间用分号，最后一个分号可以省略，代码示例：

/* 样式中注释的写法，单行或者多行注释 */
div{ width:100px; height:100px; background:gold; 
}

css引入方式

css引入页面的方式有三种：

1、内联式：通过标签的style属性，在标签上直接写样式。

<div style="width:100px; height:100px; background:red ">......</div>

2、嵌入式：通过style标签，在网页上创建嵌入的样式表。

<style type="text/css">div{ width:100px; height:100px; background:red }......
</style>

3、外链式：通过link标签，链接外部样式文件到页面中。

<link rel="stylesheet" type="text/css" href="css/main.css">

<!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><!-- 第三种引入样式的方式：外链式 推荐使用 stylesheet导入样式表--><link rel="stylesheet" href="css/main.css"><!-- 第二种引入样式的方式：内嵌式 部分推荐使用，一般首页使用 --><style><!--会选择所有div-->div{width: 200px;height: 200px;background: red;}</style>
</head>
<body><!-- 第一种引入样式的方式：内联式 不推荐使用 background背景色--><h3 style="width: 200px; height: 200px; background: gold;">这是一个h3标题</h3><div>这是一个div</div><p>这是一个段落</p>
</body>
</html>

css文件中的main.css

p{width:200px;height:200px;background:orange}

css选择器一

1、标签选择器
标签选择器，此种选择器影响范围大，一般用来做一些通用设置，或用在层级选择器中。
举例：

div{color:red} 
......
<div>这是第一个div</div>   <!-- 对应以上样式 -->
<div>这是第二个div</div>   <!-- 对应以上样式 -->

2、类选择器
通过类名来选择元素，一个类可应用于多个元素，一个元素上也可以使用多个类，应用灵活，可复用，是css中应用最多的一种选择器。
举例：

.blue{color:blue}
.big{font-size:20px}
.box{width:100px;height:100px;background:gold} 
......
<div class="blue">....</div>
<h3 class="blue big box">....</h3>
<p class="blue box">....</p>

3、层级选择器
主要应用在标签嵌套的结构中，层级选择器，是结合上面的两种选择器来写的选择器,它可与标签选择器结合使用，减少命名，同时也可以通过层级，限制样式的作用范围。
举例：

.con{width:300px;height:80px;background:green}
.con span{color:red}
.con .pink{color:pink}
.con .gold{color:gold}
......
<div class="con"><span>....</span><a href="#" class="pink">....</a><a href="#" class="gold">...</a>
</div>
<span>....</span>
<a href="#" class="pink">....</a>

<!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><style>/* 定义标签选择器，标签选择器会影响所有的同类型的标签，一般比较少用*/div{color:red}/* 定义类选择器 一个类可以用在多个标签上，一个标签可以用多个类，是使用最多的一种选择器*/.blue{color:blue}/* font-size 文字大小 */.big{font-size: 30px;}/* 定义层级选择器 */.blue span {color:purple;font-size: 20px;}</style>
</head>
<body><div>这是一个div</div><div>这是第二个div</div><p class="blue">这是一个p标签</p><!-- big blue都是class --><p class="big blue">这是第二个p标签</p><p class="blue">本人叫张山，毕业于某大学<span>计算机科学与技术专业</span>，今年23岁,本人性格开朗、稳重、待人真诚、热情。有较强的组织能力和</p><span>外面的span</span>
</body>
</html>

盒子模型

元素在页面中显示成一个方块，类似一个盒子，CSS盒子模型就是使用现实中盒子来做比喻，帮助我们设置元素对应的样式。盒子模型示意图如下：
在这里插入图片描述
把元素叫做盒子，设置对应的样式分别为：盒子的宽度(width)、盒子的高度(height)、盒子的边框(border)、盒子内的内容和边框之间的间距(padding)、盒子与盒子之间的间距(margin)。

设置宽高

width:200px;  /* 设置盒子的宽度，此宽度是指盒子内容的宽度，不是盒子整体宽度(难点) */ 
height:200px; /* 设置盒子的高度，此高度是指盒子内容的高度，不是盒子整体高度(难点) */

设置边框
设置一边的边框，比如顶部边框，可以按如下设置：

border-top:10px solid red;

其中10px表示线框的粗细；solid表示线性。

设置其它三个边的方法和上面一样，把上面的’top’换成’left’就是设置左边，换成’right’就是设置右边，换成’bottom’就是设置底边。

四个边如果设置一样，可以将四个边的设置合并成一句：

border:10px solid red;

设置内间距padding

设置盒子四边的内间距，可设置如下：

padding-top：20px;     /* 设置顶部内间距20px */ 
padding-left:30px;     /* 设置左边内间距30px */ 
padding-right:40px;    /* 设置右边内间距40px */ 
padding-bottom:50px;   /* 设置底部内间距50px */

上面的设置可以简写如下：

padding：20px 40px 50px 30px; /* 四个值按照顺时针方向，分别设置的是 上 右 下 左  
四个方向的内边距值。 */

padding后面还可以跟3个值，2个值和1个值，它们分别设置的项目如下：

padding：20px 40px 50px; /* 设置顶部内边距为20px，左右内边距为40px，底部内边距为50px */ 
padding：20px 40px; /* 设置上下内边距为20px，左右内边距为40px*/ 
padding：20px; /* 设置四边内边距为20px */

设置外间距margin
外边距的设置方法和padding的设置方法相同，将上面设置项中的’padding’换成’margin’就是外边距设置方法。

盒子的真实尺寸
盒子的width和height值固定时，如果盒子增加border和padding，盒子整体的尺寸会变大，所以盒子的真实尺寸为：

盒子宽度 = width + padding左右 + border左右
盒子高度 = height + padding上下 + border上下

设置元素浮动属性float
浮动可以让块元素排列在一行，浮动分为左浮动：float:left; 右浮动：float:right;

设置元素背景属性background
设置元素背景色或者背景图片，如：background:gold; 设置元素背景色为金色

<!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><style>.box{/* 设置盒子内容的宽度 */width: 300px;/* 设置高度 */height: 300px;/* 设置背景色 */background: gold;/* 设置顶部边框边框的线型:solid 实线dashed 虚线dotted 点线*//* border-top: 10px solid black; *//* 设置左边的边框 *//* border-left: 10px dashed black; *//* 设置右边的边框 *//* border-right: 10px dotted black; *//* 设置底部的边框 *//* border-bottom: 10px solid black; *//* 同时设置四个边框 */border:10px solid black;/* 设置内边距 *//* 设置顶部内边距 *//* padding-top: 20px; *//* 设置左边的内边距 *//* padding-left: 40px; *//* 设置右边的内边距 *//* padding-right: 80px; *//* 设置底边的内边距 *//* padding-bottom: 160px; *//* 分别设置四个边的内边距可以合在一起写： *//* 分别设置（顺时针方向）  上边  右边   下边  左边 的padding值 *//* padding: 20px 80px 160px 40px; *//* 分别设置上边，左右边，下边的padding的值 *//* padding: 20px 80px 160px; *//* 分别设置上下边，左右边的padding *//* padding: 20px 80px; *//* 同时设置四个边的padding值 */padding: 20px;/* 设置外边距 *//* 设置顶部外边距 *//* margin-top: 20px; *//* 设置左边的外边距 *//* margin-left: 40px; *//*设置右边的外边距*//* margin-right: 80px; *//* 设置底部的外边距 *//* margin-bottom: 160px; *//* 分别设置四个边的外边距可以合在一起写： *//* 分别设置（顺时针方向）  上边  右边   下边  左边 的margin值 *//* margin:20px 80px 100px 40px; *//* 分别设置上边  左右边   下边 的margin值 */margin:20px 80px 160px;/* 分别设置上下边  左右边的margin值 *//* margin:20px 80px; *//* 同时设置四个边的margin值 */margin:20px;}</style>
</head>
<body><div class="box">HTML是 HyperText Mark-up Language 的首字母简写，意思是超文本标记语言，超文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的标签组成，用这种语言制作的文件保存的是一个文本文件，文件的扩展名为html或者htm。HTML是 HyperText Mark-up Language 的首字母简写，意思是超文本标记语言，超文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的标签组成，用这种语言制作的文件保存的是一个文本文件，文件的扩展名为html或者htm。</div><div>下边的div</div>
</body>
</html>

css文本属性

color 设置文字的颜色，如： color:red;
font-size 设置文字的大小，如：font-size:12px;
font-family设置文字的字体，如：font-family:‘微软雅黑’;为了避免中文字不兼容，一般写成：font-family:‘Microsoft Yahei’;
font-weight 设置文字是否加粗，如：font-weight:bold; 设置加粗 font-weight:normal设置不加粗
line-height 设置文字的行高，如：line-height:24px;表示文字高度加上文字上下的间距是24px，也就是每一行占有的高度是24px
text-decoration 设置文字的下划线，如：text-decoration:none; 将文字下划线去掉
text-align 设置文字水平对齐方式，如text-align:center 设置文字水平居中
text-indent 设置文字首行缩进，如：text-indent:24px; 设置文字首行缩进24px

css布局演示

通过样式，并且参照下图，可以把之前写的布局做进一步的调整，完成最终的布局效果：
在这里插入图片描述

<!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><style>/* 设置边框 */.news_con{width:285px;height: 310px;/* 设置顶部边框 */border-top: 1px solid #c8dcf2;/* 设置底部边框 */border-bottom: 1px solid #c8dcf2;}.news_con div{/* 宽度width不用设置，默认等于父级的宽度 */height: 40px;}/* 层级选择器可以越级选择 */.news_con h3{/* 设置浮动，让h3和a标签可以排列在一行 */float: left;/*清除h3标题默认的外边距*/margin: 0px;/* 设置文字颜色 */color:#172c45;/* 设置文字大小 */font-size: 16px;/* 设置文字字体 */font-family: 'Microsoft YaHei';/* 设置文字不加粗 */font-weight: normal;/* 通过设置行高来将单行文字垂直居中 上下高度+文字间距等于40px*/line-height: 40px; }.news_con a{float:right;/* 设置文字颜色 */color:#172c45;/* 设置文字大小 */font-size:12px;/* 设置文字字体 */font-family: 'Microsoft YaHei';/* 通过设置行高来将单行文字垂直居中 */line-height:40px;/* 去掉文字默认的下划线 */text-decoration:none;}.news_con p{/* 设置文字颜色 */color: #737373;/* 设置文字大小 */font-size: 12px;line-height: 20px;/* 设置首行缩进 */text-indent: 24px;/* 清除p标签默认的外边距 */margin: 0px;margin-top: 10px;}</style>
</head>
<body><!-- 作为容器标签--><div class="news_con"><!-- 第一行 --><div><!-- 第一列 --><h3>今日头条</h3><!-- 第二列 --><a href="#">更多&gt;&gt;</a></div><!-- 第二行 结构的优化--><img src="images/banner.jpg" alt="banner"><!-- 第三行 --><p>人工智能（Artificial Intelligence），英文缩写为AI。它是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门新的技术科学。人工智能是计算机科学的一个分支，它企图了解智能的实质，并生产出一种新的能以人类智能相似的方式做出反应的智能机器，该领域的研究包括机器人、语言识别、图像识别、自然语言处理和专家系统等。</p></div>
</body>
</html>

块元素居中技巧
块元素如果想设置相对页面水平居中，可以使用margin值中的auto关键字，“auto”只能用于左右的margin设置，不能用于上下的：

.box{width:300px;height:300px;background:gold;margin-left:0px;margin-top:0px;margin-left:auto;margin-right:auto;    
}

简写如下：

.box{width:300px;height:300px;background:gold;margin:0px auto;   }

<!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><style>/* 清除body标签默认的外边距 */body{margin: 0px;}.con{width: 300px;height: 300px;border: 1px solid black;/* 相对于整个页面(body)居中 */margin: 0px auto;}.box{width: 200px;height: 80px;background: gold;/* margin-left: auto;margin-right: auto;margin-top: 0px;margin-bottom: 0px; *//* margin: 0px auto 0px auto; */margin: 0px auto;}</style></head>
<body><div class="con"><div class="box"></div></div>    
</body>
</html>

相对地址与绝对地址

网页上引入或链接到外部文件，需要定义文件的地址，常见引入或链接外部文件包括以下几种：

<!-- 引入外部图片   -->
<img src="images/001.jpg" alt="图片" /><!-- 链接到另外一个网页   -->
<a href="002.html">链接到网页2</a><!-- 外链一个css文件   -->
<link rel="stylesheet" type="text/css" href="css/main.css" /><!-- 外链一个js文件   -->
<script type="text/javascript" src="js/jquery.js"></script>

这些地址分为相对地址和绝对地址:

相对地址
相对于引用文件本身去定位被引用的文件地址，以上的例子都是相对地址，相对地址的定义技巧：

“ ./ ” 表示当前文件所在目录下，比如：“./pic.jpg” 表示当前目录下的pic.jpg的图片，这个使用时可以省略。
“ …/ ” 表示当前文件所在目录下的上一级目录，比如：“…/images/pic.jpg”表示当前目录下的上一级目录下的images文件夹中的pic.jpg的图片。

绝对地址
相对于磁盘的位置去定位文件的地址，比如：绝对地址在整体文件迁移时会因为磁盘和顶层目录的改变而找不到文件，相对地址就没有这个问题。

<!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><!-- 定义相对地址 --><!-- ./表示当前文件所在的目录 一般是省略不写--><img src="./images/banner.jpg" alt="banner"><img src="images/programmer.jpg" alt="程序员"><!-- 定义绝对位置 --><img src="C:\Users\blur\Desktop\go前端02天\4-代码\images\banner.jpg" alt="banner"><!-- 定义相对地址 --><!-- "../" 表示当前文件所在目录的上一级目录，不可以省略不写，如果再上一级，可以写成“../../” --><img src="../images/banner.jpg" alt="banner">
</body>
</html>

列表标签

列表一般应用在布局中的新闻标题列表和文章标题列表以及菜单，它是含有语义的，标签结构如下：
列表一般应用在布局中的新闻标题列表和文章标题列表以及菜单，它是含有语义的，标签结构如下：

<ul><li>列表标题一</li><li>列表标题二</li><li>列表标题三</li>
</ul>

列表的内容一般是可以链接的，点击链接到新闻或者文章的具体内容，所以具体结构一般是这样的：

<ul><li><a href="#">列表标题一</a></li><li><a href="#">列表标题二</a></li><li><a href="#">列表标题三</a></li>
</ul>

列表相关样式

list-style 去掉列表项的小圆点，比如：list-style:none

<!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><style>.list{/* 去掉列表的小圆点 */list-style: none;/* 清除列表默认的内边距 */padding: 0px;/* 清除列表的外边距 */margin: 0px;}.list li{/*设置行高 */line-height: 50px;border-bottom: 1px solid black;/* 设置缩进 */text-indent: 20px;}</style></head>
<body><!-- ul>li{列表文字}*6 --><ul class="list"><li>列表文字</li><li>列表文字</li><li>列表文字</li><li>列表文字</li><li>列表文字</li><li>列表文字</li></ul><!-- ul>(li>a{列表文字})*6 --><ul><li><a href="#">列表文字</a></li><li><a href="#">列表文字</a></li><li><a href="#">列表文字</a></li><li><a href="#">列表文字</a></li><li><a href="#">列表文字</a></li><li><a href="#">列表文字</a></li></ul>
</body>
</html>

html表单
表单用于搜集不同类型的用户输入，表单由不同类型的标签组成，相关标签及属性用法如下：

1、标签定义整体的表单区域

action属性定义表单数据提交地址
method属性定义表单提交的方式，一般有“get”方式和“post”方式
2、标签为表单元素定义文字标注
3、标签定义通用的表单元素

type属性

type=“text” 定义单行文本输入框
type=“password” 定义密码输入框
type=“radio” 定义单选框
type=“checkbox” 定义复选框
type=“file” 定义上传文件
type=“submit” 定义提交按钮
type=“reset” 定义重置按钮
type=“button” 定义一个普通按钮
value属性定义表单元素的值
name属性定义表单元素的名称，此名称是提交数据时的键名

4、<textarea>标签定义多行文本输入框

5、<select>标签定义下拉表单元素

6、<option>标签与标签配合，定义下拉表单元素中的选项

注册表单实例：

<form action="http://www..." method="get">
<p>
<label>姓名：</label><input type="text" name="username" />
</p>
<p>
<label>密码：</label><input type="password" name="password" />
</p>
<p>
<label>性别：</label>
<input type="radio" name="gender" value="0" /> 男
<input type="radio" name="gender" value="1" /> 女
</p>
<p>
<label>爱好：</label>
<input type="checkbox" name="like" value="sing" /> 唱歌
<input type="checkbox" name="like" value="run" /> 跑步
<input type="checkbox" name="like" value="swiming" /> 游泳
</p>
<p>
<label>照片：</label>
<input type="file" name="person_pic">
</p>
<p>
<label>个人描述：</label>
<textarea name="about"></textarea>
</p>
<p>
<label>籍贯：</label>
<select name="site"><option value="0">北京</option><option value="1">上海</option><option value="2">广州</option><option value="3">深圳</option>
</select>
</p>
<p>
<input type="submit" name="" value="提交">
<input type="reset" name="" value="重置">
</p>
</form>

<!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><h3>用户注册</h3><form action="https://www.baidu.com" method="post"><p><!-- 标签 为表单元素定义文字标注 --><label>用户名:</label><!-- 标签 定义通用的表单元素 type='text' 定义单行文本输入框--><input type="text" name="username"></p><p><label>密&nbsp;&nbsp;&nbsp;码:</label><input type="password" name="password"> <!---password 密码输入框--></p><p><label>性&nbsp;&nbsp;&nbsp;别:</label><!-- type="radio"定义单选框，value属性 定义表单元素的值- name属性 定义表单元素的名称，此名称是提交数据时的键名 --><input type="radio" name="gender" value="0"> 男<input type="radio" name="gender" value="1"> 女</p><p><label>爱&nbsp;&nbsp;&nbsp;好:</label><input type="checkbox" name="hobby" value="programmer">编程<input type="checkbox" name="hobby" value="study">学习<input type="checkbox" name="hobby" value="self-study">自习<input type="checkbox" name="hobby" value="review">复习<input type="checkbox" name="hobby" value="foot">洗脚</p><p><label>照&nbsp;&nbsp;&nbsp;片:</label> <!--- type="file" 定义上传文件--><input type="file" name="pic">          </p><p><!-- 5、`<select>`标签 定义下拉表单元素`<option>`标签 与<select>标签配合，定义下拉表单元素中的选项 --><label>籍&nbsp;&nbsp;&nbsp;贯:</label><select name="site"><option value="0">北京</option><option value="1">上海</option><option value="2">广州</option><option value="3">深圳</option></select>         </p><p><!--`<textarea>`标签 定义多行文本输入框 --><label>简&nbsp;&nbsp;&nbsp;介:</label><textarea name="info"></textarea>    </p><p><!-- - type="submit" 定义提交按钮- type="reset" 定义重置按钮- type="button" 定义一个普通按钮 --><input type="submit" value="提交"><input type="reset" value="重置"><input type="button" value="普通按钮"></p></form>
</body>
</html>

表格元素及相关样式

1、<table>标签：声明一个表格

2、<tr>标签：定义表格中的一行

3、<td>和<th>标签：定义一行中的一个单元格，td代表普通单元格，th表示表头单元格
表格相关样式属性

border-collapse 设置表格的边线合并，如：border-collapse:collapse;

<!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><style>.tablestyle01{width: 500px;height: 260px;/* 设置边框 */border: 1px solid black;/* 让水平居中 */margin: 50px auto;/* 将表格的边线合并成一条 */border-collapse: collapse;}.tablestyle01 td{border: 1px solid black;/* 设置文字水平居中 */text-align: center;}.tablestyle01 th{border: 1px solid black;background: blue;/* 设置th中字体颜色为白色 */color: white;}</style>
</head>
<body><!-- table>(tr>td*5)*4 --><table class="tablestyle01"><tr><th>id</th><th>姓名</th><th>性别</th><th>年龄</th><th>班级</th></tr><tr><td>1</td><td>张山</td><td></td><td></td><td></td></tr><tr><td>2</td><td>李思</td><td></td><td></td><td></td></tr><tr><td>3</td><td>王五</td><td></td><td></td><td></td></tr><tr><td>4</td><td>赵柳</td><td></td><td></td><td></td></tr></table>
</body>
</html>

css选择器二

4、id选择器
通过id名来选择元素，元素的id名称不能重复，所以一个样式设置项只能对应于页面上一个元素，不能复用，id名一般给程序使用，所以不推荐使用id作为选择器。
举例：

#box{color:red} 
......
<p id="box">这是一个段落标签</p>   <!-- 对应以上一条样式，其它元素不允许应用此样式 -->
<p>这是第二个段落标签</p> <!-- 无法应用以上样式，每个标签只能有唯一的id名 -->
<p>这是第三个段落标签</p> <!-- 无法应用以上样式，每个标签只能有唯一的id名  -->

<!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><style>/* 定义id选择器，id选择器只能用在一个标签上，一般比较少用 */#box{color:red;font-size: 30px;}</style>
</head>
<body><!-- 定义id属性，id属性值是唯一的，不能重复的 --><div id="box">这是第一个div标签</div><!-- id名称相同时不合法的 --><!-- <div id="box">这是第二个div标签</div> -->
</body>
</html>

5、组选择器
多个选择器，如果有同样的样式设置，可以使用组选择器。举例：

.box1,.box2,.box3{width:100px;height:100px}
.box1{background:red}
.box2{background:pink}
.box2{background:gold}<div class="box1">....</div>
<div class="box2">....</div>
<div class="box3">....</div>

<!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><style>/* .box01{width: 200px;height: 200px;background: gold;}.box02{width: 200px;height: 200px;background: red;}.box03{width: 200px;height: 200px;background: orange;} *//* 上面的代码可以简化下面组选择器的写法 */.box01,.box02,.box03{width: 200px;height: 200px;}.box01{background: gold;}.box02{background: red;}.box03{background: orange;}</style>
</head>
<body><div class="box01"></div><div class="box02"></div><div class="box03"></div>
</body>
</html>

6、伪类选择器
常用的伪类选择器有hover，表示鼠标悬浮在元素上时的状态。

.box1:{width:100px;height:100px;background:gold;}
.box1:hover{width:300px;}

<!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><style>.box{width: 100px;height: 100px;background: gold;}/* 定义伪类选择器 这个代表鼠标移动到box变成红色 以及高宽*/.box:hover{width: 200px;height: 200px;background: red;}.link01{/* 去掉下划线 */text-decoration: none;}.link01:hover{color:brown;} </style>
</head>
<body><div class="box"></div><br><br><br><a href="#" class="link01">这是一个链接</a>
</body>
</html>

css显示特性

display属性是用来设置元素的类型及隐藏的，常用的属性有：
1、none 元素隐藏且不占位置
2、inline 元素以行内元素显示
3、block 元素以块元素显示

<!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><style>.box{/* 将块元素转化为内联元素 */display: inline;}.link01{/* 将内联元素转化为块元素 */display: block;}.con{width: 200px;height: 200px;background: gold;/* 设置样式将元素隐藏起来 */display: none;}</style></head>
<body><!-- style="display:block"覆盖.con里面的display --><div class="con" style="display:block"></div><div class="box">这是第一个div</div><div class="box">这是第二个div</div><a href="#" class="link01">这是第一个链接</a><a href="#" class="link01">这是第二个链接</a>
</body>
</html>

css元素溢出

当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的子元素的方式，设置的方法是通过overflow属性来设置。

overflow的设置项：
1、visible 默认值。内容不会被修剪，会呈现在元素框之外。
2、hidden 内容会被修剪，并且其余内容是不可见的。
3、scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
4、auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

<!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><style>.con{width: 300px;height: 300px;border: 1px solid black;margin: 50px auto;/* 在父级上设置子级超出的部分如何显示 *//* visible: 显示超出的部分hidden: 隐藏超出的部分scroll: 不管子元素是否超出，都显示滚动条或者滚动条的背景框auto:通过子元素的尺寸，动态显示滚动条*//* overflow: visible; *//* overflow: hidden; *//* overflow: scroll; */overflow: auto;}/* 超出 *//* .box{width: 200px;height: 500px;background: gold;} */.box{width: 280px;height: 500px;background: gold;}</style>
</head>
<body><div class ="con"><div class="box"><div>文字内容</div><br><br><br><div>文字内容</div><br><br><br><div>文字内容</div></div></div>
</body>
</html>

表单常用样式、属性及示例

outline 设置input框获得焦点时，是否显示凸显的框线，一般设置为没有,比如：outline:none;
placeholder 设置input输入框的默认提示文字。
表单布局实例
在这里插入图片描述

<!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><style>.search_form{width: 602px;height: 42px;background: gold;margin: 100px auto;}.input_txt{width: 500px;height: 40px;border: 1px solid #0fad10;/* 通过浮动解决内联元素默认间距以及基线对齐的问题 */float: left;/* 清除输入框默认的padding值 */padding: 0px;/* 让文字缩进 */text-indent: 10px;/* 去掉输入框点击时显示的高亮框 */outline: none;}.input_sub{width: 100px;height: 42px;background: #0fad10;/* 去掉按钮默认的边框 */border: 0px;/* 通过浮动解决内联元素默认间距以及基线对齐的问题 */float: left;/* 设置文字和颜色 */font-size: 18px;color: white;}</style>
</head>
<body><form class="search_form" action="https://cn.bing.com/search"><!-- 设置输入框默认的提示文字，用placeholder属性 --><input type="text" class="input_txt" placeholder="请输入搜索文字"><input type="submit" value="搜 索" class="input_sub"></form>
</body>
</html>

定位

文档流
文档流，是指盒子按照html标签编写的顺序依次从上到下，从左到右排列，块元素占一行，行内元素在一行之内从左到右排列，先写的先排列，后写的排在后面，每个盒子都占据自己的位置。

关于定位
我们可以使用css的position属性来设置元素的定位类型，postion的设置项如下：

relative 生成相对定位元素，一般是将父级设置相对定位，子级设置绝对定位，子级就以父级作为参照来定位，否则子级相对于body来定位。
absolute生成绝对定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于上一个设置了定位的父级元素来进行定位，如果找不到，则相对于body元素进行定位。
fixed 生成固定定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于浏览器窗口进行定位。

定位元素的偏移
定位的元素还需要用left、right、top或者bottom来设置相对于参照元素的偏移值。

定位元素层级
定位元素是浮动的正常的文档流之上的，可以用z-index属性来设置元素的层级

伪代码如下:

.box01{......position:absolute;  /* 设置了绝对定位 */left:200px;            /* 相对于参照元素左边向右偏移200px */top:100px;          /* 相对于参照元素顶部向下偏移100px */z-index:10          /* 将元素层级设置为10 */
}

相对定位属性

relative 生成相对定位元素，一般是将父级设置相对定位，子级设置绝对定位，子级就以父级作为参照来定位，否则子级相对于body来定位。

<!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><style>.con{width: 300px;height: 300px;border: 1px solid black;margin: 50px auto;}.box01,.box02, .box03{width: 200px;height: 80px;margin: 10px;}.box01{background: lightgreen;/* 设置相对定位属性，相对于自己在文档流的位置来偏移 */position: relative;/* 设置偏移值 */left: 50px;top: 50px;}.box02{background: lightcoral;}.box03{background: lightskyblue;}</style>
</head>
<body><div class="con"><div class="box01">1</div><div class="box02">2</div><div class="box03">3</div></div>
</body>
</html>

绝对定位

absolute生成绝对定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于上一个设置了定位的父级元素来进行定位，如果找不到，则相对于body元素进行定位。

<!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><style>.con{width: 300px;height: 300px;border: 1px solid black;margin: 50px auto;/* 将父级设置为相对定位，不设置偏移值，父级就有定位属性了，而且不移动，子级就可以相对于它来做绝对定位 */position: relative;/*  css元素溢出 */overflow: hidden;}.box01,.box02, .box03{width: 200px;height: 80px;margin: 10px;}.box01{background: lightgreen;/* 设置绝对定位属性，相对于自己在文档流的位置来偏移 */position: absolute;/* 设置偏移值*/left: 50px;top: 50px;}.box02{background: lightcoral;}.box03{background: lightskyblue;}</style>
</head>
<body><div class="con"><div class="box01">1</div><div class="box02">2</div><div class="box03">3</div></div>
</body>
</html>

固定定位

fixed 生成固定定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于浏览器窗口进行定位。

<!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><style>.con{width: 300px;height: 300px;border: 1px solid black;margin: 50px auto;}.box01,.box02, .box03{width: 200px;height: 80px;margin: 10px;}.box01{background: lightgreen;/* 设置绝对固定定位属性，相当于浏览器窗口来偏移*/position: fixed;/* 设置偏移值*/left: 50px;top: 50px;}.box02{background: lightcoral;}.box03{background: lightskyblue;}</style>
</head>
<body><div class="con"><div class="box01">1</div><div class="box02">2</div><div class="box03">3</div></div>
</body>
</html>

定位元素层级

定位元素是浮动的正常的文档流之上的，可以用z-index属性来设置元素的层级

<!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><style>.con{width: 300px;height: 300px;border: 1px solid black;margin: 50px auto;/* 相对定位 */position: relative;}.box01,.box02, .box03{width: 200px;height: 80px;margin: 10px;/* 绝对定位 */position: absolute;}.box01{background: lightgreen;left: 0px;top: 0px;/* 设置定位元素层级 */z-index: 4;}.box02{background: lightcoral;left: 30px;top: 30px;z-index: 5;}.box03{background: lightskyblue;left: 60px;top: 60px;z-index: 3;}</style>
</head>
<body><div class="con"><div class="box01">1</div><div class="box02">2</div><div class="box03">3</div></div>
</body>
</html>

理解练习
水平垂直居中的弹框

新增相关样式属性

/* 设置元素透明度,将元素透明度设置为0.3，此属性需要加一个兼容IE的写法 */
opacity:0.3;
/* 兼容IE */
filter:alpha(opacity=30);

<!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><style>.pop{width: 500px;height: 300px;border: 1px solid black;background: gold;/*  固定定位，让弹框相对于浏览器窗口来定位，同时可以盖住其他元素*/position: fixed;/* 定位元素水平垂直居中的技巧 */left: 50%;margin-left: -251px;top: 50%;margin-top: -151px;/* 将弹框设置成一个很大的值，保证它可以盖住其他任何元素 */z-index: 9999;}.mask{position: fixed;/* 设置为固定定位宽度和高度就可以参照浏览器窗口的大小来设置 */width: 100%;height: 100%;left: 0px;top: 0px;background: black;z-index: 9998;/* 设置元素的透明度 */opacity: 0.3;/* 透密度兼容IE的写法 */filter: alpha(opacity=30);}/* 弹框显示隐藏 */.pop_con{display: none; /*不显示*/}</style>
</head>
<body><h1>页面的内容</h1><div class="pop_con" style="display: block;"><div class="pop"><h3>弹框标题</h3><p>弹框的内容</p></div><div class="mask"></div></div>
</body>
</html>

CSS权重

CSS权重指的是样式的优先级，有两条或多条样式作用于一个元素，权重高的那条样式对元素起作用,权重相同的，后写的样式会覆盖前面写的样式。

权重的等级—权重大的起作用

可以把样式的应用方式分为几个等级，按照等级来计算权重
1、内联样式，如：style=””，权重值为1000
2、ID选择器，如：#content，权重值为100
3、类，伪类，如：.content、:hover 权重值为10
4、标签选择器，如：div、p 权重值为1

权重的计算实例

1、实例一：<style type="text/css">div{color:red;}        
</style>
......
<div style="color:blue">这是一个div元素</div>
<!-- 
两条样式同时作用一个div，上面的样式权重值为1，下面的行间样式的权重值为1000，
所以文字的最终颜色为blue 
-->
2、实例二：<style type="text/css">body #content .main_content h2{color:red;    }#content .main_content h2{color:blue;}
</style>
......
<div id="content"><div class="main_content"><h2>这是一个h2标题</h2></div>
</div>
<!-- 
第一条样式的权重计算： 1+100+10+1，结果为112；
第二条样式的权重计算： 100+10+1，结果为111；
h2标题的最终颜色为red-->

<!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><style>/* 权重值: 1 */div{color:blue;}/* 权重值：1+10+10+1 = 22 */body .con .box h3{color: #9f4743;}/* 权重值：10+10+1 = 21 */.con .box h3{color:red;}/* 权重值：10+1 = 11 */.con h3{color: blue;}/* 如果权重值一样，那么就覆盖 */.box h3{color: pink;}</style>
</head>
<body><!-- style的权重是：1000 --><div style="color:red">这是一个div</div><div class="con"><div class="box"><h3>这是一个h3标题</h3></div></div>
</body>
</html>