Web前端（一）HTML超文本标记语言
文章目录
-
一.Web前端开发介绍
-
-
- 1.Web概述
- 2.Web起源
- 3.Web的特点
- 4.Web工作原理
- 5.URL介绍
-
-
二.详细描述了网页的HTML架构.
在这一部分中：- 首先介绍了HTML的基本组成.
- 然后讨论了不同类型的HTML文件及其用途.
- 最后深入分析了基于不同规范与注释的应用场景和技术细节.
三.HTML标记
一.Web前端开发介绍
1.Web概述
2.Web起源
1984年蒂姆伯纳斯·李开发了互联网上的第一个导航页面，并创建了世界上第一个网站。
3.Web的特点
- 易导航和图形化界面
- 与平台无关
- 分布式结构
- 动态性
- 交互性
4.Web工作原理
5.URL介绍
URL统一资源定位器即为一种标识网络地址的方式。其构成包括协议类型、服务器地址及端口号、路径以及文件名五个主要部分。例如，在网页浏览器中访问该链接时会解析该地址。
二.HTML网页结构
Hypertext标记语言（HTML）即是一种用于表示网页内容的标记语言。它通过使用特定的标签来定义页面文档的结构与呈现形式，并经由浏览器解析后生成相应的内容最终将结果显示于网页界面中。
- 超文本指的是超链接
- 标记指的是标签
1). HTML文件在编辑器中被展示为纯文本内容，并可通过纯文本方式进行修改操作。
2). 在浏览器中打开HTML文件后，在线浏览时基于标签定义的内容会自动呈现为页面。通过点击当前页面的一个链接（超链接），可以在浏览窗口中快速导航至另一个页面。
1.HTML基本结构
2.HTML文档类型
目前常用的两种文档类型是xhtml 1.0和html5
3.HTML文档规范与注释
（1）文档规范
xHTML规定了文档编写的基本准则；而xHTML5则不一定全部遵循这些规范，默认情况下可能部分适用；具体执行方式需依据项目需求来决定。
所有标签名称须全部采用小写字母书写；
每个属性值都需要包裹在双引号内；
每个标签都应完整关闭；
图像元素必须包含清晰的文字说明。
（2）HTML注释
在HTML文档的代码中是可以插入标注信息的；这些标注内容为程序提供了解释与说明；这些标注内容不被页面显示；HTML代码中插入标注的方式是在脚本标签内使用 标签包裹即可完成。
三.HTML标签
1.文本标签
2.换行标签
3.列表标签
4.div与span标签
5.图片标签img
标签用于定义HTML页面中的图像。其中两个必需属性是src和alt。src字段指定图片的名称及其对应的URL地址。title属性用于提供图片加载成功时的文字提示信息。alt字段在图片无法加载时显示提示信息。width和height参数分别表示图片的宽度和高度。
6.超连接标签
<a href=" ">...</a> 超级链接标签属性：
- href属性必须指定目标页面的URL地址。
- target属性用于指定目标页面的打开方式。
_blank _blank 新窗口 ,
_self _self 本窗口（默认）
title属性：用于设置文字提示信息。
标题：标题
锚点链接：
<a href="#a1">跳到a1处</a>7.表格标签
在 HTML 文档中,广泛使用表格来存放网页上的文本和图像;
表头: 表格标题为... 行: 每一行对应... 单元格(表示列的概念): 单元格用于标识... 表头(th): 表头需加粗且居中显示 表格标题: 图表标题应包含关键信息 标签合并: 通过rowspan实现多行效果 列合并: 使用colspan扩展展示范围 标签常用属性: 边框大小设置为... 宽度设置为... 高度设置为... 对齐方式设为...
- center
- left
- right
表格标签小练习：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--8行8列-->
<table border="1px" width="40%" bordercolor="blue" align="center" style="text-align: center">
<caption>课程表</caption>
<tr>
<th>项目</th>
<th colspan="5">上课</th>
<th colspan="2">休息</th>
</tr>
<tr>
<th>星期</th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
<th>星期六</th>
<th>星期日</th>
</tr>
<tr>
<td rowspan="4">上午</td>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>英语</td>
<td>物理</td>
<td>计算机</td>
<td rowspan="4">休息</td>
</tr>
<tr>
<td>数学</td>
<td>数学</td>
<td>地理</td>
<td>历史</td>
<td>化学</td>
<td>计算机</td>
</tr>
<tr>
<td>化学</td>
<td>语文</td>
<td>体育</td>
<td>计算机</td>
<td>英语</td>
<td>计算机</td>
</tr>
<tr>
<td>政治</td>
<td>英语</td>
<td>体育</td>
<td>历史</td>
<td>地理</td>
<td>计算机</td>
</tr>
<tr>
<td rowspan="2">下午</td>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>英语</td>
<td>物理</td>
<td>计算机</td>
<td rowspan="2">休息</td>
</tr>
<tr>
<td>数学</td>
<td>数学</td>
<td>地理</td>
<td>历史</td>
<td>化学</td>
<td>计算机</td>
</tr>
</table>
</body>
</html>
8.表单标签
常用属性：
action属性:提交的目标地址(URL)
method属性:提交方式:get(默认)和post
get方式:
URL地址栏可见
长度受限制
相对不安全.
post方式:
URL地址不可见
长度不受限制
相对安全.
input 表单项标签input定义输入字段，用户可在其中输入数据。
在 HTML 5 中，type 属性有很多新的值。
type属性 :表示表单项的类型:值如下:
text:单行文本框
password:密码输入框
checkbox:多选框 注意要提供value值
radio:单选框 注意要提供value值
file:文件上传选择框
button:普通按钮
submit:提交按钮
image:图片提交按钮
reset:重置按钮, 还原到开始(第一次打开时)的效果
hidden:主表单隐藏域,要是和表单一块提交的信息,但是不需要用户修改
email 用于应该包含 e-mail 地址的输入域
url 用于应该包含 URL 地址的输入域
number 用于应该包含数值的输入域。
max 规定允许的最大值
min 规定允许的最小值
step 规定合法的数字间隔（如果 step=“3”，则合法的数是 -3,0,3,6 等）
value 规定默认值
range 用于应该包含一定范围内数字值的输入域，显示为滑动条
max 规定允许的最大值
min 规定允许的最小值
step 规定合法的数字间隔（如果 step=“3”，则合法的数是 -3,0,3,6 等）
value 规定默认值
日期选择器 Date pickers
date - 选取日、月、年
month - 选取月、年
week - 选取周和年
time - 选取时间（小时和分钟）
datetime - 选取时间、日、月、年（UTC 时间）
datetime-local - 选取时间、日、月、年（本地时间）
9.下拉列表标签
<select>...</select> 标签创建下拉列表。
name属性：定义名称,用于存储下拉值的
size：定义菜单中可见项目的数目，html5不支持
disabled 当该属性为 true 时，会禁用该菜单。
multiple 多选
<option>... </option> 下拉选择项标签,用于嵌入到<select>标签中使用的;
*value属性:下拉项的值
*selected属性:默认下拉指定项10.文本域标签
<textarea>...</textarea> 多行的文本输入区域
name :定义名称,用于存储文本区域中的值。
cols ：规定文本区内可见的列数。
rows ：规定文本区内可见的行数。
disabled： 是否禁用
readonly： 只读11.按钮标签
<button>...</button> 标签定义按钮。
<fieldset> --fieldset 元素可将表单内的相关元素分组。12.案例代码
<body>
请选择你的出生地：
<select name="biradd">
<option value="">---请选择---</option>
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="chongqing">重庆</option>
</select><br>
*********留言板**********<br>
<form aution"发送地址"="" method="post">
<textarea cols="30" rows="10">请在这里输入...</textarea><br>
<input type="submit" value="提交">
<input type="reset" value="重置"><br>
</form><br>
********请选择你要上传的文件*******<br>
<input type="file" name="myfile">
</body>
实现用户登录页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table align="center" style="width:535px; height:300px; background-image: url('./img/mailphoto.jpg') ">
<tr>
<td width="45%" height="40px"></td>
<td colspan="2" style="text-align: center"><h1>用户登录</h1></td>
</tr>
<tr>
<td width="45%" height="20px"></td>
<td style="text-align: right">用户名</td>
<td><input type="text"></td>
</tr>
<tr>
<td width="45%" height="20px"></td>
<td style="text-align: right">密码</td>
<td><input type="password"></td>
</tr>
<tr>
<td width="45%" height="20px"></td>
<td colspan="2" style="text-align: center">
<input type="submit" value="进入邮箱">
<input type="reset" value="重新填写">
</td>
</tr>
<tr>
<td width="45%" height="30px"></td>
<td colspan="2" style="text-align: center">
<a href="#">找回密码</a>
<a href="#">注册新用户</a>
</td>
</tr>
</table>
</body>
</html>
13.html内嵌框架
<iframe>标签会创建包含另外一个html文件的内联框架(即行内框架)src 属性用于指定外部 HTML 文件的路径。
frameborder 属性决定了网页元素是否具有边框。
scrolling 属性决定了网页元素是否具有滚动条。
<iframe src="http://www..." frameborder="0" scrolling="no"></iframe>14.内嵌框架与a标签配合使用
标签的目标属性允许将外部链接内容嵌入到当前页面中的 iframe 区域中。代码如下:
