网页的组成
(HTML+CSS+JAVASCRIPT)
HTML：页面结构
CSS：页面样式表现
JavaScript：交互行为
1.1 HTML
简介：
HTML（英文Hyper Text Markup Language的缩写）中文译为“超文本标记语言”，主要是通过HTML标记对网页中的文本、图片、声音等内容进行描述。
HTML提供了许多标记，如段落标记、标题标记、超链接标记、图片标记等，网页中需要定义什么内容，就用相应的HTML标记描述即可。
编写环境：**HBuilder ** 下载地址：http://www.dcloud.io/
运行环境：直接在浏览器中运行。
1.1.1 基本结构
<!DOCTYPE html> <!-- 根控制标记-->
<html> <!-- 头控制标记-->
<head>
<meta charset="utf-8" /> <!-- 编码格式-->
<title>这是标题</title> <!-- 标题标记-->
</head>
<body>
<!-- 主体-->
</body>
</html>
1.1.2 常见标签
1.1.2.1 标题标签
<body>
<!--标题标签：h1~h6-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
文本内容
</body>
1.1.2.2 段落标签
<body>
<!--段落标签：p-->
<p>这是第一个段落</p>
<p>这是第二个段落</p>
</body>
1.1.2.3 换行标签
<body>
<!--换行标签：br 分隔标签：hr-->
换行
<br />
换行并出现分隔符
<hr />
</body>
1.1.2.4 图片标签
<body>
<!--
图片标签：img
src-图片资源
width：宽度（px-像素 %-浏览器的宽度百分比）
height：高度
alt：图片加载失败后展示的内容
-->
<img src="img/1.jpg" width="89px" height="120px"/>
<img src="img/2.jpg" width="10%"/>
<img src="img/3.jpg" width="10%" alt="加载失败 "/>
</body>
注：src后直接跟相对路径。
1.1.2.5 列表标签
有序标签：标签前不会出现序号
无序标签：标签前会出现顺序的序号
定义标签：自己定义标签名和标签内容。
<body>
<!--
无序列表：ul
type：样式（circle-空心圆 disc-实心圆 square-实心方块）
li：项
-->
<ul type="square">
<li>无序1</li>
<li>无序2</li>
<li>无序3</li>
<li>无序4</li>
</ul>
<!--
有序列表：ol
type:样式(1-数字 a-小写字母 A-大写字母 i-小写罗马数字 I-大写罗马数字)
li：项
-->
<ol type="I">
<li>有序1</li>
<li>有序2</li>
<li>有序3</li>
<li>有序4</li>
</ol>
<!--
定义列表：dl
dt：列表标签
dd：列表内容
-->
<dl>
<dt>这是标签名</dt>
<dd>这是标签内容</dd>
</dl>
</body>
1.1.2.6 超链接标签
点击超链接标签之后跳转到其他前端页面
<body>
<!--
超链接标签：a
href：链接地址
target：目标（_self-当前页面 _blank-新增页面）
-->
<a href="http://www.baidu.com" target="_self">百度一下，你就知道</a>
<a href="列表.html" target="_blank">列表</a>
<a href="https://baike.baidu.com/item/%E6%B7%B1%E7%94%B0%E5%92%8F%E7%BE%8E/57911903?fr=aladdin" target="_blank">
<img src="img/1.jpg" width="10%"/>
</a>
</body>
1.1.2.7 锚链接标签
点击锚链接之后会跳转到本页面对应添加锚点的位置
<body>
<a href="#new01">法制</a>
<a href="#new02">国际</a>
<a href="#new03">娱乐</a>
<a name="new01"></a><!--锚点-->
<h1>法制新闻1</h1>
<h1>法制新闻2</h1>
<h1>法制新闻3</h1>
<a name="new02"></a><!--锚点-->
<h1>国际新闻1</h1>
<h1>国际新闻2</h1>
<h1>国际新闻3</h1>
<a name="new03"></a><!--锚点-->
<h1>娱乐新闻1</h1>
<h1>娱乐新闻2</h1>
<h1>娱乐新闻3</h1>
</body>
1.1.3 表格
<body>
<!--
table - 表格
border="1" - 表格边框粗细，数值越大，越粗，为0时没有边框
tr - 行
th - 列（居中加粗）
td - 列
-->
<!--
rowspan="2" - 占两行
colspan="2" - 占两列
-->
<table border="1">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr>
<td>小红</td>
<td>20</td>
<td>女</td>
</tr>
<tr>
<td>小花</td>
<td>21</td>
<td>女</td>
</tr>
<tr>
<th>单格</th>
<th>单格</th>
<th rowspan="2">行双格</th>
</tr>
<tr>
<th colspan="2">列双格</th>
</tr>
</table>
<body>
1.1.4 表单
<body>
<!--
form - 表单
-->
<form action="提交的对象" method="post/get 提交方式">
输入框：<input type="text" name="username" placeholder="输入框"/><br />
密码框：<input type="password" name="password" placeholder="密码框" /><br />
<!--
单选框、多选框：默认选中-checked="checked"
-->
单选框：
<input type="radio" name="sex" value="man" checked="checked"/>男
<input type="radio" name="sex" value="woman"/>女
<input type="radio" name="sex" value="caodan"/>不明
<br />
多选框：
<input type="checkbox" name="hobby" value="football" checked="checked"/>足球
<input type="checkbox" name="hobby" value="basketball"/>篮球
<input type="checkbox" name="hobby" value="shop"/>购物
<br />
<!--
下拉列表：默认选中-selected="selected"
-->
下拉列表：
<select name="province">
<option value="sc">四川</option>
<option value="jx" selected="selected">江西</option>
<option value="hn">湖南</option>
<option value="hb">湖北</option>
</select>省
<select name="city">
<option value="cd">成都</option>
<option value="zg">自贡</option>
<option value="ya">雅安</option>
<option value="ls">乐山</option>
<option value="ms">眉山</option>
<option value="my">绵阳</option>
</select>市
<br />
<!--
提交按钮和图片按钮 功能一样
-->
<input type="button" value="普通按钮" onclick="fun01()"/>
<input type="submit" value="提交按钮" />
<input type="reset" value="重置按钮" />
<input type="image" src="img/1.jpg" width="10%"/>
<br /><br />
<!--
textarea文本域
rows高度
cols宽度
required必填项
readonly只读
-->
<textarea rows="10" cols="20" required="required" readonly="readonly">
协议：xxxxxxxxxxx
</textarea>
</form>
<script type="text/javascript">
function fun01(){
alert("弹出这个消息");
}
</script>
</body>
1.2 CSS
简介：
CSS 指层叠样式表 (***C***ascading ***S***tyle ***S***heets)
功能：样式定义如何显示*** HTML 元素，解决了内容与表现分离的问题*，多个样式定义可***层叠***为一
样式通常存储在***样式表***中
1.2.1 选择器
选择器，选择你所需要修饰的HTML元素
1.2.1.1 通配选择器
<head>
<style type="text/css">
/*
* * ： 通配符选择器
*/
*{
color: red;
}
</style>
</head>
1.2.1.2 基本选择器
<head>
<style type="text/css">
/**
* 基本选择器 - 标签选择器
*/
p{//选择的为p段落标签
color: red;
}
/**
* 基本选择器 - 类选择器（在定义标签时可以对他进行分类class="****"）
*/
.myClass{
color: green;
}
/**
* 基本选择器 - id选择器
* 注意：项目中id都是唯一的
*/
#myId{
color: blue;
}
</style>
</head>
<!-- 示例：-->
<body>
<h1 class="myClass">一级标签</h1>
<h2 id="myId">二级标签</h2>
<h3 class="myClass">三级标签</h3>
<h4>四级标签</h4>
<h5 class="myClass">五级标签</h5>
<h6>六级标签</h6>
<p>段落标签1</p>
<p>段落标签2</p>
</body>
注：基本选择器的优先级别：ID > CLASS > 标签
1.2.1.3 群组选择器
即多个基本选择合在一起（使用逗号隔开）
<head>
<style type="text/css">
/*群组选择器*/
h1,h3,h5,.myClass{
color: red;
}
</style>
</head>
1.2.1.4 派生选择器
通过上下文关系选择。
1.2.1.4.1 后代选择器
格式：标签名1 标签名2{ }
含义：只对标签名1下所有的标签名2起作用
<head>
<style type="text/css">
ul a{color: red;}
</style>
</head>
1.2.1.4.2 子代选择器
格式：标签名1 >标签名2{ }
含义：只对标签名1下一层的标签名2起作用
<head>
<style type="text/css">
li>a{color: red;}
</style>
</head>
后代 VS 子代
<body>
<ul>
<li>
<ul>
<a href="#">超链接1.1</a>
<a href="#">超链接1.2</a>
</ul>
</li>
<li>
<a href="#">超链接2</a>
</li>
</ul>
<ul>
<li>
<a href="#">超链接3</a>
</li>
<li>
<a href="#">超链接4</a>
</li>
</ul>
</body>
使用后代选择器时，对超链接1.1、超链接1.2、超链接2、超链接3、超链接4有效
使用子代选择器时，超链接2、超链接3、超链接4有效
1.2.1.4.3 相邻兄弟选择器
格式：标签名1 +标签名2{ }
含义：标签名1后接的相邻的所有标签名2起作用。
<head>
<style type="text/css">
a+a{color: red;}
</style>
</head>
<body>
<a href="#">超链接5</a>
<a href="#">超链接6</a>
<a href="#">超链接7</a>
</body>
注：作用生效于超链接6和超链接7
1.2.1.5 属性选择器
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*
* 属性选择器：
*
* input[type]{color: red;}
* input[type][placeholder]{color: red;}
* input[type='text'][name='username1']{color: red;}
*/
</style>
</head>
<body>
<form action="服务器地址" method="post">
输入框：<input type="text" name="username1" placeholder="输入框"/><br />
输入框：<input type="text" name="username2" placeholder="输入框"/><br />
密码框：<input type="password" name="password" placeholder="密码框" /><br />
单选框：
<input type="radio" name="sex" value="man" checked="checked"/>男
<input type="radio" name="sex" value="woman"/>女
<input type="radio" name="sex" value="caodan"/>不明
<br />
多选框：
<input type="checkbox" name="hobby" value="football" checked="checked"/>足球
<input type="checkbox" name="hobby" value="basketball"/>篮球
<input type="checkbox" name="hobby" value="shop"/>购物
<br />
下拉列表：
<select name="province">
<option value="sc">四川</option>
<option value="jx" selected="selected">江西</option>
<option value="hn">湖南</option>
<option value="hb">湖北</option>
</select>省
<select name="city">
<option value="cd">成都</option>
<option value="zg">自贡</option>
<option value="ya">雅安</option>
<option value="ls">乐山</option>
<option value="ms">眉山</option>
<option value="my">绵阳</option>
</select>市
<br />
<input type="button" value="普通按钮" onclick="fun01()"/>
<input type="submit" value="提交按钮" />
<input type="reset" value="重置按钮" />
<input type="image" src="../img/三上悠亚.jpg" width="10%"/>
</form>
</body>
1.2.2 伪类
伪类用于向某些选择器添加特殊的效果。
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*
* 锚伪类：记录各个状态
*/
a:link {color:#FFB6C1} /* 未访问的链接 */
a:visited {color:#000000;}/* 已访问的链接 */
a:hover {color:#00FFFF}/* 鼠标移动到链接上 */
a:active {color:#B22222}/* 选定的链接 */
</style>
</head>
<body>
<a href="http://www.163.com">网址</a>
</body>
1.2.3 样式
1.2.3.1 样式的优先级
<head>
<meta charset="UTF-8">
<title></title>
<!--
样式的优先级别：行内样式表 >（内部样式和外部样式看加载顺序）
-->
<!--内部样式表-->
<style type="text/css">
p{color: red;}
</style>
<!--外部样式表-->
<link rel="stylesheet" type="text/css" href="../css/new_file.css"/>
</head>
<body>
<!--行内样式表-->
<p style="color: blue;">段落标签</p>
</body>
注：外部样式是存放在CSS文件夹中的.css文件。
1.2.3.2 常用样式
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
p{
color: white;
font-family: "微软雅黑";
font-size: 50px;
font-weight: bolder;/*字体粗细：加粗*/
font-style: italic;/*字体样式：斜体*/
background-color: red;/*背景颜色*/
background-image: url(../img/三上悠亚.jpg);/*背景图片*/
letter-spacing: 10px;/*字体间隔*/
text-align: center;/*对齐方式*/
border: red 10px solid;/*边框*/
}
a{
text-decoration: none;/*装饰线*/
}
</style>
</head>
<body>
<p>段落标签</p>
<a href="#">超链接</a>
</body>
1.2.4 div盒子模型
使用：
<body>
<div>
<!-- html标签内容-->
</div>
</body>
样式设置：
<style type="text/css">
div{
border: 1px red solid;
width: 200px;
height: 200px;
/*设置外边距*/
/*margin-top: 50px;上外边距*/
/*margin-left: 50px;左外边距*/
/*margin-right: 50px;右外边距*/
/*margin-bottom: 50px;下外边距*/
/*margin: 50px;上下左右外边距*/
/*设置内边距*/
/*padding-top: 50px;上内边距*/
/*padding-left: 50px;左内边距*/
/*padding-right: 50px;右内边距*/
/*padding-bottom: 50px;下内边距*/
/*padding: 50px;上下左右内边距*/
}
</style>
1.2.4.1 定位方式
相对定位
<style type="text/css">
div{
position: relative;/*相对定位：保留原有位置，针对于原有位置进行移位*/
top: 10px;
left: 10px;
}
</style>
绝对定位
<style type="text/css">
div{
position: absolute;/*绝对定位：不保留原有位置，向上找父级标签，查看是否有position的属性，如果没有再向上找，直到找到body标签*/
top: 10px;
left: 10px;
}
</style>
固定定位
<style type="text/css">
div{
position: fixed;/*固定定位*/
top: 70%;
left: 90%;
}
</style>
1713
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
