超级文本标记语言（HyperText Markup Language）
-
“超文本”就是指页面内可以包含图片、链接等非文字内容。
-
“标记”就是使用标签的方法将需要的内容包括起来。例如：
<a>www.itcast.cn</a>
网页内容包含：HTML代码、CSS代码、JavaScript代码等内容。
-
HTML代码：用于展示需要显示的数据。
-
CSS代码：使显示的数据更佳好看。
-
JavaScript代码：使整个页面显示的数据具有动画效果。
网页根据内容是否改变分为：静态页面、动态页面
-
静态页面：编写之后在浏览器不再改变的网页。HTML就是用于编写静态网页的。
-
动态页面：会根据不同的情况展示不同的内容。例如：登录成功后右上角显示用户名。
HTML语言特点
-
HTML文件不需要编译，直接使用浏览器阅读即可
-
HTML文件的扩展名是*.html 或 *.htm
-
HTML结构都是由标签组成
- 标签名预先定义好的，我们只需要了解其功能即可。
- 标签名不区分大小写
- 通常情况下标签由开始标签和结束标签组成。
- 如果没有结束标签，建议以/结尾。
-
HTML结构包括两部分：头head和体body
<!--整个页面的根标签，理论上一个页面只需要一个，由头和体组成-->
<html>
<!--头标签，用于引入脚本、导入样式、提供元信息等。一般情况下头标签的内容在浏览器端都不显示。-->
<head>
<meta charset="utf‐8" />
<title>这是标题</title>
</head>
<!--体标签，是整个网页的主体，我们编写的html代码基本都在此标签体内-->
<body>这里是正文 </body>
</html>
基本标签
<html>
<head>
<title>这是标题</title>
</head>
<body>这里是正文
<h1>h1大</h1>
<h6>h6小</h6>
<!-- 在 HTML 页面中创建一条水平分隔线 -->
<!-- size 水平线的高度，单位像素 -->
<!-- noshade 没有阴影，表示显示纯色 -->
<hr size="2" noshade="noshade" />
<!-- 用于设置字体尺寸、字体颜色等 -->
<!-- size 字体大小 从1到7 浏览器默认为3 -->
<!-- color #FF0000红色，#00FF00绿色，#0000FF蓝色 或者直接写颜色的英文名 -->
<font size="7" color="red">我个大</font>
<b>粗体</b>
<i>斜体</i>
<u>下划线</u>
<!-- p 定义段落。p 标签会自动在其前后创建一些空白-->
<!-- <br /> 插入单个换行 -->
<p>米店老板姓曾，今年62岁，
<br>三十出头的时候，从四川广安来到重庆，
</p>
<!--
<img> 在html页面中引用一张图片
src ：指定需要显示图片的URL（路径）。
alt ：图片无法显示时的替代文本。
width ：设置图像的宽度。
height ：定义图像的高度。
title ：鼠标移上显示-->
<img src="img/registImg.jpg" alt="剁手不够解恨" width="200px" height="200px" title="鼠标移上显示" />
<img src="img/registImg2.jpg" alt="剁手不够解恨" width="200px" height="200px" title="鼠标移上显示" />
<!-- <ol> 定义有序列表。 type 列表类型，取值：A、a 、I 、i 、1 等
<ul> 定义无序列表。 type 符号的类型，取值：disc 实心圆、square 方块 、circle 空心圆
<li> 定义列表项。 是 <ul> 或 <ol> 的子标签 -->
<!-- <!‐‐ 列表标签 ‐‐> -->
<ul type="circle">
<!-- <!‐‐ 以“空心圆”显示无序列表 ‐‐> -->
<li>无序</li>
<li>无序</li>
<li>无序</li>
</ul>
<ol type="I">
<!-- <!‐‐以大写阿拉伯数字显示序号‐‐> -->
<li>有序</li>
<li>有序</li>
<li>有序</li>
</ol>
<!--
<a> 标签是超链接，是在html页面提供一种可以访问其他位置的实现方式。
href：用于确定需要显示页面的路径（URL）
target：确定以何种方式打开href所设置的页面。
常用取值：blank、self 等
_blank 在新窗口中打开href确定的页面。
_self 默认。使用href确定的页面替换当前页面。 -->
<!-- <!‐‐超链接‐‐> -->
<a href="http://www.baidu.cn" target="_self"> 访问“百度”官网，以默认方式打开 </a><br /> <a
href="http://www.baidu.com" target="_blank"> 访问“百度”官网，以新窗口方式打开 </a><br />
<!-- HTML表格由一个或多个标签组成
<table> 是父标 签，相当于整个 表格的容器。
border 表 格边框的宽 度。
bordercolor 表格线的颜色
width 表格 的宽度。
cellpadding 单元边沿与 其内容之间 的空白。
cellspacing 单元格之间 的空白。
bgcolor 表 格的背景颜 色。
<th> 标签用于 定义表头。单元 格内的内容默认 居中、加粗。
<tr> 标签用于 定义行
<td> 标签用于 定义表格的单元 格（一个列）
colspan 单 元格可横跨 的列数。 rowspan 单元格可横 跨的行数。
align 单元 格内容的水 平对齐方式,
取值：left 左 、right 右、center 居中。
nowrap 单 元格中的内 容是否折 行。 -->
<table border="1px" width="400px" cellpadding="0" cellspacing="0">
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
</table>
</body>
</html>
实战小例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>商城</title>
</head>
<body>
<table align="center" width="1200px" cellpadding="0" cellspacing="0">
<tr>
<td><img src="img/logo2.png" </td>
<td><img src="img/header.jpg" </td>
<td>
<a href="#">登录</a>
<a href="#">注册</a>
<a href="#">购物车</a>
</td>
</tr>
<tr bgcolor="black" height="40px">
<td colspan="3">
<a href="#">首页</a>
<a href="#">电脑</a>
<a href="#">手机</a>
<a href="#">游戏机</a>
</td>
</tr>
<tr width="1200px">
<td colspan="3">
<img src="./img/1.jpg" width="1200px" />
</td>
</tr>
</table>
<h1> 热门商品 <img src="./img/title2.jpg"></h1>
<table width="1200px" align="center">
<tr >
<td rowspan="2">
<img src="img/big01.jpg" />
</td>
<td colspan="3">
<img src="img/middle01.jpg">
</td>
<td>
<img src="img/small03.jpg"><br />冬瓜<br />
<font color="red">$299.99</font>
</td>
<td>
<img src="img/small03.jpg"><br />冬瓜<br />
<font color="red">$299.99</font>
</td>
<td>
<img src="img/small03.jpg"><br />冬瓜<br />
<font color="red">$299.99</font>
</td>
</tr>
<tr>
<td>
<img src="img/small03.jpg"><br />冬瓜<br />
<font color="red">$299.99</font>
</td>
<td>
<img src="img/small03.jpg"><br />冬瓜<br />
<font color="red">$299.99</font>
</td>
<td>
<img src="img/small03.jpg"><br />冬瓜<br />
<font color="red">$299.99</font>
</td>
<td>
<img src="img/small03.jpg"><br />冬瓜<br />
<font color="red">$299.99</font>
</td>
<td>
<img src="img/small03.jpg"><br />冬瓜<br />
<font color="red">$299.99</font>
</td>
<td>
<img src="img/small03.jpg"><br />冬瓜<br />
<font color="red">$299.99</font>
</td>
</tr>
</table>
<table align="center" width="1200px">
<tr>
<td>
<img width="1170px" align="center" src="img/ad.jpg">
</td>
</tr>
</table>
<h1> 畅销商品 <img src="./img/title2.jpg"></h1>
<table width="1200px" align="center">
<tr>
<td rowspan="2">
<img src="img/big01.jpg" />
</td>
<td colspan="3">
<img src="img/registImg.jpg">
</td>
<td>
<img src="img/small03.jpg"><br />冬瓜<br />
<font color="red">$299.99</font>
</td>
<td>
<img src="img/small03.jpg"><br />冬瓜<br />
<font color="red">$299.99</font>
</td>
<td>
<img src="img/small03.jpg"><br />冬瓜<br />
<font color="red">$299.99</font>
</td>
</tr>
<tr>
<td>
<img src="img/small03.jpg"><br />冬瓜<br />
<font color="red">$299.99</font>
</td>
<td>
<img src="img/small03.jpg"><br />冬瓜<br />
<font color="red">$299.99</font>
</td>
<td>
<img src="img/small03.jpg"><br />冬瓜<br />
<font color="red">$299.99</font>
</td>
<td>
<img src="img/small03.jpg"><br />冬瓜<br />
<font color="red">$299.99</font>
</td>
<td>
<img src="img/small03.jpg"><br />冬瓜<br />
<font color="red">$299.99</font>
</td>
<td>
<img src="img/small03.jpg"><br />冬瓜<br />
<font color="red">$299.99</font>
</td>
</tr>
</table>
<table align="center" width="1200px">
<tr align="center">
<td >
<img align="center" width="1200px" src="img/footer.jpg" />
</td>
</tr>
</table>
<table align="center" width="1200px">
<tr align="center">
<td align="center">
<a href="#">关于我们</a>
<a href="#">联系我们</a>
<a href="#">招贤纳士</a>
<a href="#">法律声明</a>
<a href="#">友情链接</a>
<a href="#">支付方式</a>
<a href="#">广告声明</a>
</td>
</tr>
<tr align="center">
<td>版权所有，抄袭必究</td>
</tr>
</table>
</body>
</html>
表单相关标签
<html>
<head>
<title>这是标题</title>
<meta charset="utf-8" />
</head>
<body>
<!-- <form> 表单标签，在html页面创建一个表单，表单标签在浏览器上没有任何显示。
如果数据需要提交到服务器，负责搜集数据的标签必须存放在表单标签体内容。
action属性：请求路径，确定表单提交到服务器的地址（路径）
method属性：请求方式。常用的取值：GET、POST
GET：默认值
提交的数据追加在请求路径上。
例如：/1.html?username=jack&password=1234，数据格式 k/v，追加是使用?连接，
之后每一对数据使用&连接
因为请求路径长度有限，所有GET请求提交的数据有限。
敏感数据会在地址栏显示,不适合做密码等数据提交
POST：提交的数据不再请求路径上追加（及不显示在地址栏上）
提交的数据大小不显示 -->
<!-- 表单 -->
<form action="" method="">
<!-- 此处的内容可以被提交到服务器 -->
</form>
<!-- 此处的内容在<form>标签外部，此处数据不能提交到表单 -->
<!-- <input> 标签用于获得用户输入信息，最常用的标签。
type属性
text：文本框，单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符
password：密码框，密码字段。该字段中的字符以黑圆显示
radio：单选框，表示一组互斥选项按钮中的一个，当一个按钮被选中，之前选中的按钮就变为非 选中的
submit：提交按钮。提交按钮会把表单数据发送到服务器。
一般不写name属性，否则将“提交”两 个字提交到服务器。
checkbox： 复选框
image: 按钮上的图片
file：文件上传组件,提供"浏览"按下可以选择需要上传文件
hidden：隐藏字段. 数据会发送给服务器，但浏览器不进行显示
reset：重置按钮。将表单恢复到默认值
button：普通按钮，常用于与JavaScript结合使用
name：元素名，如果需要表单数据提交到服务器，必须提供name属性值，服务器通过属性值获得提交 的数据
value属性：设置input标签的默认值。submit和reset为按钮显示数据
checked属性：单选框或复选框被选中
readonly：是否只读
disabled：是否可用
placeholder 提示，请输入用户名，
maxlength 最大输入字数
-->
<!--
<select> 下拉列表。
可以进行单选或多选。需要使用子标签 指定列表项
name属性：发送给服务器的名称
multiple属性：不写默认单选，取值为“multiple”表示多选。
size属性：多选时，可见选项的数目。
<option> 子标签：下拉列表中的一个选项（一个条目）。
selected ：勾选当前列表项
value ：发送给服务器的选项值。
-->
<!--
<textarea> 文本域。多行的文本输入控件。 cols属性：文本域的列数 rows属性：文本域的行数
<button type="button|reset|submit"> 按钮标签一般很少使用，提供“普通|重置|提交”功能，不同的浏览 器默认值不同。
-->
</body>
</html>
div + css
div就是html一个普通标签，进行区域划分。特性：独自占一行。独自不能实现复杂效果。必须结合CSS样式进行渲 染。
div通常其是块级元素
CSS 通常称为CSS样式或层叠样式表，主要用于设置HTML页面中的文本内容（字体、大小、对其方式等）、图片 的外形（高宽、边框样式、边距等）以及版面的布局等外观显示样式。
CSS可以使HTML页面更好看，CSS色系的搭配可以让用户更舒服，CSS+DIV布局更佳灵活，更容易绘制出用户需要的结构。
引入css样式
CSS使用非常灵活，及可以嵌入在HTML文档中，也可以是一个单独的文件，如果是单独的文件，则必须以.css为扩展名。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 行内样式 行内样式，是通过标签的style属性来设置元素的样式。 -->
<a style="color: #f00; font‐size: 30px;">行内样式</a>
<!-- 行内样式通过标签的属性来控制样式，这样并没有做到结构与表现（HTML展示结构、CSS显示效果）相分离，
所以一般很少使用。学习阶段有时候为了快速编程，偶有使用。 -->
<!-- 内部样式又称为内嵌式，是将CSS代码集中写在HTML文档的头部标签体中，并且使用style标签定义。 -->
<style type="text/css">
body{
background-color: aqua;
}
</style>
<!-- 内嵌式CSS样式只对其所在的HTML页面有效，可以对多处标签统一设置样式，因此，仅设计一个页面时，使用内嵌式是个不错的选择。
但如果是一个网站，不建议使用这种方式，因为他不能充分发挥CSS代码的重用优势。 -->
<!-- 外部样式又称为链入式，是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，
通过link标签将样 式连接到HTML文档中。 -->
<!-- 方式3：外部样式 rel="stylesheet" ,固定值，当前文件和引入文件的关系,rel是relationship的缩写，
stylesheet是样式表 type="text/css", 固定值，表示浏览器解析方式
href ，表示css文件位置 -->
<!-- <link rel="stylesheet" type="text/css" href="css/demo00.css"/> -->
<!-- 链入式最大的好处是同一个CSS样式表可以被不同的HTML页面链接使用，
同时一个HTML页面也可以通过多个link 标记链接多个CSS样式表。 -->
</body>
</html>
- 优先级
行内样式最优先
内嵌与外部样式，谁离引用的那段代码近，谁优先
原因是html是瀑布式加载
css选择器
要想将CSS样式应用于特定的HTML元素，首先需要找到该目标元素。在CSS中，执行这一任务的样式规则部分被称为选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
h1 {
color: #F00;
font‐size: 50px;
}
#demo1 {
color: #0f0;
}
.myClass {
color: fuchsia;
}
input[type="text"] {
background‐color: yellow;
}
input[type="password"] {
background‐color: green;
}
#d1 div {
color: red;
}
</style>
</head>
<body>
<!-- 元素/标签选择器 -->
<!-- 标记选择器最大的优点是能快速为页面中同类型的标记统一样式，
同时这也是他的缺点，不能设计差异化样式 -->
<h1>一切来的太快</h1>
<!-- id选择器使用“#”进行标识，后面紧跟id名 -->
<h1 id="demo1">金色的麦浪</h1>
<!-- 类选择器使用“.”（英文点号）进行标识，后面紧跟类名 -->
<font class="myClass">Java培训</font>
<!-- 类名即为HTML元素的class属性值，大多数HTML元素都可以定义class属性。
类选择器最大的优势是可 以为元素对象定义单独或相同的样式。 -->
<!-- 基本选择器的优先级 -->
<!-- id > class > 标签选择器 -->
<!-- 属性选择器 -->
<!-- 该选择器，是对“基本选择器”的扩展，对一组标签进一步过滤 -->
<style>
input[type="text"] {
background‐color: yellow;
}
input[type="password"] {
background‐color: green;
}
</style>
<!-- 包含选择器，两个标签之间使用空格，给指定父标签的所有后代标签设置样式，可以方便在区域内编写样式。 -->
<!--
空格代表父标签下的所有子标签
, 代表父标签和子标签
-->
<style>
#d1 div {
color: red;
}
</style>
<!-- 伪类选择器
在支持 CSS的浏览器中，链接的不同状态都可以不同的方式显示，
这些状态包括：活动状态，已被访问状态，未被 访问状态，和鼠标悬停状态。
书写有顺序！必须是 l v h a-->
<!-- 未访问的链接 -->
a:link {color: #FF0000}
<!-- 已访问的链接 -->
a:visited {color: #00FF00}
<!-- 鼠标移动到链接上 -->
a:hover {color: #FF00FF}
<!-- 选定的链接 -->
a:active {color: #0000FF}
</body>
</html>
css样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div {
/* solid 实线，none 无边，double 双线 */
border: #008000 solid 1px;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<!-- display:属性值
inline：此元素将显示为行内元素（行内元素默认的display属性值）
block：此元素将显为块元素（块元素默认的display属性值）
none：此元素将被隐藏，不显示，也不占用页面空间。 -->
<!-- 默认显示一行 ，边框环绕，高宽没有作用 -->
<span>显示1‐1</span>
<span>显示1‐2</span>
<!-- 每一行显示，高宽有作用 -->
<span style="display: inline;">显示2‐1</span>
<span style="display: none;">显示2‐2</span>
<!--
字体：color、font-size
背景色：background-color
-->
<!--
通常默认的排版方式，将页面中的元素从上到下一一罗列，而实际开发中，需要左右方式进行排版，就需要 使用浮动
选择器{float:属性值;}
常用属性值： left：元素向左浮动 right：元素向右浮动 none：元素不浮动（默认值）
由于浮动元素不再占用原文档流的位置，所以它会对页面中其他元素的排版产生影响。
如果要避免影响，需 要使用clear属性进行清除浮动。
选择器{clear:属性值;} 常用属性值： left：不允许左侧有浮动元素（清除左侧浮动的影响） right：不允许右侧有浮动元素（清除右侧浮动的影响） both：同时清除左右两侧浮动的影响
-->
<!-- <!‐‐默认上下布局‐‐> -->
<div>
<div>默认上下布局区域1‐1</div>
<div>默认上下布局区域1‐2</div>
</div>
<hr />
<!-- <!‐‐浮动左右布局‐‐> -->
<div>
<div style="float: left;">浮动左右布局浮动左右布局区域2‐1</div>
<div style="float: left;">浮动左右布局区域2‐2</div>
</div>
<!-- <!‐‐取消浮动，另起一行布局‐‐> -->
<div style="clear:both"></div>
<hr />
<div>
<div style="float: left;">取消浮动，另起一行布局‐取消浮动，另起一行布局‐取消浮动，另起一行布局‐区域2‐1</div>
<div style="float: left;">取消浮动，另起一行布局‐取消浮动，另起一行布局‐区域2‐2</div>
<div style="float: left;">取消浮动，另起一行布局‐区域2‐3</div>
</div>
</body>
</html>
css的盒子模型
CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
上、右、下、左的顺序分别设置各边的内边距
h1 {padding: 10px 0.25em 2ex 20%;}
单边内边距属性 也通过使用下面四个单独的属性，分别设置上、右、下、左内边距：
padding-top padding-right padding-bottom padding-left
边框：border
border-top-style border-right-style border-bottom-style border-left-style
外边距：margin
margin-top margin-right margin-bottom margin-left -->
</body>
</html>
网站用户注册案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>注册页面</title>
<style type="text/css">
/* 页面整体背景图 */
body {
background-image: url(img/bg.jpg);
}
/* 外层白色背景 */
.formId {
width: 700px;
height: 500px;
margin: 150px auto;
background-color: #FFFFFF;
padding-top: 30px;
padding-left: 150px;
}
/* 表单注册区域 */
.formReg {
width: 500px;
height: 450px;
border: 0px solid #333;
}
h3 {
color: #0000FF;
font-size: 20px;
text-align: center;
}
h3 span {
color: #000000;
font-size: 16px;
}
tr{
height: 35px;
}
.in{
width: 200px;
height: 30px;
margin-left: 10px;
}
</style>
</head>
<body>
<div class="formId">
<div class="formReg">
<h3>用户注册<span>USERREGISTER</span></h3>
<form action="#" method="post">
<table width="500px">
<tr>
<td align="right">用户名</td>
<td colspan="2">
<input class="in" name="username" placeholder="请输入用户名" type="text"></input>
</td>
</tr>
<tr>
<td align="right">密码</td>
<td colspan="2">
<input class="in" name="password" placeholder="请输入密码" type="password"></input>
</td>
</tr>
<tr>
<td align="right">确认密码</td>
<td colspan="2">
<input class="in" name="checkPassword" placeholder="请确认密码" type="password"></input>
</td>
</tr>
<tr>
<td align="right">email</td>
<td colspan="2">
<input class="in" name="email" placeholder="email" type="password"></input>
</td>
</tr>
<tr>
<td align="right">姓名</td>
<td colspan="2">
<input class="in" name="nameName" placeholder="请输入姓名" type="password"></input>
</td>
</tr>
<tr>
<td align="right">性别</td>
<td colspan="2">
<input name="sex" type="radio" checked="checked">男</input>
<input name="sex" type="radio">女</input>
</td>
</tr>
<tr>
<td align="right">出生日期</td>
<td colspan="2">
<input class="in" name="datetime" placeholder="年-月-日" type="text"></input>
</td>
</tr>
<tr>
<td align="right">验证码</td>
<td>
<input class="in" name="authCode" placeholder="请输入验证码" type="text"></input>
</td>
<td align="left">
<img style="margin-right: 120px;" src="img/checkcode.jpg" />
</td>
</tr>
<tr>
<td colspan="3" align="center">
<img src="img/btn.jpg" />
</td>
</tr>
</table>
</form>
</div>
</div>
<!-- <table align="center">
</table> -->
</body>
</html>
城市中，拿到奖金去商场会喜悦。小镇上，阴雨天看葫芦开花会喜悦。两种喜悦，可能是分不出高下的。
云边有个小卖部
张嘉佳
扫一扫
4991
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
