还是老套路：理论+实践
一、介绍什么是html
html（超文本标记语言）：是编写网页内容的一种语言。
超文本有两层含义：
（1）就是超越文本限制的内容，如图片，声音，视频等。
（2）就是超链接文本，从一个网页跳转到另一个网页。
二、html的基本结构
<!DOCTYPE html> # 文档声明，用来声明当前页面的html版本。目前这个是html 5
<html lang="en"> # 网页的开始标签
<head> #头部分，用于设置网页标题、编码格式和导入css和js文件
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body> # 网页中显示的内容在这个标签中编写
</body>
</html>
- 第一行
<!DOCTYPE html>是文档声明, 用来指定页面所使用的html的版本, 这里声明的是一个html5的文档。 <html>...</html>标签是开发人员在告诉浏览器，整个网页是从<html>这里开始的，到<html>结束,也就是html文档的开始和结束标签。<head>...</head>标签用于定义文档的头部,是负责对网页进行设置标题、编码格式以及引入css和js文件的。<body>...</body>标签是编写网页上显示的内容。
注：在新建一个html文件后，html文件中默认是什么也没有的，按！+ enter 可以自动打印出HTML网页的基本结构。
三、常用的html标签
<body>
<!-- 1.单个出现的标签 -->
<br> 换行
<img src="images/pic.png" alt="图片">
<hr> 打印一条横线
<!-- 2.成对出现的标签 -->
<h1>这是一个h1标题的标签</h1>
<div>这是一个div标签，代表一个区块</div>
<p>这是一个段落标签，代表新的段落</p>
<!-- 3.标签的嵌套 -->
<div>
<img src="images/pic1.png" alt="">
<a href="http://www.csdn.com">CSDN网站</a>
</div>
</body>说明：
1.标签一般不区分大小写，但是推荐使用小写。
2.根据标签的形式可以分为：单标签（空标签）和双标签（闭合标签)。
3.咱们学习html语言其实就是学习各种标签的用法，常用的标签有20多个。
4.单标签没有标签内容，双标签可以嵌套和承载其他文本内容。
5.关于导入文件时候的绝对路径和相对路径，建议使用相对路径。
五、列表标签、表格标签、表单标签
1. 列表标签
（1）.列表标签分为两种：
- 无序列表标签（ul标签）
- 有序列表标签（ol标签）
（2）无序列表标签
<!-- ul标签定义无序列表 -->
<ul>
<!-- li标签定义列表项目 -->
<li>列表标题一</li>
<li>列表标题二</li>
<li>列表标题三</li>
</ul>
（3）有序列表标签
<!-- ol标签定义有序列表 -->
<ol>
<!-- li标签定义列表项目 -->
<li><a href="#">列表标题一</a></li>
<li><a href="#">列表标题二</a></li>
<li><a href="#">列表标题三</a></li>
</ol>
2. 表格标签
（1）表格标签
<table> # 表示一个表格
<tr> # 表示表格中的一行
<th>姓名</th> # 表示表格中的表头1
<th>年龄</th>
</tr> # 一行结束
<tr> # 下一行
<td>张三</td> # 表示表格中的一列，也就是内容
<td>18</td>
</tr>
</table> # 表格结束
3. 表单标签
（1）表单：可以把用户输入的数据一起提交给Web服务器，平时我们在网页中写的注册和登录界面都是表单
（2）表单标签的介绍：
-
<form>标签 表示表单标签，定义整体的表单区域 -
<label>标签 表示表单元素的文字标注标签，定义文字标注 -
<input>标签 表示表单元素的用户输入标签，定义不同类型的用户输入数据方式- type属性
- type="text" 定义单行文本输入框
- type="password" 定义密码输入框
- type="radio" 定义单选框
- type="checkbox" 定义复选框
- type="file" 定义上传文件
- type="submit" 定义提交按钮
- type="reset" 定义重置按钮
- type="button" 定义一个普通按钮
- type属性
-
<textarea>标签 表示表单元素的多行文本输入框标签 定义多行文本输入框 -
<select>标签 表示表单元素的下拉列表标签 定义下拉列表<option>标签 与<select>标签配合，定义下拉列表中的选项
（3）表单的使用：
<body>
<form action=""></form>
<label for="">用户名:</label>
<input type="text" name="username" id="">
<br>
<label for="">密码:</label>
<input type="password" name="pwd">
<br>
<label for="">性别:</label>
<input name="gender" type="radio" value="man">男
<input name="gender" type="radio" value="woman">女
<input name="gender" type="radio" value="mimi">保密
<br>
<label for="">家庭住址:</label>
<input type="checkbox" name="address" value="fux">阜新
<input type="checkbox" name="address" value="beij">北京
<input type="checkbox" name="address" value="qigd">青岛
<br>
<label for="">一寸照片</label>
<input type="file" name="image">
<br>
<label for="">个人介绍:</label>
<textarea name="js" id="" cols="30" rows="10"></textarea>
<br>
<label for="">爱好</label>
<select name="like" id="">
<option value="yundong">跑步</option>
<option value="read">读书</option>
<option value="playball">打球</option>
</select>
<br>
<input type="submit" name="tijiao">
<input type="reset" name="chongzhi">
<button>一个普通按钮</button>
</form>
六、表单的提交
1. 表单属性的设置
<form>表单标签
- action属性：用于设置表单数据的提交地址（服务器地址）
- method属性：用于设置表单提交数据的方式，一般有GET方式和POST两种方式
2. 表单元素属性设置
- name属性：用于设置表单元素的名称，该名称是提交数据时的参数名
- value属性：用于设置表单元素的值，该值是提交数据时参数名所对应的值
3. 表单提交的使用：（只是在 form标签中增加了action属性和method方法。
<form action="http://192.168.1.52:9999/" method="GET">
<label for="">用户名:</label>
<input type="text" name="username" id="">
<br>
<label for="">密码:</label>
<input type="password" name="pwd">
<br>
<label for="">性别:</label>
<input name="gender" type="radio" value="man">男
<input name="gender" type="radio" value="woman">女
<input name="gender" type="radio" value="mimi">保密
<br>
<label for="">家庭住址:</label>
<input type="checkbox" name="address" value="fux">阜新
<input type="checkbox" name="address" value="beij">北京
<input type="checkbox" name="address" value="qigd">青岛
<br>
<label for="">一寸照片</label>
<input type="file" name="image">
<br>
<label for="">个人介绍:</label>
<textarea name="js" id="" cols="30" rows="10"></textarea>
<br>
<label for="">爱好</label>
<select name="like" id="">
<option value="yundong">跑步</option>
<option value="read">读书</option>
<option value="playball">打球</option>
</select>
<br>
<input type="submit" name="tijiao">
<input type="reset" name="chongzhi">
<button>一个普通按钮</button>七、CSS
1 . 定义
CSS（层叠样式表）：用来美化网页和控制页面布局的一种语言。
2. CSS的基本用法
选择器{
样式规则
}
选择器：就是用来查找标签的，查找到标签然后对标签加设置好的样式。
样式规则：
属性名1：属性值1;
属性名2：属性值2;
属性名3：属性值3;
...
css示例代码：
div{
width:10px; # 设置宽度
height:20px; # 设置高度
font-size:18px; # 设置文字大小
color:blue; # 设置文字颜色
background:gold; # 设置背景颜色
}3. CSS的引入方式
- 行内式
- 内嵌式
- 外链式
（1）行内式：就是直接在某个标签中的style属性中添加css样式
示例代码：
<div style="width:66px; height:66px; background:red ">hello world</div>说明：其实这种方式很少使用，它的有点是方便直观，但是不能重复使用
（2）内嵌式：就是在<head>标签中加入<style>标签，在其中编写代码，这种方式的应用范围更广一些
示例代码：
<!-- 内嵌式 -->
<style>
div{
width: 500px;
height:100px;
background:fuchsia;
}
</style>说明：这种方式在同一个html页面中方便复用和后期更改，但是在多个页面之间的重用性并不高。
（3）外链式：就是将css的代码单独放在一个.css文件中，使用的时候在<head>标签中使用<link>命令导入过来
示例代码:
首先创建一个.css文件，在其中使用选择器{样式规则}创建好一个css样式，然后通过以下方式在<head>标签中导入
<!-- 外链式 -->
<link rel="stylesheet" href="./my.css">
说明：这种外链式使css和html分离，便于规划和管理，可重复利用效率高。这种方式经常使用
4. CSS选择器
（1）CSS选择器的定义
CSS选择器是用来查找选择标签的，然后对查找出来的标签进行加提前设置好的样式
（2）CSS选择器的种类
- 标签选择器
- 类选择器
- 伪类选择器
- 层级选择器
- id选择器
- 组选择器
接下来我们来分别讲解一下各个选择器：
（3）标签选择器的使用
根据标签来选择标签，以标签开头，此种选择器影响范围大，一般用来做一些通用设置。
示例代码：
<style type="text/css">
p{
font-size:10px;
color: red;
}
</style>
<div>hello world</div>
<p>hello 123 world </p>说明：因为选择器名字为标签p，所以只会对<p>标签中的hello 123 world内容加样式，而<div>中的内容不会变
（4）类选择器的使用
根据类名来选择标签，以 . 开头, 一个类选择器可应用于多个标签上，一个标签上也可以使用多个类选择器，多个类选择器需要使用空格分割，应用灵活，可复用，是css中应用最多的一种选择器。
示例代码：
<style type="text/css">
.blue{color:blue}
.big{font-size:20px}
.box{width:100px;height:100px;background:gold}
</style>
<div class="blue">这是一个div区块</div>
<h3 class="blue big box">这是一个h3标题</h3>
<p class="blue box">这是一个段落</p>说明：首先定义了三个类选择器，然后在各个标签中加上了属性class，所以在<div>标签中只会加上.blue类的样式，在<h3>标签中会有.blue .big .box 三个类的样式，在<p>标签中会有.blue .box类中的样式。
（5）伪类选择器的使用
用于向选择器添加特殊的效果, 以 : 分割开, 当用户和网站交互的时候改变显示效果可以使用伪类选择器
示例代码：
<style type="text/css">
.box1{width:100px;height:100px;background:gold;}
.box1:hover{width:300px;}
</style>
<div class="box1">这是第一个div</div>说明：这种方式多用于与用户交互的时候使用，首先类选择器将<div>标签中的内容加了样式，而设置伪类选择器之后会将<div>标签中的内容进行交互，即当用户将鼠标放在“这是第一个”文字上的时候，会显示出伪类选择器设定的样式。鼠标不放上面的时候只会显示类选择器的样式。
（6）层级选择器（后代选择器）的使用
根据层级关系选择后代标签，以选择器1 选择器2开头，主要应用在标签嵌套的结构中，减少命名。
示例代码：
<style type="text/css">
div p{
color: red;
}
</style>
<div>
<p>hello</p>
<span> 这是其他的hello </span>
</div>
<p>这是另一个hello</p>说明：结果会将hello变为字体为红色，而嵌套在<div>标签中的其他标签不会发生改变。结果是：hello变为红色。其他不变。
注意：这个层级关系不一定是父子，也有可能是祖孙关系。就是说只要是有层级关系就适用于这个层级选择器。
（7）id选择器的使用
根据id选择标签，以#开头, 元素的id名称不能重复，所以id选择器只能对应于页面上一个元素，不能复用，id名一般给程序使用，所以不推荐使用id作为选择器。
示例代码：
<style type="text/css">
#box{color:red}
</style>
<p id="box">这是一个段落标签</p> <!-- 对应以上一条样式，其它元素不允许应用此样式 -->
<p>这是第二个段落标签</p> <!-- 无法应用以上样式，每个标签只能有唯一的id名 -->
<p>这是第三个段落标签</p> <!-- 无法应用以上样式，每个标签只能有唯一的id名 -->
说明：会将<p>标签中设置id="box"的这个标签内容改为红色，其他标签均不变。
注意点: 虽然给其它标签设置id=“box”也可以设置样式，但是不推荐这样做，因为id是唯一的，以后js通过id只能获取一个唯一的标签对象。
（8）组选择器的使用
根据组合的选择器选择不同的标签，以 , 分割开, 如果有公共的样式设置，可以使用组选择器。
示例代码：
<style type="text/css">
.box1,.box2,.box3{width:100px;height:100px}
.box1{background:red}
.box2{background:pink}
.box2{background:gold}
</style>
<div class="box1">这是第一个div</div>
<div class="box2">这是第二个div</div>
<div class="box3">这是第三个div</div>说明：最开始是分别将box1，box2，box3类分别设置了各自的样式，然后通过组选择器，将box1，box2，box3共同设置了相同的样式。
八、CSS属性介绍
之前使用了那么多css的属性，肯定有很多小伙伴还是有一点蒙的状态，不过不要紧，接下来我把CSS的属性归类介绍给大家。（其实不要看着很多，理解了英文单词的含义和略有变动的格式，还是很好记的）
1. 布局常用样式属性
- width 设置元素(标签)的宽度，如：width:100px;
- height 设置元素(标签)的高度，如：height:200px;
- background 设置元素背景色或者背景图片，如：background:gold; 设置元素的背景色, background: url(images/logo.png); 设置元素的背景图片。
- border 设置元素四周的边框，如：border:1px solid black; 设置元素四周边框是1像素宽的黑色实线
- 以上也可以拆分成四个边的写法，分别设置四个边的：
- border-top 设置顶边边框，如：border-top:10px solid red;
- border-left 设置左边边框，如：border-left:10px solid blue;
- border-right 设置右边边框，如：border-right:10px solid green;
- border-bottom 设置底边边框，如：border-bottom:10px solid pink;
- padding 设置元素包含的内容和元素边框的距离，也叫内边距，如padding:20px;padding是同时设置4个边的，也可以像border一样拆分成分别设置四个边:padding-top、padding-left、padding-right、padding-bottom。
- margin 设置元素和外界的距离，也叫外边距，如margin:20px;margin是同时设置4个边的，也可以像border一样拆分成分别设置四个边:margin-top、margin-left、margin-right、margin-bottom。
2. 文本常用样式属性
- 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
说明：
- 设置不同的样式属性会呈现不同网页的显示效果
- 样式属性的表现形式是: 属性名:属性值;
九、盒子模型
1. 什么是盒子模型呢？
所谓的盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，矩形盒子由内容（content）、内边距（padding)、边框（border）、外边距（margin）四个部分组成。
2. 盒子模型的示意图如下：
3. 盒子模型的相关样式属性
- 盒子中内容的宽度(width)，不是盒子的宽度奥！！
- 盒子中内容的高度(height)，不是盒子的高度奥！！
- 盒子的边框（border）就是挨着内容的边框的厚度
- 盒子内的内容和边框之间的间距（padding）
- 盒子与盒子之间的间距（margin）
4. 属性的使用：
（1）设置盒子的宽高，指的是盒子内容的宽高。
width:500px;
height:500px;（2）设置边框（上边框）
border-top:5px solid red;说明:
其中10px表示线框的粗细；solid表示线性；red表示边框的颜色
设置其它三个边的方法和上面一样，把上面的'top'换成'left'就是设置左边，换成'right'就是设置右边，换成'bottom'就是设置底边。
四个边如果设置一样，可以将四个边的设置合并成一句： border:5px solid red;
（3）设置內间距
padding-top:15px; /* 设置顶部內间距为15px */
padding-left:10px; /* 设置左边內间距为10px */
padding-right:20px; /* 设置右边內间距为20px */
padding-bottom:30px; /* 设置底部內间距为15px */上面的设置可以简写如下：
padding：20px 40px 50px 30px; /* 四个值按照顺时针方向，分别设置的是 上 右 下 左
四个方向的内边距值。 */padding后面还可以跟3个值，2个值和1个值，它们分别设置的项目如下：
padding：20px 40px 50px; /* 设置顶部内边距为20px，左右内边距为40px，底部内边距为50px */
padding：20px 40px; /* 设置上下内边距为20px，左右内边距为40px*/
padding：20px; /* 设置四边内边距为20px */
（5）设置外间距margin
外边距的设置方法和padding的设置方法相同，将上面设置项中的'padding'换成'margin'就是外边距设置方法。
盒子的真实尺寸
盒子的width和height值固定时，如果盒子增加border和padding，盒子整体的尺寸会变大，所以盒子的真实尺寸为：
- 盒子宽度 = width + padding左右 + border左右
- 盒子高度 = height + padding上下 + border上下
扫一扫
715
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
