思维导图

day01-HTML概述

1.1?HTML是什么

HTML：超文本标记语言，是最基础的开发网页的一门语言。

W3C组织

HTML是一门标记语言，不是一门编程语言。

HTML是通过标记（标签、元素）来组织网页结构的。

HTML本质上是一个文档。

????txt、doc、pdf。。。

???

1.2?HTML结构

1.2.1????案例：使用html编写我的第一个网页。

1.2.2????HTML的结构介绍

1.<!DOCTYPE HTML>:?用来指定当前HTML文档所遵循的HTML规范,?该声明是html5.0的声明.

2.<head>:?用来存放网页的基本属性信息,?比如网页的标题,?网页在被打开时使用的编码等. head里面的内容需要优先被浏览器加载.

3.<body>:?网页的主体,?用来存放可视的网页内容

4.<title>:?指定网页的标题

5.<meta charset=”utf-8”/>:?指定浏览器使用哪一个编码打开当前HTML页面.?注意:?此处指定的编码一定要和文件保存时的编码一致,?才不会出现乱码问题!

1.3?HTML语法

1.3.1????HTML标记

HTML是一门标记语言,?是通过标记来组织网页结构.?标记也称之为标签.

标签分为开始标签和结束标签.比如: <h1></h1>.

如果标签内部没有内容要修饰,?可以合并成一个自闭标签.?比如:<input/>、<img/>、<br/>、<hr/>、<meta/>等

1.3.2????HTML属性

属性必须要声明在标签上,?属性可以有多个,?多个属性之间用空格隔开,?属性的值可以用单引号或双引号引起来,?或者不用引号.一般都会使用双引号引起来.

1.3.3????空格和换行

在html中,?多个连续的空白字符会被当成一个空格来显示,?所以直接敲回车换行不能在html中进行换行.所以:

如果要做一个换行,?可以用<br/>标签来代替.

如果要做一个空格,?可以用 来代替.

1.3.4????html注释

格式:?

注释不能够交叉嵌套

1.3.5????html和xml的区别

html：超文本标记语言

xml：可扩展标记语言

1.相同点: html和xml都是标记语言,?都是由标记(标签)组成的.

2.不同点:

(1)html是超文本标记语言,?其中的标记都是提供好的,?不能自己定义.

(2)xml是可扩展标记语言,?可以自己定义标签.

(3)html对语法的要求特别的不严格.a)大小写可以混用.b)有时标签没有关闭,?也可能会被正常解析.c)如果出现了交叉嵌套,?有时也能被正常解析.

(4)xml对语法的要求特别的严格.a)严格区分大小写.b)标签必须要关闭才可以.c)标签必须要合理的嵌套,不能出现交叉嵌套.

2???HTML标签

2.1?标题标签

1、示例：

<body>
<!--
标题标签
-->
<h1 align="center">陈子枢有没有去过天上人间...</h1>
<h2>陈子枢有没有去过天上人间...</h2>
<h3>陈子枢有没有去过天上人间...</h3>
<h4>陈子枢有没有去过天上人间...</h4>
<h5>陈子枢有没有去过天上人间...</h5>
<h6>陈子枢有没有去过天上人间...</h6>
</body>

2、属性

align：指定标题内容的排列方式，取值可以为left(居左)、center（居中）、right（居右）

2.2?列表标签

1、示例

<!--
有序列表标签
-->
<ol>
<li>中国</li>
<li>美国</li>
<li>韩国</li>
<li>小日本</li>
</ol>

<!--
无序列表标签
-->
<ul>
<li>北京</li>
<li>上海</li>
<li>广州</li>
<li>深圳</li>
</ul>

2.3?图像标签

1、示例

<!--
图像标签
-->
<img src="imgs/1.jpg" alt="美女~！" width="500px" height="300px"/>

2、属性

(1)src:?指定图像的路径

(2)alt:?指定代替图像显示的文本

(3)width:?指定图像的宽度

(4)height:?指定图像的高度?

2.4?超链接标签

作用1：用于创建指向另外一个文档的超链接，示例：

<!--
超链接标签
-->
<a href="http://www.baidu.com">
百度一下，你就不知道...
</a>
<br/><br/>
<a href="http://www.tmooc.cn" target="_blank">
TMOOC一下，你就不知道...
</a>

作用2：在当前页面的不同位置之间进行跳转（类似于书签功能）

<a name="top"></a>
<h1>白雪公主与七个葫芦娃</h1>
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈<br/>
...
...
<a href="#top">回到顶部</a>

1、属性：

(1)href:?定义将要跳转到的URL地址

(2)target:?定义以何种方式打开超链接，取值

????_blank:?在新的窗口中打开超链接

????_self:?在当前窗口中打开超链接（默认值）

2.5?表格标签

table --?定义一个表格

tr --?定义表格中的行

td --?定义表格中单元格

1、示例

<!--
表格标签：定义一个4行4列的表格
-->
<h3 align="center">表格的标题</h3>
<table border="1" cellspacing="0"
cellpadding="10" bgcolor="pink"
width="70%" align="center">
<tr>
<!-- th用于定义表头 -->
<th>单元格1</th>
<th>单元格2</th>
<th>单元格3</th>
<th>单元格4</th>
</tr>
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
<td>33</td>
<td>34</td>
</tr>
<tr>
<td>41</td>
<td>42</td>
<td>43</td>
<td>44</td>
</tr>
</table>

2、属性

(1)table相关属性

a）border:定义表格的边框

b）cellspacing：定义表格单元格之间的距离

c）cellpadding:?定义表格边框和内容之间的距离

d）bgcolor:?定义背景颜色

e）width:定义表格的宽度

f）align:定义表格排列方式

(2)tr相关属性

a）bgcolor:?定义表格行的背景颜色

b）align:定义表格行内容的排列方式

(3)td相关属性

a）bgcolor:?定义单元格的背景颜色

b）align:定义单元格内容的排列方式

c）width:定义单元格的宽度

d）height:定义单元格的高度

?

e）rowspan:定义单元格竖跨的行数

f）colspan:定义单元格横跨的列数

3、定义不规则的表格

<table border="1" cellspacing="0"
cellpadding="10" bgcolor="yellow"
width="70%" align="center">
<tr>
<!-- 11横跨3列 -->
<td colspan="3">11</td>
<td>14</td>
</tr>
<tr>
<!-- 21竖跨3行 -->
<td rowspan="3">21</td>
<td>22</td>
<td>23</td>
<!-- 24竖跨两行 -->
<td rowspan="2">24</td>
</tr>
<tr>
<td>32</td>
<td>33</td>
</tr>
<tr>
<!-- 42横跨两列 -->
<td colspan="2">42</td>
<td>44</td>
</tr>
</table>

2.6?表单标签

2.6.1????表单作用

表单的作用是负责将表单中的数据发送给服务器

其中向服务器发送数据的方式一共有两种：

1、通过超链接向服务器发送数据

2、通过表单向服务器发送数据

2.6.2????表单标签

1、form标签

<form action="" method="GET/POST"></form>

属性action:用于指定表单的提交地址

属性method:用于指定表单的提交方式，默认为GET提交，其中提交方式一共有7种，只用GET和POST。

?

注意：只有使用表单提交，并且明确的通过method指定提交方式为POST提交，才是POST，其他都是GET提交

2、GET提交和POST提交的区别是什么？

3、案例：使用表单标签和表格标签实现注册表单页面

<!-- 实现注册表单 -->
<form action="#">
<table border="1" bordercolor="red" cellspacing="0" cellpadding="5" align="center" bgcolor="lightgray">
<caption>欢迎注册</caption>
<tr><!-- 用户名 -->
<td>用户名:</td>
<td>
<input type="text" name="username"/>
</td>
</tr>
<tr><!-- 密码 -->
<td>密码:</td>
<td>
<input type="password" name="password1"/>
</td>
</tr>
<tr><!-- 确认密码 -->
<td>确认密码:</td>
<td>
<input type="password" name="password2"/>
</td>
</tr>
<tr><!-- 昵称 -->
<td>昵称:</td>
<td>
<input type="text" name="nickname"/>
</td>
</tr>
<tr><!-- 邮箱 -->
<td>邮箱:</td>
<td>
<input type="text" name="email"/>
</td>
</tr>
<tr><!-- 性别 -->
<td>性别:</td>
<td>
<input type="radio" name="gender" value="man" checked="checked"/>男
<input type="radio" name="gender" value="woman"/>女
</td>
</tr>
<tr><!-- 爱好 -->
<td>爱好:</td>
<td>
<input name="like" value="basketball" type="checkbox" checked="checked"/>篮球
<input name="like" value="football" type="checkbox"/>足球
<input name="like" value="volleyball" type="checkbox"/>排球
</td>
</tr>
<tr><!-- 城市 -->
<td>城市:</td>
<td>
<select name="city">
<option>北京</option>
<option selected=" selected">上海</option>
<option>深圳</option>
</select>
</td>
</tr>
<tr><!-- 头像 -->
<td>头像:</td>
<td>
<input type="file" name="photo"/>
</td>
</tr>
<tr><!-- 验证码 -->
<td>验证码:</td>
<td>
<input type="text" name="valicode"/>
<img src="imgs/vc.jpg" width="80px" height="20px"/>
<input type="button" value="换一张">
</td>
</tr>
<tr>
<td>自我描述:</td>
<td>
<textarea name="description" cols="30" rows="5">请输入描述信息！</textarea>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit"/>
<input type="reset"/>
</td>
</tr>
</table>
</form>

注意：

（1）表单项必须要具有name属性才可以被提交！

<tr>
<td>用户名:</td>            
<td><input type="text" name="username"/></td>
</tr>
<tr>
<td>密码:</td>          
<td><input type="password" name="password1"/></td>
</tr>

（2）单选按钮要实现单选，必须要保证多个单选框的name属性值相同。

<tr><!-- 性别 -->
<td>性别:</td>
<td>
<input type="radio" name="gender" value="man" checked="checked"/>男
<input type="radio" name="gender" value="woman"/>女
</td>
</tr>

（3）单选框和复选框选项必须要设置value属性，否则被选中的选项被提交时，提交的值将为on。

<tr><!-- 性别 -->
<td>性别:</td>
<td>
<input type="radio" name="gender" value="man" checked="checked"/>男
<input type="radio" name="gender" value="woman"/>女
</td>
</tr>

（4）设置单选框和复选框选项默认被选中，可以在该项上添加checked属性，例如：设置性别默认选中男

<td>
<input type="radio" name="gender" value="man" checked="checked"/>男
<input type="radio" name="gender" value="woman"/>女
</td>

2.6.3????表单项标签

1、input元素

(1)普通文本输入框，比如：用户名

<input type="text" name="username"/>

(2)密码输入框，比如：密码

<input type="password" name="password"/>

(3)单选框，比如：性别

<input type="radio" name="gender" value="man"/>男
<input type="radio" name="gender" value="woman"/>女

(4)复选框，比如：爱好

<input type="checkbox" name="like" value="basketball"/>篮球

2、select、option元素

3、textarea元素

2.7? 其他标签

2.7.1????div、span、p标签

day02－?CSS

1.1?CSS概述

1.1.1????什么是CSS

CSS：层叠样式表，用于美化网页的一门技术。使用CSS美化网页可以实现将展示数据的html代码和设置样式的CSS代码进行分离，还可以增强网页的展示能力。

1.2?CSS的引入

1.2.1????通过标签上的style属性引入CSS

1、示例:

<!--
1.通过标签上的style属性给div设置样式
边框:1px solid red
字体大小 40px
背景颜色为 pink
-->
<div style="border:1px solid red;font-size:40px;background-color:pink">
这是一个div...
</div>

可以通过标签上通用的属性style，为当前标签设置CSS样式

这种方式不推荐大量使用，如果大量使用会导致html代码结构的混乱，不利于后期的维护和扩展。

1.2.2????通过style标签引入CSS

1、示例：

<!-- 2.通过style标签给span设置样式如下：
边框: 2px solid cyan
字体大小: 35px
字体加粗
-->

<style>
/* 第二种引入方式 */
span{
border:2px solid cyan;
font-size:35px;
font-weight:bolder;
}
</style>

这种方式是通过在head标签内部的style标签内，书写CSS属性

这种方式可以将所有的CSS代码集中在一个标签内部统一管理，初步的实现了展示数据的HTML代码和设置样式的CSS代码的分离。

1.2.3????通过链接引入外部的CSS文件

1、示例

在html中

<!-- 第三种引入方式 -->
<link rel="stylesheet" href="demo.css"/>

在css文件中
p{
border:2px solid blue;
font-size:30px;
font-family:"黑体";
}

这种方式是将所有的css代码集中在一个单独的文件中统一管理，真正的实现了展示数据的html代码和设置样式的css代码进行分离。

1.3?CSS选择器

1.3.1????基本选择器

1、标签名（元素名）选择器

通过标签的名称选中指定名称的标签进行修饰

格式：标签名称{ css属性?}

示例：

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

2、类（class）选择器

通过标签上通用的属性class为当前标签设置所属的类（分组），再通过class值为这一类的标签统一设置样式

格式：.class值{ css属性... }

示例：

/* 2.类选择器
(1)将所有的span（但是不包括div和p标签下的span）的背景颜色设置为#8FBC8F, 字体颜色为绿色
(2)将div1下的span和内容为"span111"的span字体颜色设置blue,背景颜色设置为#F0E68C
*/
.c1{
background-color:#8FBC8F;
color:green;
}
.c2{
background-color:#F0E68C;
color:blue;
}

补充：一个标签可以设置多个class值，表明当前元素同时属于多个分组，那么这多个分组的样式会同时作用在改元素上，如果有重复的属性，后面设置的将会覆盖前面的。

3、ID选择器

通过标签上通用的属性?id --?可以为当前元素设置所属的编号。注意id的值不能重复。

格式：#id值{ css属性?}

示例：

/* 3.id选择器
用id选择器将第一个p标签设置字体加粗, 首行文本缩进20px
*/
#p1{/* 选中ID值为p1的元素 */
font-weight:bolder;
text-indent:20px;
}

1.3.2????扩展选择器

1、后代选择器

在选中父元素的内部，选中指定的后代元素

格式：父选择器?子孙元素选择器{ css属性?}

示例：

/* 1.后代选择器
将div下所有的span标签的字体大小设置为22px, 背景颜色设置为#DDA0DD
*/
#d1 span{/* 选中id值为d1元素下面的所有span元素 */
font-size:22px;
background-color:#DDA0DD;
}

2、子元素选择器

在选中父元素的内部，选中指定的子元素

格式：父选择器>子元素选择器{ css属性?}

示例：

/* 2.子元素选择器
将div下所有的span子元素标签的字体大小设置为16px, 背景颜色设置为#DEB887
*/
#d1>span{/* 选中id值为d1元素下面的所有span子元素 */
font-size:16px;
background-color:#DEB887;
}

3、分组选择器

将多个选择器选中的元素合并在一起同一设置样式，可以实现代码的复用

格式：选择器1，选择器2，..选择器n{ css属性?}

示例：

/* 3.分组选择器
将span1、span2和 p标签下的 span的背景颜色设置为 #F4A460
*/
.c1,.c2,#p1 span{/* 同时选中class值为c1、c2和id值为p1下的span */
background-color:#F4A460;
}

4、属性选择器

通过选择器+属性条件来选中元素进行修饰

格式：选择器[属性条件]{ css属性?}

示例：

/* 4.属性选择器
(1)将所有有class属性的元素的边框设置为4px、实线、红色.
(2)将所有的type="text"的<input>标签的背景颜色设置为red, 设置字体首行缩进10px
*/
*[class]{/* 选中所有具有class属性的元素 */
border:4px solid red;
}
input[type='text']{/* 选中所有文本输入框 */
background-color:red;
text-indent:10px;
}

5、相邻兄弟选择器(了解)

如果两个元素具有相同的父元素，并且是紧挨着的，这两个元素则为相邻兄弟元素，可以通过A元素选中后面紧邻的B元素

格式：大哥+小弟{ css属性?}

示例：

/* 5.相邻兄弟选择器
将id为p1元素后面的p元素的背景颜色设置为 #DB7093
*/
#p1+p{/* 选中ID值为p1后面紧邻的相邻兄弟p元素 */
background-color:#DB7093;
}

6、伪元素选择器(了解)

/* 6.伪元素选择器
光标移入的状态是{
color:green;
font-size:36px;
text-decoration: underline;/* 有下划线
}
被点击时的状态是{
color:#8FBC8F;
font-size:50px;
text-decoration: none;
}
*/
a:hover{/* 当鼠标悬停在a标签上时 */
color:green;
font-size:36px;
text-decoration: underline;
}
a:active{/* 当鼠标点击a标签时 */
color:#8FBC8F;
font-size:50px;
text-decoration: none;
}

1.4?CSS盒子模型

1.4.1????margin(外边距)、border(边框)、padding(内边距)

1、margin（外边距）

/* 外边距（margin） */
/*
margin-top:40px;
margin-left:30px;
margin-bottom:40px;
*/
margin:10px 20px 30px 40px;/* 上 右 下 左 */
margin:10px 20px 30px;/* 上 左右 下*/
margin:10px 20px;/* 上下 左右*/
margin:10px;/* 上下左右*/

外边距的合并现象：

当两个垂直外边距相遇,将会合并为一个外边距,合并的结果就是取两者之中的较大者!

如果两个水平外边距相遇,将会累加!

2、border（边框）

3、padding（内边距）

1.5?常用CSS属性

元素类型的补充

(1)块级元素（block）

默认情况下，块级元素独占一行

可以设置宽和高，就是设置宽和高

如果不设置宽和高，其中宽是默认填满父元素，而高是由内容决定(由内容支撑)

外边距/边框/内边距都可以设置

(2)行内元素（inline）

默认情况下，多个行内元素处在同一行

不能设置宽和高

左右外边距/边框/内边距都可以设置，上下外边距设置无效

(3)行内块元素（inline-block）

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

display

display用来设置元素的类型

取值：

block：块级元素的默认值

inline：行内元素的默认值

inline-block：行内块元素

none：表示隐藏元素

1.1.3 text-align ? 设置元素中文本水平对齐方式

text-align ? 设置元素中文本水平对齐方式

left: 默认值。左对齐

right: 右对齐

center: 居中对齐

justify: 两端对齐

1.1.4 list列表属性

list-style-type: none/disc/square/circle...

1.1.5 字体属性

font-size： ? ? 设置字体大小

font-weight：设置字体粗细

font-family：设置字体

font-style: ? ? ?设置字体的样式（比如否倾斜italic）

color： ? ? ? ? ?设置字体颜色

line-height：设置行高

text-decoration：设置字体下划线

text-shaodw: ?设置字体阴影

lettr-spacing:设置字符间隔

? ? ? ? ??

1.1.6 背景属性

background-color： ? ? 设置背景颜色

background-image： ? 设置背景图片

background-repeat： ? 设置或检索对象的背景图像是否及如何铺排

background-position：设置或检索对象的背景图像位置

background-size: ? ? ? ??设置背景图片的大小?

1.1.7 其他

width：设置元素的宽度

height：设置元素的高度

作业和总结
1. 总结

1、理解CSS及其作用

2、熟练掌握CSS选择器

3、熟练掌握CSS常用属性

作业

1、将\day06_CSS\examples\目录下的练习自己再独立的做一遍

2、预习框架标签（frameset、frame）

3、尝试完成京淘注册页面

day-03

1.? 综合练习

1.1 京淘注册页面实现

1.1.1???? 准备工作

1.准备工作

在regist.css中

1.1.2? 页面布局

1.regist.html

2.regist.css

3.设置header/main/footer三个部分的div水平居中

1.1.3 实现header(头部)

1.header样式

2.将header内部行划分成两行

3.实现header中的第一行

在HTML中

在css文件中

4.实现header中的第2行

在HTML页面中

在css中

1.1.4 实现main(主体)

1.实现mian

2.将main中的内容分为两部分

3.实现快速注册div

4.实现form表单中的用户名, 密码, 确认密码, 手机输入项

在css中

5.实现”阅读协议”和”立即注册”

在HTML中

在css中

6.实现输入项下面的提示消息

在HTML中

在css中

7.验证邮箱

8.快速注册(和form表单的顶端对齐)

1.1.5??实现footer(尾部)

在HTML中

在css中

4、思维导图

作者：Darren

QQ：603026148

以上内容归Darren所有，如果有什么错误或者不足的地方请联系我，希望我们共同进步。

[JavaScript知识库]py-09-HTML CSS

目录：

1：day01-HTML概述:

2：day02－?CSS

3：day03-京淘注册页面实现

4：前端思维导图

思维导图

day01-HTML概述

1.1?HTML是什么

1.2?HTML结构

1.3?HTML语法

2???HTML标签

2.1?标题标签

2.2?列表标签

2.3?图像标签

2.4?超链接标签

2.5?表格标签

2.6?表单标签

day02－?CSS

1.1?CSS概述

1.1.1????什么是CSS

1.2?CSS的引入

1.2.1????通过标签上的style属性引入CSS

1.2.2????通过style标签引入CSS

1.2.3????通过链接引入外部的CSS文件

1.3?CSS选择器

1.3.1????基本选择器

1.3.2????扩展选择器

1.4?CSS盒子模型

1.4.1????margin(外边距)、border(边框)、padding(内边距)

1.5?常用CSS属性

day-03

1.? 综合练习

1.1 京淘注册页面实现

4、思维导图

作者：Darren

QQ：603026148

以上内容归Darren所有，如果有什么错误或者不足的地方请联系我，希望我们共同进步。