目录
HTML网页设计语言-前段页面制作
CSS–页面美化
本文可能用到词汇：
align–排列；center-中心；bold-加粗；italics-斜体字；underline-下划线；paragra-段落；image-图像；width-宽；target-对象，目标；blank-空白；table-表；border-边，边界；row-行；column-列；span-跨度；direction-方向；behavior-行为；select-选择；option-选项；form-表格；bottom-底部，middle-中间；style-样式；iframe-框架；margin-边缘；property-属性；
一、HTLM语言简介
1、简介
- HTML （Hyper Text Markup language）：超文本标记语言
- HTML是一个包含标记的文本文件
- HTML的结构：
- 头部：描述浏览器所需要的信息
- 主体：包含要展现的具体内容
- HTML文件的扩展名必须为html
- HTML语言运行在浏览器上
- HTML的编辑器 - windows记事本，notepad++
- 网站可进阶学习：https://www.runoob.com/html/html-tutorial.html
2、HTML语言基本格式
• HTML文档一般使用3对HMTL标签构成。其格式如下：
<html>
<head>头部信息
<title> ... </title>
<meta />
<style> ... </style>
<link />
</head>
<body>正文信息
<!-- 这里写各种可以在浏览器页面展示的元素 -->
</body>
</html>
- HTML文件均为
<html>标记符开始，</html>标记符结束。
< head> < /head>标记符之间的内容为描述页面头部信息：
如：页面标题等< body>和< /body>标记符之间的内容即为页面的主体内容。
二、HTML常用元素
- HTML文本 :可以设置不同级别的标题、分段和换行、指定文本的语义和外观，可以说明文本是引用自其它的地方等。
- 图片 :用于使页面更加美观，或提供更多信息。
- 链接 : 站内外超链接。 ·
- 表格 : 按行与列将数据组织在一起的形式。也可使用表格进行页面布局。
- 列表 : 用于说明一系列条目是彼此相关的。
- 框架 :使页面里能包含其它的页面。
- 注释 : 不需要执行的HTML代码
- 表单 : 使HTML页面具有交互性。
1、标题
- 一共有6个级别的标题元素，用h加数字表示，例：
<h1> 这是一级标题</h1>
<h2> 这是二级标题</h2>
<h3> 这是三级标题</h3>
<h4> 这是四级标题</h4>
<h5> 这是五级标题</h5>
<h6> 这是六级标题</h6>
- 元素的属性：属性需要写在 开始标签中，与元素名之间要有空格
语法（一组属性）：属性名="属性值 "【属性值用单引号或双引号括起来】 - 元素的align属性 可以控制文字的对齐方式，属性值可以是left、center、 right
例：
<h1 color="red" align="center"> 这是一级标题 </h1>
2、文本
（标签成对存在，不可交叉嵌套）
可以给文本设置加粗，斜体，下划线等，语法如下：
<b> 加粗 </b>
<u> 下划线 </u>
<i> 斜体字 </i>
<b> <u> <i> 同时设置加粗斜体下划线 </i> </u> </b>
3、换行
语法： <br/>
注意: <br/> 没有结束标签，因此需要加 / 表示结束。
HTML代码中的所有连续的空行(换行)在实际页面中都会被显示为一个空格。
例：
<br/> <!-- 换行符，无结束标签，注：/要与>连在一起 -->
4、段落
语法： <p> ... </p>
作用：由于html代码会忽略回车，所以必须使用分段标签；效果：换行显示，并自动在段落的前后添加空行。
例：(如下，在浏览器页面中，会在第四行后另起一行)
<p> <!-- 段落 标签中的内容默认换行，且会在段落前后各加一个空行 -->
第一行
第二行
第三行
第四行
</p>
第五行
第六行
5、图像
语法：<img src='****' width='****' height='****'/>
作用：在页面上添加图像（本地图像、网络图像
-
src:图像的URL地址（可以是本地图片的相对或绝对路径，也可以是网络图片URL地址
-
height:图像的高度（单位为像素)
-
width: 图像的宽度单位为像素)
<img src = 'a1.jpg' /> <!--添加图像，没有结束标签，该标签中必须要有src属性，表示图片的资源 -->
<img src = 'pic\a2.jpg' /> <!-- src后面可以是图片图片绝对路径、相对路径(相对路径表示图片相对于当前htm1文件的路径）、或URL地址（链接的网页图片）-->
<img src = 'C:\51code\aaa\bbb\03 day\HTML\pic\a2.jpg' />
<img src = 'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png' />
<img src = 'a1.jpg' height = '200px' width = '300px' /> <!--为图片设置宽和高的属性，单位是px（像素） -->
- 不写路径就默认在当前HTML文件路径下寻找，本地图片建议用相对路径
- 不默认换行显示
6、横线
语法： <hr color="yellow" size="10px" />
作用：用于在页面上添加横线
注：hr标签没有结束标签，可以不添加颜色，大小属性
<!--横线标签，可以设置颜色，大小（单位：像素px） -->
<hr color = 'red' size = '10px' />
7、链接（站内外超链接）
链接要有承载的元素（如文字、图片）
- 语法：
<a href='' target='_blank/_self/框架的name值'> ... </a>- 属性 href：指定了链接到的地址（某个网页、当前网页某个位置（
href ='# id'）或指定HTML文件） - 属性 target：定义被链接的文档在何处显示（默认当前页面 _self ），或者是新页面（_blank）
• 图片链接
• 文本链接
- 属性 href：指定了链接到的地址（某个网页、当前网页某个位置（
注：链接到本页面某一位置时，需在此位置加一个ID属性，链接时根据ID来定位
例：文本链接
<a href = 'https://www.baidu.com' target = '_blank' > 链接测试 </a>
例：图片连接
<a href = 'https://www.baidu.com/' target = '_blank' > <img src = 'a1.jpg' /> </a>
8、表格
按 行 与 列 将数据组织在一起的形式； 也可使用表格进行 页面布局。
语法一：（这是简单表格）
<!-- 这是3 * 2的表格写法 -->
<table border = '1' > <!-- 表格标签：表格<table>，行<tr>, 列<td> 默认表格不显示线条， border = '1'用来显示线条 -->
<tr>
<td> 张三 </td> <td> 男 </td> <!-- 表格中的信息是放在td标签中的，td 中可以放文字，图片，也可以放其它标签-->
</tr>
<tr>
<td> 李四 </td> <td> 女 </td>
</tr>
<tr>
<td> <img src = 'a1.jpg' /> </td>
<td> <img src = 'pic\a2.jpg' /> </td>
</tr>
</table>
说明：表格的总标签 <table> ... </table> 里可包含多个行标签 <tr> ... </tr> 行标签里又会又会包含 <td> ... </td> 列标签。
1、一个 <table> </table>表示这是一个表格
2、一个 <tr> ... </tr> 表示这是表格里的一行
3、一个 <td> ... </td> 代表这是行里的一个单元格。
表格中的信息是放在td 标签中的，td中可以放文字，图片，也可以放其它标签
例：
默认情况下，表格不显示线条，可以用 border=‘1’ 显示线条
语法二：（复杂表格)
作用：如 打印的表格多页时，以这种形式写的每一页都会带上表头
复杂表格：把表格分成三部分，分别是表头，表体，表脚，它们内部各由行，单元格构成，表头和表脚的单元格可以用<th>表示，可以默认加粗显示
<table border='1'>
<thead><tr><th></th></tr></thead> 表头
<tbody><tr><td></td></tr></tbody> 表体
<tfoot><tr><th></th></tr></tfoot> 表脚
</table>
例：
9、列表
用于说明一系列条目是彼此相关的。
语法：
<ul> <!-- 无序列表，前面默认显示圆点 unorder list-->
<li> 北京 </li>
<li> 上海 </li>
<li> 深圳 </li>
</ul>
<ol> <!--有序列表 列表前显示数字编号，inorder list -->
<li> 北京 </li>
<li> 上海 </li>
<li> 深圳 </li>
</ol>
例：
10、滚动
可以滚动任何元素；
语法：<marquee> ... </marquee>
滚动方向属性 ：direction=“滚动方向” （up、 down、 left和 right）
滚动方式属性 ：behavior=“滚动方式” （scroll:循环滚动，默认效果； slide:只滚动一次就停止； alternate:来回交替进行滚动）
滚动速度属性 ：scrollamount=“滚动速度” （默认为6，建议设为1～3比较好）
例：
<!-- 滚动标签， -->
<marquee > <img src = 'a1.jpg' /> 测试图片加文字滚动效果 </marquee>
<marquee direction = 'left' behavior = 'slide' scrollamount ='99' > 测试 升级版 滚动效果 </marquee>
11、div元素容器与span文本容器
- div：元素的容器，可以将一些其它元素放在div中，通常配合css样式使用，会换行
- span：文本的容器，也是配合css样式使用，不换行
12、注释
用于解释说明，不被执行的HTML代码。
语法：<!-- 测试注释效果，注释内容不被执行 -->
注：特别说明-注释不能写在
<title> ... </title>标签内
13、HTML常用字符
html中有一些特殊字符，如果想在浏览器中显示时，需要使用特殊编号
特殊字符 表示1 表示2
空格  
& & &
< < <
> > >
" " "
‘ &qpos; '
例：
<!-- 如何在 浏览器上显示 <html> -->
如何在      浏览器上显示< html >
14、表单元素
语法：<form> ... </form>
作用：用来输入信息，提交给服务器；使HTML页面具有交互性。
a、文本输入框
语法：<input type='text' id='' name='' placeholder='' value=''/>
（有两种写法，结束标签可有可无，无结束标签时需加 / ）
b、文本域
可定义文本域的默认大小
语法： <textarea cols="40" rows="6">......</textarea>
c、单选按钮
语法： <input type="radio">
<!-- 可单选按钮 默认情况下每个单选按钮 各为一组，
加了 同一属性值的name属性后，这两组就变成了同一组。就实现了单选
checked="checked"用于添加默认勾选 -->
性别：<input type="radio" name="sex" > 男 </input>
<input type="radio" name="sex" > 女 </input>
<input type="radio" name="sex" checked="checked" > 其他 </input>
d、复选框
语法： <input type=“checkbox“>
e、文件上传
语法： <input type=“file“>
f、按钮
定义可点击的按钮 ，语法： <input type="button" >
value
定义图像形式的按钮，语法： <input type="image" >
src
alt
g、下拉列表
语法：
<select> <!--元素（下拉列表）-->
<option selected="selected"> </option> <!--元素定义待选择的选项，加了selected是默认选项。-->
</select>
15、头部元素
语法：
<head>： <!--用于放置头部信息-->
<title> ... </title> <!--定义文档的标题-->
<style> ... </style> <!--定义了HTML文档的样式文件引用地址-->
<meta charset="utf-8"> <!-- 定义文档显示编码格式-->
<link rel="icon" href="picture.ico" type="image/x-icon"/> <!--定义文档与外部资源之间的关系（页面标题前加图标）-->
</head>
16、框架
在一个浏览器页面里显示多个页面 ，语法：
<iframe src='***' width='20%' height='1000px' align="***,name="***"></iframe>
属性 src=“URL”
属性height / width，其值可以是百分比
name
属性align用于定义框架的位置 (其值可以是：left，right，top，bottom，middle)
frameborder 属性用于定义iframe表示是否显示边框（ 0 - 不显示， 1 - 显示 ）
三、css基础
进阶学习：https://www.runoob.com/css/css-navbar.html
1、简介
CSS样式：Cascading Style Sheets 层叠样式表
作用：用于布局与美化网页
2、css的三种定义方式：
内联样式：在一个html元素上面 用 style属性来定义style='color:red;
内部样式表：在html文件的头部<head>..</head>定义，需要写在 <style></style>内；
外部样式表：在一个单独的css文件中定义，使用时需要在html文件的头部引用
<link rel='stylesheet' type='text/css' href='***.css'/>
样式定义的语法：
选择器 声明（一组或多组）
选择器：标签，id选择器 class选择器
声明：写在一组大括号中 ｛ 属性名:属性值｝ 每组声明由 属性名与属性值构成
例：
<html>
<head>
<!-- 外部样式 -->
<link rel="stylesheet" type="text/css" href="mycss.css" />
<style>/* 这是内部样式 */
h1,h3{color:yellow;margin-left:100px} /* 标签 选择器写法1 */
h2{color:purple;margin-left:100px} /* 标签 选择器写法2 */
#id01{color:blue} /* id选择器写法, 在前边加#号表示这是ID */
.c1{color:olive} /* class选择器写法, 在前边加 . 号表示这是class */
h2.c1{color:green} /* 给含有c1的h2元素 应用此样式 */
a:link {color:white;background-color:black;} /* 链接比较特殊 */
a:visited {color:yellow;background-color:green;}
a:hover {color:purple;background:olive;}
a:active {color:red;background:pink;}
</style>
</head>
<body>
<h1 style="color:red ;margin-left:100px " > 测试1 </h1> <!-- 内联样式 -->
<br/>
<h1 > 测试2 </h1>
<h1 > 测试3 </h1>
<h1 class="c1" > 测试4 </h1>
<h2 class="c1"> 测试5 </h2>
<h2 id="id01" > 测试6 </h2>
<h3 id="id01"> 测试7 </h3>
<h4 > 测试8 </h4>
<a href="http://www.51testing.com/" > 设置链接样式</a>
</body>
</html>
3、CSS样式的优先级
CSS样式的优先级：
- 内联 > 内部和外部 （内部与外部，最终以在后面的样式为准）
2. 内部样式里： id > 标签.class > class > 标签
链接的样式（链接定义样式时，其顺序要遵循下面的顺序，不能擅自改变顺序）：
a:link {color:white;background-color:green;} 链接的默认样式
a:visited {color:yellow;background-color:olive;} 链接被访问过之后的样式
a:hover {color:blue;background-color:yellow;} 鼠标悬浮在链接上的样式
a:active {color:red;background-color:skyblue;} 鼠标在链接上面按下去的那一个瞬间的样式
4、注释
CSS内的注释写法：/* 这是注释 */
四、综合练习
1、模仿制作以下页面
2、模仿制作以下页面
445
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
