这点前端知识要是学不会,那你就学不完兜着学!!!

刺骨的言语ヽ痛彻心扉 2023-03-12 10:59 15阅读 0赞

--------------------

HTML: 用于开发网页的一门技术

CSS: 用于修饰、渲染网页的一门技术

HTML+CSS可以开发一个非常美观、非常漂亮的网页

开发网页 盖房子

HTML标签搭建网页的结构 砖块(搭建房子的结构)

CSS属性 石灰、油漆等涂料

--------------------

### 【目录】 ###

*  一、HTML概述
 *  二、HTML标签
 *  三、注册表单案例
 *  四、CSS概述
 *  五、CSS选择器
 *  六、常用属性总结
 *  七、网页开发实战
 *  八、扩展

--------------------

## 一、HTML概述 ##

--------------------

#### 1、HTML是什么 ####

HTML(Hyper Text Markup Language): 超文本标记语言

超文本: 超级文本、超过文本（其中可以包含除了文本以外的其他数据，例如图片、音频、视频等各种格式）

标记：也叫标签、元素、节点等，就是用尖括号(<>)括起来的一组内容，例如：

<head> <body> <div> <span> <table>等

HTML是最基础的开发网页的语言。

HTML由W3C组织提供(CSS/xml)

关于HTML的细节:

*  (1)使用HTML开发的网页文件通常以 .htm或.html 为后缀!
 *  (2)使用HTML开发的网页文件由浏览器负责解析并显示（浏览器就是一个html解析器）
 *  (3)HTML是文档的一种(txt/word/ppt/pdf等)

总结: HTML就是用于开发网页的一门语言!!

#### 2、HTML的结构 ####

*  **2.1 案例：编写我的第一个HTML网页，并用浏览器打开**  
    新建一个txt文档，将后缀名改为.html，代码实现如下：

<!DOCTYPE html>
    <html>
    	<head>
    		<title>网页的标题</title>
    	</head>
    	<body>
    		Hello ...
    	</body>		
    </html>

*  **2.2 HTML结构详解**
 *  `<!DOCTYPE HTML>` 文档声明, 用来声明HTML文档所遵循的HTML规范和版本  
    上面是html5.0的声明, 也是目前最常用的版本
 *  `<head></head>` 头部分, 用来存放HTML文档的基本属性信息, 比如网页的标题, 文档使用的编码等, 这部分信息会被浏览器优先加载.
 *  `<body></body>` 体部分, 用来存放网页可视化数据. 即真正的网页数据
 *  `<title></title>` 声明网页的标题
 *  `<meta charset="utf-8"/>`用来通知浏览器使用哪一个编码来打开HTML文档, 这个编码一定要和文件保存时的编码保持一致, 才不会出现中文乱码问题.

#### 3、HTML语法(了解) ####

*  **3.1 html标签**

标签：也叫做标记、元素等，标签分为开始标签，例如：

和结束标签，例如:

</head>、</body>

开始标签和结束标签之间还可以包含其他内容。

有些标签开始标签和结束标签之间没有内容要包裹，通常可以写成自闭标签，例如：

*  **3.2 html属性**

在标签上可以声明属性(属性不能独立存在,必须声明在标签上)

标签上可以声明多个属性，多个属性之间用空格分隔

标签上的属性的值可以使用单引号或者双引号引起来

*  **3.3 html注释**

格式:``

注释的作用:

*  (1)为代码添加解释说明
 *  (2)将一些暂时不需要执行的代码注释

浏览器对于注释中的内容不会解析，也不会显示！

*  **3.4 html空格和换行**

在浏览器中，多个连续的空白字符（空格、制表符tab、换行）会被浏览器显示为一个空格。那么：

如何在网页中做一个换行：可以使用 `<br/>` 标签做换行

如何在网页中做一个空格：可以使用` `或` `做空格

补充: HTML中是不区分大小写的！

HTML中对语法要求非常不严格！（比如大小写混用，或者标签只有开始没有结束，或者标签的不合理嵌套），但是我们在书写HTML时要按照规范来写。

--------------------

## 二、HTML标签 ##

--------------------

#### 1、图像标签 ####

通过img标签可以在网页中插入一副图像

其中：

*  `src`：属性用于指定图片的路径
 *  `width`：属性用于指定图片的宽度
 *  `height`：属性用于指定图片的高度

#### 2、超链接标签 ####

超链接就是a标签，通过a标签可以在网页中创建指向另外一个文档的超链接

点击超链接可以跳转到另外一个网页(图片/下载路径等)，示例:

<a href="01-第一个网页.html">01-第一个网页.html</a>
    
    <a href="http://www.baidu.com">百度一下，你就不知道</a>
    <br/>
    
    <a target="_blank" href="http://www.tmooc.cn">
    <img alt="tmooc" src="imgs/tmooc.png" />
    </a>

其中：

*  `href`：属性用于指定点击超链接后将要跳转到的URL地址
 *  `target`：属性用于指定以何种方式打开超链接
 *  `_self`：默认值, 表示在当前窗口中打开超链接
 *  `_blank`：表示在新的窗口中打开超链接

#### 3、表格标签 ####

*  **3.1 案例：在网页中插入一个3\*3的表格**

<h1>案例：在网页中插入一个3*3的表格</h1>
    <table>
        <tr>
            <th>表头1</th>
            <th>表头2</th>
            <th>表头3</th>
        </tr>
        <tr>
            <td>11</td>
            <td>12</td>
            <td>13</td>
        </tr>
        <tr>
            <td>21</td>
            <td>22</td>
            <td>23</td>
        </tr>
        <tr>
            <td>31</td>
            <td>32</td>
            <td>33</td>
        </tr>
    </table>

*  **在浏览器中显示效果如下：**

![在这里插入图片描述][20200511220444680.png_pic_center]

*  **在head标签内添加如下内容：**

*  **再次刷新浏览器显示效果为：**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70_pic_center]

*  **3.2 表格标签介绍**

table -- 用于在网页中定义一个表格
    tr -- 用于定义表格中的行
    td -- 用于定义表格中的单元格
    th -- 用于定义表头行中的单元格（th中的文本默认居中，并且加粗）

*  **3.3 练习：使用表格标签在网页中生成一个表格，如下图：**

要求如下:

(1) 表格内容如下图, 并设置表格边框
    (2) 设置单元格之间没有缝隙, 并设置单元格边框和内容之间的距离为5px
    (3) 设置表格的背景颜色为pink, 并设置表格的宽度为70%
    (4) 设置表格在网页中居中显示, 并为表格添加表头以及标题

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70_pic_center 1]

#### 4、表单标签 ####

*  **4.1 表单的作用: 用于向服务器提交数据**

向服务器提交数据的两种方式：

*  **(1)通过表单向服务器提交数据**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70_pic_center 2]

表单中可以包含表单项标签，在表单项中可以填写数据（比如用户名、密码等），填写完成后通过提交表单，可以将表单中的数据提交给相应的服务器。

*  **(2)通过超链接向服务器提交数据**

http://www.baidu.com?username=张三&pwd=123&like=篮球

在地址栏URL地址的后面通过问号(?)可以拼接参数，参数可以有多个，多个参数之间用`&`分隔，参数还分为参数名（例如：username/pwd/like）以及参数值(例如:张三/123/篮球)，在回车后访问百度服务器的同时，就可以将问号后面拼接的参数一并带给百度服务器。

*  **4.2 表单标签**

其中action属性用于**指定表单的提交地址，** 例如，将action指向百度服务器，就意味着将来填写完表单后，提交表单将会把表单中的数据提交给百度服务器。

method=“GET/POST” 属性是用于**指定表单的提交方式**，常用的就是GET和POST提交。

#### 5、表单项标签 ####

*  **5.1 `input`元素：**
 *  (1) 普通文本输入框(比如:用户名/昵称/邮箱/验证码等)

*  (2) 密码输入框(比如:密码/确认密码等)

*  (3) 单选框(比如:性别/部门等)

<input type="radio" name="gender"/>男

*  (4)复选框/多选框(比如:爱好/岗位等)

*  (5) 普通按钮(比如:换一张图片)

普通按钮本身没有功能,但我们可以通过js为按钮添加功能或添加行为

*  (6) 提交按钮(比如:提交/注册/登录)

提交按钮用于提交表单中的数据到服务器中!

*  **5.2 `select、option`标签：**

> `select`用于定义一个下拉选框  
> `option`用于定义下拉选框上的选项  
> `selected`设置当前option选项默认被选中

*  **5.3 `textarea`多行文本输入区域：**

> `cols`属性: 用于设置文本输入框的列数(宽度)
> 
> `rows`属性: 用于设置文本输入框的行数(高度)
> 
> `placeholder`属性: 设置输入框中的提示消息!

#### 6、表单细节问题 ####

*  **6.1 提交表单时，表单中的数据为什么没有被提交？**

对于表单中的表单项标签，只要是需要向服务器提交数据，该表单项上必须添加name属性；如果表单项标签上没有name属性，在表单提交时，该项将会别忽略。例如：

*  **6.2 如何让多个单选框只能有一个被选中？**

要求多个单选框必须具有相同的name属性值，如果多个单选框name属性值相同，则说明是一个组的内容，一个组中的单选框只能选择其中的一个！

*  **6.3 为什么单选框、复选框选择某一项后提交的值都是on?**

因为单选框、复选框只能选择，不同于用户名、密码输入框，可以输入内容。

因此我们需要通过value属性为单选框或复选框设置提交的值(如果不设置默认值都是on)，例如：

<input type="radio" name="gender" value="male"/>男
    <input type="radio" name="gender" value="female"/>女

*  **6.4 如何设置单选框或复选框默认选中某一项?**

可以在单选框或复选框标签上添加一个checked="checked"属性，就可以让当前单选框或复选框默认被选中。例如：

<input type="radio" checked="checked" name="gender" value="male"/>男
    <input type="radio" name="gender" value="female"/>女
    
    <input type="checkbox" name="like" value="basketball"/>篮球
    <input type="checkbox" checked="checked" name="like" value="football"/>足球
    <input type="checkbox" name="like" value="volleyball"/>排球

*  **6.5 如何设置下拉选框默认选中某一项?**

在option标签上添加一个selected="selected"属性，可以让当前option选项默认被选中，例：

*  **6.6 下拉选框中option选项上的value属性的作用是什么？**

如果某一个选项被选中，并且该选项上添加了value属性，在提交表单时，将会提交value属性的值。

如果某一个选项被选中，该选项上没有添加value属性，在提交表单时，将会提交标签中的内容

--------------------

## 三、注册表单案例 ##

--------------------

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <style> /* style标签内只能书写css注释和css代码 */ table { border: 2px solid red; /* 为表格添加边框 */ border-collapse: collapse; /* 设置边框合并 */ background-color: lightgrey; /* 为表格设置背景颜色 */ /* margin-left: 15%; */ /* 设置表格的左外边距和右外边距自适应(保证两者始终相等) */ margin-left: auto; margin-right: auto; } td, th { border: 2px solid red; /* 为单元格添加边框 */ border-collapse: collapse; /* 设置边框合并 */ padding: 5px; /* 设置单元格边框和内容的距离(内边距) */ } h1 { /* border: 2px solid blue; */ text-align: center; /* 设置元素中的内容水平居中 */ } </style>
    </head>
    <body>
    	<h1>欢迎注册</h1>
    	<form action="#">
    		<table>
    			<tr>
    				
    				<td>用户名:</td>
    				<td><input type="text" name="username" /></td>
    			</tr>
    			<tr>
    				
    				<td>密码:</td>
    				<td><input type="password" name="pwd" /></td>
    			</tr>
    			<tr>
    				
    				<td>性别:</td>
    				<td><input type="radio" checked="checked" name="gender" value="male" />男 <input type="radio" name="gender" value="female" />女
    				</td>
    			</tr>
    			<tr>
    				
    				<td>爱好:</td>
    				<td><input type="checkbox" name="like" value="basketball" />篮球
    					<input type="checkbox" checked="checked" name="like" value="football" />足球 <input type="checkbox" name="like" value="volleyball" />排球</td>
    			</tr>
    			<tr>
    				
    				<td>城市:</td>
    				<td><select name="city">
    						<option value="beijing">北京</option>
    						<option value="shanghai">上海</option>
    						<option selected="selected">广州</option>
    						<option>深圳</option>
    				</select></td>
    			</tr>
    			<tr>
    				
    				<td>自我描述:</td>
    				<td><textarea name="description" cols="30" rows="5" placeholder="请输入描述信息..."></textarea></td>
    			</tr>
    			<tr>
    				
    				
    				<td colspan="2" style="text-align: center;"><input type="submit" value="提交" /></td>
    			</tr>
    		</table>
    	</form>
    </body>
    </html>

--------------------

## 四、CSS概述 ##

--------------------

#### 1、什么是CSS？(了解) ####

CSS: 层叠样式表，用于修饰、渲染网页的一门技术

使用css样式修饰网页，可以实现将设置样式的css代码和展示数据的html代码进行分离，增强了网页的展示能力！

#### 2、在HTML中引入CSS ####

*  **方式1：通过style属性引入css（不推荐）**

<div style="border:2px solid red;font-size:26px;background:pink;">这是一个div...</div>

由于上面这种方式是将css属性代码，直接写在标签上的style属性内部，如果属性太多，容易造成页面结构的混乱，不利于后期的维护。

并且将样式代码写在标签上，样式代码只对当前标签生效，代码无法复用！

因此不推荐使用这种方式！（这种通过style属性添加的样式，叫做**行内样式/内联样式**）

*  **方式2：通过style标签引入css**

在head标签内部可以添加一个**style标签**，在style标签内部可以直接书写css样式

这种方式是将所有的css属性代码集中在一个style标签内部统一管理，这种方式不会造成页面结构的混乱，并且可以实现代码的复用！

代码示例 ：

<head>
    <meta charset="utf-8" />
    <style type="text/css"> /* ****** CSS样式 ****** */ span{ /* 为当前html中的所有span标签设置样式 */ border:2px solid green; font-size:30px; font-weight:bolder; /* bold/bolder */ } </style>
    </head>

*  **方式3：通过link链接引入外部的css文件**

在head标签内部，通过一个\*\*`link`标签可以引入外部的CSS文件\*\*

这种方式是将所有的css代码集中在一个单独的css文件中统一管理，真正的实现了将css代码和html代码的分离，实现了代码的复用。

代码示例：html中引入demo.css文件

<link rel="stylesheet" href="demo.css" />

demo.css文件

@charset "UTF-8";
    p{ 
    	border: 2px solid blue;
    	color: red;
    	font-family: 华文琥珀;
    	text-indent: 50px;
    }

--------------------

## 五、CSS选择器 ##

--------------------

所谓的选择器就是能够在html中帮助我们选中元素进行修饰的一门技术。

#### 1、标签名选择器 ####

通过元素名称(或标签名称)选中指定名称的所有标签

格式: **元素名/标签名\{ css样式… \}**

/* ----- 1.标签名选择器练习 ----- 将所有span标签的背景颜色设置为#efbdef, 设置字体大小为22px，字体加粗；*/
    span{  /* 选中所有的span元素 */
    	background-color:#efbdef; 
    	font-size: 22px;
    	font-weight: bolder;
    }

#### 2、class选择器 ####

可以为元素添加一个通用的属性 – class，通过class属性为元素设置所属的组，class值相同的元素则为一组。通过class值可以选中这一组的元素，为元素添加样式。

格式：**.class值\{ css样式… \}**

实例:

/* ----- 2.类选择器练习 ----- (1)将所有的span（但是不包括div和p标签下的span）的背景颜色设置为#faf77b，边框改为2px solid cyan； (2)将div下的span和内容为"span111"的span，背景颜色设置为#5eff1e、字体颜色设置 #ec0e7e；*/
    .s1{  /* 选中所有class值为s1的元素 */
    	background: #faf77b;
    	border: 2px solid cyan;
    }
    .s2{  /* 选中所有class值为s2的元素 */
    	background: #5eff1e;
    	color: #ec0e7e;
    }

另外，一个元素也可以设置多个class值，多个class值中间用空格分隔，例如：

表示当前元素同时属于多个分组，多个分组上设置的样式也会同时作用在当前元素上。

如果多个分组设置了相同的样式（但是值不一样），样式会发生冲突，写在后面的样式会覆盖前面的样式！

#### 3、id选择器 ####

通过标签上通用的属性id，可以为标签设置一个独一无二的编号（id值应该是唯一的），通过id值可以唯一的选中一个元素。

格式：**\#id值\{ css样式 \}**

/* ----- 3.id选择器练习 ----- 用id选择器将第一个p标签设置字体大小为24px，字体颜色为#a06649, 首行文本缩进20px。*/
    #p1{  /* 选中id值为p1的元素 */
    	font-size:24px;
    	color: #a06649;
    	text-indent: 20px;
    }

#### 4、后代选择器 ####

选中指定元素内部的指定后代元素

格式: **祖先 后代\{ css样式… \}**

/* ----- 4.后代选择器练习 ----- 为p元素内部的所有span元素，设置字体大小为18px,字体颜色为红色,背景颜色为pink;*/
    p span{  /* 匹配所有p元素内部的所有span元素 */
    	font-size:18px;
    	color: red;
    	background: pink;
    }
    /* p,span{} 匹配所有的p元素和所有的span元素 */

#### 5、属性选择器 ####

在选择器选中元素的基础上，根据元素的属性条件筛选/过滤元素

格式：**选择器\[属性条件\]…\{ css样式 \}**

/* ----- 5.属性选择器 ----- 为所有的文本输入框，设置背景颜色为#FF7CCC、字体大小22px，首行文本缩进15px；*/
    input[type='text']{  /* 匹配所有的input并且type值为text的元素 */
    	background: #FF7CCC;
    	font-size: 22px;
    	text-indent: 15px;
    }
    input[type='text'][name='email']{  
    	/* 选中所有的input并且type值为text、并且name为email的元素 */
    	background : yellow;
    }

--------------------

## 六、常用属性总结 ##

--------------------

#### 1、文本属性 ####

*  **1.1 `text-align`：设置元素中文本水平对齐方式，其常用取值为:**

left: 默认值。左对齐
    right: 右对齐
    center: 居中对齐
    justify: 两端对齐

*  **1.2 `text-decoration`：设置文本的下划线样式，其常用取值为:**

underline: 有下划线
    none: 没有下划线

*  **1.3 `text-indent`：设置文本首行缩进，单位: 像素/百分比**
 *  **1.4 `letter-spacing`：设置字符间隔/间距，其常用取值为:**

normal
    像素值

**+ 1.5 `text-shadow`：设置字体阴影，其取值为:**

像素值 像素值 像素值 颜色值
    第一个值为阴影水平位移，第二个值为阴影垂直位移，第三个值为阴影扩散值，第四个值为阴影颜色

#### 2、字体属性 ####

*  `font-size`：设置字体大小
 *  `font-weight`：设置字体粗细 bold、bolder、normal 100/200/300…/900
 *  `font-family`：设置字体，比如微软雅黑、黑体、楷体等
 *  `color`：设置字体颜色

#### 3、背景属性 ####

*  `background-color`：设置背景颜色
 *  `background-image`：设置背景图片，url(‘图片的路径’);
 *  `background-repeat`：设置或检索对象的背景图像是否及如何铺排，常用取值：

repeat(默认值,重复排列)
    repeat-x(横向重复排列,但纵向不重复)
    repaet-y(纵向重复排列,但横向不重复)
    no-repeat(不重复)

*  `background-position`：设置或检索对象的背景图像位置
 *  `background`: 背景颜色 背景图片 背景图片是否重复 背景图片的位置

#### 4、边框（border） ####

border:2px solid red; – 设置元素的边框(可以同时设置边框的宽度、样式、颜色)

border属性可以拆分为如下设置:

border-width: 2px; -- 设置元素边框的宽度
    border-style: solid; -- 设置元素边框的样式
    border-color: red; -- 设置元素边框的颜色

其中border-width、border-style、border-color也可以按照上右下左方向进行拆分，以border-width为例：

border-top-width: 2px; -- 设置上边框的宽度
    border-left-width: 2px; -- 设置左边框的宽度
    border-right-width: 2px; -- 设置右边框的宽度
    border-bottom-width: 2px; -- 设置下边框的宽度

#### 5、其他属性 ####

*  width：设置元素的宽度
 *  height：设置元素的高

#### 6、补充: 颜色设置 ####

颜色取值方式常见的方式有三种:

*  **方式一：设置颜色名**

red、green、blue、yellow、cyan、pink、white、black等

*  **方式二：设置\#加上六位的十六进制数值**

#FF0000（red）、#00FF00（green）、#0000FF（blue）、#FFFF00（yellow）、#00FFFF（cyan）等

*  **方式三：设置rgb颜色值**

rgb(255,0,0) 、rgb(0,255,0) 、rgb(0,0,255) 、rgb(255,255,0) 、rgb(0,255,255) 等
    （red） （green） （blue） （yellow） （cyan）

--------------------

## 七、网页开发实战 ##

##  ##

--------------------

*  完成JT项目中的注册页面!

**参考代码：**

*  这是HTML页面代码！！！

<!DOCTYPE html>
    <html>
    <head>
    	<meta charset="UTF-8">
    	<link rel="stylesheet" href="regist.css">
    	<title>欢迎注册京淘页面</title>
    </head>
    <body>
    	
    	<div id="header">
    		<div id ="line1">
    			<img alt="" src="./imgs/logo_jt.jpg" />
    			<span class="line"></span>
    			<span class="wel-reg">欢迎注册</span>
    		</div>
    		<div id="line2">
    			<span>已有账号?</span>
    			<a href="#">请登录</a>			
    		</div>
    	</div>
    	
    	
    	<div id="middle">
    		<form action="#">
    			<table>
    				<tr>
    					<td>
    						
    						<input type="text" name="username" placeholder="用户名">
    					</td>
    				</tr>
    				<tr>
    					<td class="msg">
    						
    						支持中文、字母、数字、“-”、“_”的组合，4-20个字符
    					</td>
    				</tr>
    				<tr>
    					<td>
    						
    						<input type="password" name="pwd" placeholder="设置密码">
    					</td>
    				</tr>
    				<tr>
    					<td class="msg">
    						建议使用数字、字母和符号两种以上的组合，6-20个字符
    					</td>
    				</tr>
    				<tr>
    					<td>
    						
    						<input type="password" name="repwd" placeholder="确认密码">
    					</td>
    				</tr>
    				<tr>
    					<td class="msg err-msg">
    						两次密码输入不一致
    					</td>
    				</tr>
    				<tr>
    					<td class="ck-phone">
    						<input type="text" name="phone" placeholder="验证手机"/>
    						 <span>或</span> 
    						<a href="#">验证邮箱</a>
    					</td>
    				</tr>
    				<tr>
    					<td class="protocol">
    						<span>我已阅读并同意 </span>
    						<a href="#">《京淘用户注册协议》</a>
    					</td>
    				</tr>
    				<tr>
    					<td>
    						<input type="submit" value="立即注册"/>
    					</td>
    				</tr>
    			</table>
    		</form>
    		<img src="imgs/msg.jpg">
    	</div>
    	
    	<div id="footer">
    		<p>
    			关于我们 | 联系我们 | 人才招聘 | 商家入驻 | 营销中心 | 手机京淘 | 友情连接 | 销售联盟 | 京淘社区 | 京淘公益 | English Site
    			<br/>
    			Copyright © 2015 - 2019 京淘jingtao.com 版权所有
    		</p>
    	</div>
    </body>
    </html>

*  这是CSS代码！！！

@charset "UTF-8";
    
    *{ 
    	margin:0;
    	padding:0;
    }
    /* 头部 */
    #header{ 
    	width:1200px;
    	height:114px;
    	margin:0 auto;
    	margin-top:41px;
    }
    /*第一行*/
    #line1{ 
    	height:72px;
    }
    #line1 img{ /* logo */
    	margin-left:50px;
    	margin-right:33px;
    	vertical-align:middle;
    }
    #line1 .line{ /* 竖线 */
    	border:2px solid #676767;
    	display:inline-block;
    	height:68px; 
    	background:#676767;
    	vertical-align:middle;
    }
    #line1 .wel-reg{ 
    	font-size:36px;
    	color:#676767;
    	vertical-align:middle;
    }
    /*第二行*/
    #line2{ 
    	height:42px;
    	text-align: right;
    	font-size: 24px;
    	margin-right: 20px;		
    }
    #line2 span{ 
    	color:#999;
    }
    #line2 a{ 
    	color:#333;
    	font-size: 20px;
    	text-decoration: none;
    }
    
    /*主体*/
    #middle{ 
    	width:1200px;
    	height:500px;
    	margin:0 auto;
    	border: 7px solid #d0d0d0;
    	border-top-width:10px;
    	border-bottom-width:10px;
    	padding-top: 75px;
    }
    /*主体中的表单*/
    #middle form{ 
    	width: 819px;
    	margin-left: 109px;
    	display: inline-block;
    }
    /*主体中的图片*/
    #middle img{ 
    	/*让当前元素和行内最高元素的顶端对齐*/
    	vertical-align: top;
    }
    /*匹配表单中所有input元素(文本输入框/密码/按钮等)*/
    #middle form table input{ 
    	width: 381px;
    	height: 50px;
    	font-size: 16px;
    	color: #999;
    	border: 1px solid #d0d0d0;
    	text-indent: 45px;
    }
    /*输入框*/
    #middle form table input[name='username']{ 
    	background: url(imgs/u_ico.jpg) no-repeat;
    	background-position: 15px 15px;
    }
    #middle form table input[name='pwd']{ 
    	background: url(imgs/p_ico.jpg) no-repeat;
    	background-position: 15px 15px;
    }
    #middle form table input[name='repwd']{ 
    	background: url(imgs/p_ico.jpg) no-repeat;
    	background-position: 15px 15px;
    }
    #middle form table input[name='phone']{ 
    	background: url(imgs/phone_ico.jpg) no-repeat;
    	background-position: 15px 15px;
    }
    
    /*输入框底下的字*/
    .msg{ 
    	height: 32px;
    	font-size: 12px;
    	text-indent: 45px;
    	color: #c3c3c3;
    	background: url(imgs/alert_1.jpg) no-repeat 17px 7px;
    }
    /*错误提示消息*/
    #middle form table .err-msg{ 
    	color: #e64346;
    	background: url(imgs/alert_2.jpg) no-repeat 17px 7px;
    }
    #middle form table .ck-phone span{ 
    	font-size: 16px;
    }
    
    #middle form table .ck-phone a{ 
    	font-size: 16px;
    	color: #005ea7;
    }
    
    /*同意注册协议*/
    #middle form table .protocol { 
    	height: 83px;
    	font-size: 16px;
    	line-height: 52px;
    	text-indent: 60px;
    }
    #middle form table .protocol a { 
    	color: #005ea7;
    	text-decoration: none;
    }
    
    /*提交按钮*/
    #middle form table input[type = 'submit'] { 
    	background-color: #e64346;
    	color: #fff;
    	font-size: 20px;
    	text-indent: 0px;
    }
    
    /*尾部*/
    #footer{ 
    	width:1200px;
    	margin:0 auto;
    	margin-top:109px;
    }
    #footer p{ 
    	font-size: 14px;
    	color: #999;
    	line-height: 34px;
    	text-align: center;
    }

--------------------

## 八、扩展内容 ##

##  ##

--------------------

#### 1、display属性 ####

display用来设置元素的类型，常用取值：

*  `block`：块级元素的默认值  
    默认情况下独占一行  
    可以设置宽高
 *  `inline`：行内元素的默认值  
    默认情况下多个行内元素可以处在同一行  
    一般不能设置宽高
 *  `inline-block`：行内块元素  
    多个元素既可以显示在同一行, 也可以设置宽和高
 *  `none`：表示隐藏元素

#### 2、元素类型(了解) ####

*  `div/span/p`：都是一个容器标签，用于包裹其他内容（这些元素本身不具备太多的样式！）
 *  `p`：块级元素，默认独占一行，用于包裹一段文本（写文章时用于p标签包裹每一段内容）
 *  `div`：块级元素，默认独占一行，用于包裹其他内容，将样式设置在div上，就可以作用在div的内容上。
 *  `span`：行内元素，默认可以和其他元素显示在同一行。

##### ☆☆☆ 块级元素（block） #####

*  默认情况下，块级元素**独占一行**
 *  可以设置宽和高，如果设置了就是设置的宽和高
 *  如果不设置宽和高，其中宽是默认填满父元素，而高是由内容决定(由内容支撑)
 *  比如: div/p/h1~h6/form/table 等元素都是块级元素

##### ☆☆☆ 行内元素（inline） #####

*  默认情况下，**多个行内元素可以处在同一行**
 *  不能设置宽和高
 *  比如: span/input/img/i/b 等元素都是行内元素

##### ☆☆☆ 行内块元素（inline-block） #####

*  既具备行内元素的特征(可以同行显示)，还具备块级元素的特征(可以设置宽和高)

> 本次分享就这么多啦,下篇分享JavaScript的内容;  
> 相对于java整体的学习来说,HTML+CSS是兔八哥认为最简单的内容了;  
> 希望各位都仔细研读,早日掌握企业级开发能用到的东西,找到心仪的工作!  
> 让我们一起期待兔八哥的新分享吧.  
> ヾ(◍°∇°◍)ﾉﾞ

![在这里插入图片描述][202005112244323.gif_pic_center]

[20200511220444680.png_pic_center]: /images/20230312/63bb8c45b25542ac9a0aa75756542a9a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20230312/a1fb652ec7d54ee5b81d8fab6d230528.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20230312/082cfa8444b64fb4b3e8bdfa7b416c53.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20230312/45b7613bb4094398976498dc649375f8.png
[202005112244323.gif_pic_center]: /images/20230312/a3b621c07cfb49a29ad6bed4033bfdc3.png