html
第一章 HTML 简述
1.1 什么是HTML
标签体
HTML：超级文本标记语言（HyperText Markup Language）
-
“超文本”就是指页面内可以包含图片、链接等非文字内容。
-
“标记”就是使用标签的方法将需要的内容包括起来。例如：
<a>www.itcast.cn</a>
1.2 HTML能干什么
HTML用于编写网页。平时上网通过浏览器我们看到的大部分页面都是由html编写的。在浏览器访问网页时，可以通过“右键/查看网页源代码”看到具体的html代码。
网页内容包含：HTML代码、CSS代码、JavaScript代码等内容。
-
HTML代码：用于展示需要显示的数据。
-
CSS代码：使显示的数据更佳好看。
-
JavaScript代码：使整个页面显示的数据具有动画效果。
网页根据内容是否改变分为：静态页面、动态页面
-
静态页面：编写之后在浏览器不再改变的网页。HTML就是用于编写静态网页的。
-
动态页面：会根据不同的情况展示不同的内容。例如：登录成功后右上角显示用户名。
1.3 HTML语音特点
-
HTML文件不需要编译，直接使用浏览器阅读即可
-
HTML文件的扩展名是*.html 或 *.htm
-
HTML结构都是由标签组成
- 标签名预先定义好的，我们只需要了解其功能即可。
- 标签名不区分大小写 标签体
- 通常情况下标签由开始标签和结束标签组成。例如：<a 属性名=“属性值” href=“01_html”>标签体
- 如果没有结束标签，建议以/结尾。例如：
-
HTML结构包括两部分：头head和体body
1.4 HTML入门代码
-
创建“文本文档”，重命名“xxx.html”。文件名自定义，扩展名为html。
-
右键/打开方式/记事本，开发html文件，并编写如下内容
<html>
<head>
<title>这是标题</title>
</head>
<body>
这里是正文
</body>
</html>
以上使用的标签组成了HTML页面的基本结构，现将所有标签进行陈述：
-
<html>整个页面的根标签，理论上一个页面只需要一个，由头和体组成。 -
<head>头标签，用于引入脚本、导入样式、提供元信息等。一般情况下头标签的内容在浏览器端都不显示。 -
<body>体标签，是整个网页的主体，我们编写的html代码基本都在此标签体内。
1.5 环境搭建HBuilder
使用“记事本”开发效率低，现阶段比较流程的前端IDE（集成开发环境）是HBuilder，为了统一环境，要求所有同学的都安装HBuilder，参考“1.HBuilder安装.doc”。
提供模板代码，使用“HBuilder”创建01.模板.html页面。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" /> <!-- 设置html页面的编码，今天最后讲解-->
<title>标题</title>
</head>
<body>
正文
</body>
</html>
在模板代码中，我们使用到了HTML注释
-
格式：
-
注释特点：
- 浏览器查看时，不显示。右键查看源码可以看到。
- 注释标签不能嵌套。
- 注释特殊用法，为不同的浏览器提供不同的解决方案
第二章 基本标签
2.1 水平线标签：<hr />
<hr /> 标签在 HTML 页面中创建一条水平分隔线，用于定义内容中的主题变化。
-
size属性：水平线的高度，单位像素
-
noshade属性：没有阴影，取值：noshade，表示显示纯色
<!--水平线-->
<hr />
<hr size="5"/>
<hr noshade="noshade" />
2.2 字体标签 ：<font>
<font> 用于设置字体尺寸、字体颜色等。
-
size属性：设置字体的大小。可能的值：从 1 到 7 的数字。浏览器默认值是 3。
-
color属性：设置字体的颜色
-
颜色的取值：#xxxxxx 或 colorname
-
#xxxxxx 表示使用红绿蓝三原色设置颜色。
- 红绿蓝分别取值：00 – FF，此处使用16进制。（FF就是十进制的255）
- #000000 表示黑色，#FFFFFF白色
- #FF0000红色，#00FF00绿色，#0000FF蓝色
- 红绿蓝2位取值相同可以省略成1位。例如：#112233 简化成#123
-
colorname 使用英文单词确定颜色。red 红色，blue 蓝色，green绿色
-
<!--字体-->
<font size="7">我个大</font>
<font color="#FF0000">我很红</font>
<font color="blue">我是蓝色的</font>
2.3 格式化标签： <b> <i>
<b>粗体
<i>斜体
<!-- 格式化-->
<b>粗体</b>
<i>斜体</i>
2.4 段落标签：<p> <br/>
<p>定义段落。p 标签会自动在其前后创建一些空白。
<br />插入单个换行。
2.5 案例 网站信息显示
案例介绍
通常在一个网站中都会有关于公司的介绍,那么我们就来完成这样的案例
当然，大家现在还不知道怎么来完成这个案例，因为这个案例中需要使用很多HTML中的标签。
案例相关标签
本案例中需要使用的标签如下：
-
<h1></h1> -
<hr /> -
<font> -
<b></b> -
<i></i> -
<p></p> -
<br />
案例分析
需要的使用标签已经介绍完成，现在我们一次分析一下“公司介绍”基本信息不同的地方都使用了那些标签。
-
“公司介绍”，需要使用标题标签完成
<hn>，例如：<h3> -
“公司理念” 需要使用字体标签完成
<font> -
“公司名称” 需要斜体
<i>和 粗体<b>组合完成
步骤分析
-
创建案例：显示信息页面.html
-
复制需要编写的内容
-
使用标题标签<\h1>修饰“公司简介”
-
使用标题标签<\hr>添加分隔线
-
使用段落标签<\p>和<\br>划分区域
-
使用字体标签<\font> 修饰“公司理念”
-
使用格式化标签<\b> <\i> 修饰“公司名称”
2.6 图片标签：<img>
<img>在html页面中引用一张图片
-
src ：指定需要显示图片的URL（路径）。
-
alt ：图片无法显示时的替代文本。
-
width ：设置图像的宽度,单位像素px。
-
height ：定义图像的高度,单位像素px。
<!--显示图片“registImg.jpg”-->
<img src="img/registImg.jpg" alt="剁手不够解恨" width="200px" height="200px" title="鼠标移上显示"/>
<img src="img/registImg2.jpg" alt="剁手不够解恨" width="200px" height="200px" title="鼠标移上显示"/>
2.7 案例 网站图片页面显示案例
案例介绍
通常在一个网站中都会有图片显示，那么我们就来完成这样的案例
案例分析
步骤分析
-
创建案例二:网站图片页面显示.html
-
使用图片标签标签的src属性引入图片
代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<img src="logo2.png" height="50" width="200"/>
<img src="header.png" height="50" width="250"/>
</body>
</html>
2.8 列表标签：<ol><ul>
-
<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>
2.9 超链接标签<a>
<a>标签是超链接，是在html页面提供一种可以访问其他位置的实现方式。
- href：用于确定需要显示页面的路径（URL）
- target：确定以何种方式打开href所设置的页面。常用取值：_blank、_self 等
- _blank 在新窗口中打开href确定的页面。
- _self 默认。使用href确定的页面替换当前页面。
<!--超链接-->
<a href="http://www.itcast.cn" target="_self">
以默认方式打开
</a><br />
<a href="http://www.itheima.com" target="_blank">
以新窗口方式打开
</a><br />
2.10 表格标签<table><tr><td>
HTML表格由
标签以及一个或多个、| 或 | 标签组成。 |
|---|
-
<table>是父标签，相当于整个表格的容器。- border 表格边框的宽度。
- width 表格的宽度。
- cellpadding 单元边沿与其内容之间的空白。
- cellspacing 单元格之间的空白。
- bgcolor 表格的背景颜色。
-
<tr>标签用于定义行 -
<td>标签用于定义表格的单元格（一个列）- colspan 单元格可横跨的列数。
- rowspan 单元格可横跨的行数。
- align 单元格内容的水平对齐方式, 取值：left 左 、right 右、center 居中。
- nowrap 单元格中的内容是否折行。
-
<th>标签用于定义表头。单元格内的内容默认居中、加粗。
练习1：编写3*3表格，使用修饰表头
<!--3*3表格,设置宽度和边线，并显示1像素的边线-->
<table border="1" width="400px" cellpadding="0" cellspacing="0">
<tr>
<th>1标题</th>
<th>2标题</th>
<th>3标题</th>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
实例2：编写3*3表格，将第一行3列全部合并为1列
<!--3*3表格,将第一行全部合并-->
<table border="1" width="400px" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3" bgcolor="#ddd">a</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
实例3：编写3*3表格,将第一列3行全部合并1行
<!--3*3表格,将第一列全部合并-->
<table border="1" width="400px" cellpadding="0" cellspacing="0">
<tr>
<td rowspan="3" bgcolor="#ddd">1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>8</td>
<td>9</td>
</tr>
</table>
2.11 案例 网站首页显示
案例介绍
为了熟练的应用表格布局，本案例我们将使用表格完成比较复杂的首页编写。
案例分析
知识点分析
根据对首页页面的分析，我们将采用表格嵌套的方式绘制。首页绘制一个71的表格用于作为外围的整体结构，然后给每一行分别添加表格绘制自己的模块，有13表格，有2*7表格。对于第三行轮播条暂时不编写，需要使用js。
代码实现
整体布局
绘制整体布局，使用border标记边框，定位之后再删除。
<table border="1" style="width:100%;">
<tr>
<td>1</td><!--1行3列的表格-->
</tr>
<tr>
<td>2</td><!--1行2列的表格-->
</tr>
<tr>
<td>3</td><!--轮播条，暂时不写-->
</tr>
<tr>
<td>4</td><!--热门商品1-->
</tr>
<tr>
<td>5</td><!--广告-->
</tr>
<tr>
<td>6</td><!--热门商品2-->
</tr>
<tr>
<td>7</td><!--2行1列的表格-->
</tr>
</table>
完整案例，填充数据
填充数据，将数字替换真实案例的数据
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>itheima商城</title>
</head>
<body>
<table width="1200px" align="center">
<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>
<td colspan="3"><img src="img/1.jpg" width="1200px"></td>
</tr>
</table>
<h1 align="center">热门商品 <img src="img/title2.jpg"></h1>
<table width="1200px"align="center">
<tr align="center">
<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 align="center">
<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 align="center"><img src="img/ad.jpg" align="center" /></td></tr></table>
<table width="1200px"align="center">
<tr align="center">
<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 align="center">
<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 width="1200px" align="center">
<tr align="center">
<td> <img src="img/footer.jpg"width="1200px"></td>
</tr>
<tr align="center"><td>
<a href="#">关于我们</a>
<a href="#">关于我们</a>
<a href="#">关于我们</a>
<a href="#">关于我们</a>
<a href="#">关于我们</a>
<a href="#">关于我们</a>
</td>
</tr>
</table>
</body>
</html>
第三章 表单相关标签
3.1 表单标签：<form>
<form>表单标签，在html页面创建一个表单，表单标签在浏览器上没有任何显示。如果数据需要提交到服务器，负责搜集数据的标签必须存放在表单标签体内容。- action属性：请求路径，确定表单提交到服务器的地址（路径）
- method属性：请求方式。常用的取值：GET、POST
- GET：默认值
- 提交的数据追加在请求路径上。例如：/1.html?username=jack&password=1234，数据格式k/v，追加是使用?连接，之后每一对数据使用&连接
- 因为请求路径长度有限，所有GET请求提交的数据有限。
- 敏感数据会在地址栏显示,不适合做密码等数据提交
- POST：
- 提交的数据不再请求路径上追加（及不显示在地址栏上）
- 提交的数据大小不显示
<body>
<!--表单-->
<form action="" method="">
<!--此处的内容可能被提交到服务器-->
</form>
<!--此处的内容在<form>标签外部，此处数据不能提交到表单-->
</body>
3.2 输入域标签 ：<input>
-
<input>标签用于获得用户输入信息，type属性值不同，搜集方式不同。最常用的标签。- type属性
- text:普通文本
- password:密码输入框,里边的密码以黑色的小圆点显示
- radio:单选框
- checkbox:多选框
- file:上传文件
- image:上传图片使用
- hidden:隐藏域,存储数据使用,不会在浏览器页面显示
- botton:普通按钮,配合js使用
- reset:重置按钮,把表单的恢复到默认状态(清空表单)
- submit:提交按钮,把表单的数据,提交到服务器。
- type属性
<!--创建一张表单--> <form action="#" method="get"> <!--text:普通文本--> 用户名:<input type="text" /><br /> <!--password:密码输入框,里边的密码以黑色的小圆点显示--> 密码:<input type="password"/><br /> <!-- radio:单选框 标签的属性: name:设置标签的名称,同名称的radio标签互斥 checked:设置radio标签的默认选择的值 --> 请选择您的性别:<br /> 男<input type="radio" name="sex" checked="checked"/> 女<input type="radio" name="sex"/> <br /> <!-- checkbox:多选框 --> 请选择您的爱好:<br /> 篮球<input type="checkbox"/> 足球<input type="checkbox"/> 羽毛球<input type="checkbox"/> 乒乓球<input type="checkbox"/> <br /> <!-- file:上传文件使用 --> <input type="file"/><br /> <!-- image:上传图片使用 属性: src:要上传图片的路径 height:设置图片的高度,单位是像素 width:设置图片的宽度,单位是像素 --> <input type="image" src="img/2.jpg" height="100px" width="70px"/><br /> <!-- hidden:隐藏域,存储数据使用,不会在浏览器页面显示 --> <input type="hidden" /><br /> <!-- botton:普通按钮,配合js使用 属性值: value:设置按钮上显示的文字 --> <input type="button" value="点我试试"/><br /> <!-- reset:重置按钮,把表单的恢复到默认状态(清空表单) --> <input type="reset" /><br /> <!-- submit:提交按钮,把表单的数据,提交到服务器。 --> <input type="submit" /><br /> </form>- name：元素名，如果需要表单数据提交到服务器，必须提供name属性值，服务器通过属性值获得提交的数据。
- value属性：设置input标签的默认值。submit和reset为按钮显示数据
- checked属性：单选框或复选框被选中。
- readonly：是否只读
- disabled：是否可用
<form action="#" method="post"> 用户名:<input type="text" name="username" value="请输入用户名" readonly="readonly"/> 密码:<input type="password" name="password" value="请输入密码" disabled="disabled"/> <br /> 用户名:<input type="text" name="username" placeholder="请输入用户名"/> 密码:<input type="password" name="password" placeholder="请输入密码"/><br /> <br /> </form>
3.3 下拉列表标签： <select>
<select>下拉列表。可以进行单选或多选。需要使用子标签指定列表项- name属性：发送给服务器的名称
- multiple属性：不写默认单选，取值为“multiple”表示多选。
- size属性：多选时，可见选项的数目。
<option>子标签：下拉列表中的一个选项（一个条目）。- selected ：勾选当前列表项
- value ：发送给服务器的选项值。
<!--
select标签:是form子标签
下拉选项标签
子标签:option,下拉选的列表项,一个select标签中包含了多个option标签
-->
<select>
<option>北京市</option>
<option>南京市</option>
<option>天津市</option>
</select>
<select name="city" multiple="multiple" size="2">
<option>北京市</option>
<option>南京市</option>
<option>天津市</option>
</select>
<select name="city">
<option>北京市</option>
<option selected="selected">南京市</option>
<option value="tj">天津市</option>
</select>
3.4 文本域标签： <textarea>
<textarea>文本域。多行的文本输入控件。- cols属性：文本域的列数
- rows属性：文本域的行数
<!--
textarea:是form子标签
多行文本域,已经被淘汰了,被文本编辑器取代了
属性:
rows:设置文本域显示的行数
cols:设置文本显示的列数
-->
<textarea rows="10" cols="10"></textarea>
3.5 按钮标签： <button>
<button type="button|reset|submit">按钮标签一般很少使用，提供“普通|重置|提交”功能，不同的浏览器默认值不同。
309
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
