这篇博客详细介绍了HTML的基础知识，包括HTML的作用、基本语法、重要标签的使用，如标题、字体、图片、列表、表格和表单。通过案例分析和代码实现，帮助读者快速掌握HTML页面构建。
-html
今日内容
- 使用html的排版标签编写“网站信息页面”
- 使用html的图片标签编写“图片显示页面”
- 使用html的列表标签编写“友情链接页面”
- 使用html的表格标签编写“首页”
- 使用html的表单相关标签
学习目标
-
了解HTML语言的作用
-
能够使用h1~h6、hr、p、br 等与文本有关的标签
-
能够使用有序列表ul-li和无序列表ol-li显示列表内容
-
能够使用图片img标签把图片显示在页面中
-
能够使用超链接a标签跳转到一个新页面
-
能够使用table、tr、td标签定义表格
-
能够制作网站首页
-
能够使用表单form标签创建表单容器
-
能够使用表单中常用的input标签创建输入项
-
能够使用表单select标签定义下拉选择输入项
-
能够使用表单textarea标签定义文本域
今日学习标签总览
一天的学习需要使用众多独立没有关联的标签，为了大家更好的吸收，现给出标签总览，以“重要程度”排序。例如：“表格标签”为今天最重要的标签。
第一章 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结构都是由标签组成
- 标签名预先定义好的，我们只需要了解其功能即可。
- 标签名不区分大小写
- 通常情况下标签由开始标签和结束标签组成。例如：
- 如果没有结束标签，建议以/结尾。例如：
-
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注释
-
格式：
-
注释特点：
- 浏览器查看时，不显示。右键查看源码可以看到。
- 注释标签不能嵌套。
- 注释特殊用法，为不同的浏览器提供不同的解决方案 （了解）
第二章 基本标签
下面我们开始一个一个的介绍，为了方便演示，创建一个“01.demo.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 />插入单个换行。
<!-- 段落标签 -->
<p>
传智播客是高端培训机构，致力于服务各大软件企业，解决当前软件开发技术飞速发展，而企业招不到优秀人才的困扰。<br/>
目前，“中关村黑马程序员训练营”已成长为行业“学员质量好、课程内容深、企业满意”的移动开发高端训练基地，并被评为中关村软件园重点扶持人才企业。
</p>
2.5 案例 网站信息显示
案例介绍
通常在一个网站中都会有关于公司的介绍,那么我们就来完成这样的案例
当然，大家现在还不知道怎么来完成这个案例，因为这个案例中需要使用很多HTML中的标签。
案例相关标签
本案例中需要使用的标签如下：
-
<h1></h1> -
<hr /> -
<font> -
<b></b> -
<i></i> -
<p></p> -
<br />
案例分析
知识点分析
需要的使用标签已经介绍完成，现在我们一次分析一下“公司介绍”基本信息不同的地方都使用了那些标签。
-
“公司介绍”，需要使用标题标签完成
<hn>，例如：<h3> -
“中关村黑马程序员训练营” 需要使用字体标签完成
<font> -
“传智播客” 需要斜体
<i>和 粗体<b>组合完成 -
这个文档被划分成4个区域，每一个区域之间有定义的间隔，需要使用段落标签
<p>完成 -
第2行或 第3行是一个普通的换行，在html标签中，需要使用
<br/>完成
步骤分析
-
创建03.案例：显示信息页面.html
-
复制需要编写的内容
-
使用标题标签
修饰“公司简介”
-
使用标题标签
添加分隔线 -
使用段落标签
和
划分区域 -
使用字体标签 修饰“中关村黑马程序员训练营”
-
使用格式化标签 修饰“传智播客”
代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>公司简介</h1>
<hr/>
<p>
<font color="red">“中关村黑马程序员训练营”</font>是由<b><i>传智播客</i></b>联合中关村软件园、优快云，并委托传智播客进行教学实施的软件开发高端培训机构，致力于服务各大软件企业，解决当前软件开发技术飞速发展，而企业招不到优秀人才的困扰。<br/>
目前，“中关村黑马程序员训练营”已成长为行业“学员质量好、课程内容深、企业满意”的移动开发高端训练基地，并被评为中关村软件园重点扶持人才企业。
</p>
<p>
黑马程序员的学员多为大学毕业后，有理想、有梦想，想从事IT行业，而没有环境和机遇改变自己命运的年轻人。黑马程序员的学员筛选制度，远比现在90%以上的企业招聘流程更为严格。任何一名学员想成功入学“黑马程序员”，必须经历长达2个月的面试流程，这些流程中不仅包括严格的技术测试、自学能力测试，还包括性格测试、压力测试、品德测试等等测试。毫不夸张地说，黑马程序员训练营所有学员都是精挑细选出来的。百里挑一的残酷筛选制度确保学员质量，并降低企业的用人风险。
</p>
<p>
中关村黑马程序员训练营不仅着重培养学员的基础理论知识，更注重培养项目实施管理能力，并密切关注技术革新，不断引入先进的技术，研发更新技术课程，确保学员进入企业后不仅能独立从事开发工作，更能给企业带来新的技术体系和理念。
</p>
<p>
一直以来，黑马程序员以技术视角关注IT产业发展，以深度分享推进产业技术成长，致力于弘扬技术创新，倡导分享、 开放和协作，努力打造高质量的IT人才服务平台。
</p>
</body>
</html>
2.6 图片标签：<img>
<img>在html页面中引用一张图片
-
src ：指定需要显示图片的URL（路径）。
-
alt ：图片无法显示时的替代文本。
-
width ：设置图像的宽度。
-
height ：定义图像的高度。
<!--显示图片“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 案例 网站列表页面显示
案例介绍
在页面中显示文字和图片我们已经完成了，那么如果想在页面中显示一组友情链接信息，效果如下：
点击这几个链接，可以跳转到相应的网站上.那么现在我们就来实现这样的效果
案例分析
知识点分析
代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul type="square">
<li><a href="../案例一：网站信息页面的显示/案例一：网站信息页面的显示.html">传智播客</a></li>
<li><a href="http://www.baidu.com" target="_self">百度</a></li>
<li><a href="http://www.163.com" target="_blank">网易</a></li>
<li>百合</li>
</ul>
</body>
</html>
2.11 表格标签<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*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*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.12 案例 网站首页显示
案例介绍
为了让大家熟练的应用表格布局，本案例我们将使用表格完成比较复杂的首页编写。
案例分析
知识点分析
根据对首页页面的分析，我们将采用表格嵌套的方式绘制。首页绘制一个71的表格用于作为外围的整体结构，然后给每一行分别添加表格绘制自己的模块，有13表格，有2*7表格。对于第三行轮播条暂时不编写，需要使用js。（前端课程 第3天和第4天讲解）
代码实现
整体布局
绘制整体布局，使用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：文本框，单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符
- password：密码框，密码字段。该字段中的字符以黑圆显示。
- radio：单选框，表示一组互斥选项按钮中的一个。当一个按钮被选中，之前选中的按钮就变为非选中的
- submit：提交按钮。提交按钮会把表单数据发送到服务器。一般不写name属性，否则将“提交”两个字提交到服务器。
因为不同项目注册需要的字段不同，需要完成的案例中没有覆盖所有的表单元素，以下标签使用也需要大家掌握。
- checkbox： 复选框
- image: 按钮上的图片
- file：文件上传组件,提供"浏览"按下可以选择需要上传文件.
- hidden：隐藏字段. 数据会发送给服务器，但浏览器不进行显示。
- reset：重置按钮。将表单恢复到默认值。
- button：普通按钮，常用于与JavaScript结合使用。
-
name：元素名，如果需要表单数据提交到服务器，必须提供name属性值，服务器通过属性值获得提交的数据。
-
value属性：设置input标签的默认值。submit和reset为按钮显示数据
-
checked属性：单选框或复选框被选中。
-
readonly：是否只读
-
disabled：是否可用
-
3.3 下拉列表标签： <select>
<select>下拉列表。可以进行单选或多选。需要使用子标签指定列表项- name属性：发送给服务器的名称
- multiple属性：不写默认单选，取值为“multiple”表示多选。
- size属性：多选时，可见选项的数目。
<option>子标签：下拉列表中的一个选项（一个条目）。- selected ：勾选当前列表项
- value ：发送给服务器的选项值。
3.4 文本域标签： <textarea>（了解）
<textarea>文本域。多行的文本输入控件。- cols属性：文本域的列数
- rows属性：文本域的行数
3.5 按钮标签： <button> （了解）
<button type="button|reset|submit">按钮标签一般很少使用，提供“普通|重置|提交”功能，不同的浏览器默认值不同。
扫一扫
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
