HTML 语言-摩杜云开发者社区

HTML 概述

HTML 是什么

超文本标记语言（Hyper Text Markup Language，HTML），就是我们看到的网页：

浏览器接收来自于服务器的网页源码。
经过浏览器渲染后的页面。

准备一个页面，名为welcom.html。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>WELCOME</title>
	</head>
	<body>
		hello,World!
		<h1>Welcom to Beijing!</h1>
	</body>
</html>

其中：

<!DOCTYPE html> 声明为 HTML5 文档

<html> 元素是 HTML 页面的根元素

<head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8（由于在大部分浏览器中直接输出中文会出现乱码，所以要在头部将字符声明为UTF-8）

<title> 元素描述了文档的标题

<body> 元素包含了可见的页面内容

<h1> 元素定义一个大标题

<p> 元素定义一个段落

保存后，运行结果为下图所示：

HTML 语言_属性值

HTML 与浏览器的关系

浏览器是解释和执行HTML 源码的工具。浏览器非常人性化，即使你写的HTML 代码不规范，浏览器也会尝试运行。尽管HTML 源码中没有根标签，浏览器也会完成渲染工作，自动把标签补齐。各种“苛刻”的要求，现在都没有了。

HTML 基本结构

即使代码在复杂，也是有规律可循的。这个规律，我们称为语法。

<!-- 规范的HTML 文档 -->
<html>                      <!-- HTML 文档的根标签，所有的HTML 内容理应都在此标签内部。 -->
    <head>                  <!-- 头部标签，该标签中的内容不会再页面中显示。 -->
        <title>WELCOME</title>
        <script>...</script>
    </head>
    <body>                  <!-- 主体标签 -->
        hello,world!
        <h1>Welcome to Beijing!</h1>
    </body>
</html

常用HTML 标签

识别HTML 常用标签

网页摘要信息

每个网页都会有摘要信息，网页摘要信息的作用：

有利于浏览器解析
有利于搜索引擎搜索

<title>你爱我，我爱你</title>
<meta name="keywords" content="我自横刀向天笑，自留肝胆两昆仑" />
<meta
      name="description"
      content="这两句是我个人比较喜欢的，不喜勿喷。"
/>

title 标签

<title> 标签，浏览器标签页标题。

<head>
    <title>Tom and Jeery </title>
</head>

meta 标签

<meta> 是对文档起到解释和说明的作用，在<head> 标签里。

<meta name = "" content = "" />

meta 是标签的名字，name 和content 是meta 标签的属性。

不同的属性值代表不同的含义：

keywords 是name 属性的属性值，代表整个页面的关键字，搜索引擎会收录这些关键词。

description 是name 属性的属性值，代表页面的描述性信息。

乱码问题，因为浏览器查看HTML 文档时候所使用的编码与HTML 文档原来的编码不一致造成的。

<meta charset = "utf-8" />
好想告诉你！

标题标签

<h1> ~ <h6> 定义了文档标题。

<meta charset = "utf-8">
<body>
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
</body>
<!--
* 数字越大，字体越小。
* 自动换行，前后隔行。
-->

段落标签

<p> 定义了一个单独的段落。注意：浏览器在解析HTML 的时候，会忽略换行。

<meta charset = "utf-8">
<h1>静夜思</h1>
<p>床前明月光，</p>
<p>疑是地上霜。</p>
<p>举头望明月，</p>
<p>我是郭德纲。</p>
<!--
* 自动换行，前后隔行。
-->

行控制标签

br 标签

HTML 中，换行回车符在代码中有效，但是浏览器中无效。想在浏览器中实现换行效果需要使用<br />。例子如下：

<meta charset = "utf-8">
<h1>静夜思</h1>
床前明月光，<br />
疑是地上霜。<br />
举头望明月，<br />
我是郭德纲。<br />

hr 标签

利用标签<hr /> 来实现水平线的效果。

<meta charset = "utf-8">
<body>
    <h1>静夜思</h1>
    <hr />    <!-- 相对于父元素100% 宽度-->
    床前明月光，<br />
    疑是地上霜。<br />
    举头望明月，<br />
    我是郭德纲！<br />
</body>

超链接

掌握a 标签用法及其作用

概述

超文本连接，能够实现从一个页面跳转到另外一个页面，也就是URL 跳转。

<a href="show.php?id=33" target="_blank">网游分级标准研究有初步成果 已上报至中央</a>

特点

<a>；
超链接功能；
双标签；
标签中文字，是显示在页面中的。
标签内部有属性，属性有属性值。

href 属性

使用href 属性指定页面跳转的地址。

<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <h1>查看新闻</h1>
        <a href="show.php?id=33">网游分级标准研究有初步成果 已上报至中央</a>
        <br />
        <a href="../cms/show.php?id=33">网游分级标准研究有初步成果 已上报至中央</a>
        <br />
        <a href="http://10.4.7.177/cms/show.php?id=33">网游分级标准研究有初步成果 已上报至中央</a>
    </body>
</html>

相对路径，以当前路径作为起点，进行URL 跳转。
绝对路径，直接带上协议。

target 属性

说明浏览器是否在新的标签页打开超链接。

在新的标签页打开：

target="_blank"

在当前标签页打开（缺省值）：

target=""

网址导航

页面间跳转。

<h1>网址导航</h1>
<a href = "http://www.baidu.com" target = '_blank'>百度</a>|
<a href = "http://www.bilibili.com/" target = '_blank'>哔哩哔哩</a>|
<a href = "https://www.acfun.cn" target = '_blank'>AcFun</a>

回到顶部

页面内的跳转。类似于文档的目录，当点击目录的时候，直接跳转到目录项所对应的位置。利用锚点fragment来实现。

<html>
    <head>
        <title>回到顶部</title>
        <meta charset="utf-8" />
    </head>
        <body name = "top" id = "top">
        <a href = "#mj1">事实...</a>
        <a href = "#mj2">月上...</a>
 
        <h1>静夜思</h1>
        <p>床前明月光</p>
        <p>疑是地上霜</p>
        <p>举头望明月</p>
        <p>我是郭德纲！</p>
        <br />
        <br />
        <br />
        <br />
        <br />
        <h1>名句</h1>
        <p id= "mj1" name = "mj1">事实胜于雄辩，疗效战胜一切！</p>
        <br />
        <br />
        <br />
        <br />
        <br />
        <p name= "mj2" id= "mj2">月上柳梢头，人约黄昏后。</p>
        <a href = "#top">回到顶部</a>
    </body>
</html>

图片标签

掌握图片标签的作用与用法

概述

在HTML 网页中插入图片，可以利用<img> 标签来实现。在引入图片的时候，需要指明图片的来源。

<img src="images/logo.gif" width="396" height="78" border="0">

特点

<img> 是单标签。

图片地址

使用src 属性，指定图片的路径：

绝对路径
相对路径

图片的宽高

width 和heigth 指定图片的宽和高，单位是像素（px）。当仅指定图片宽高其中一种属性的时候，图片会等比例缩放。也可以用百分比的形式指定宽高，宽高相对于父元素来说的。

引入图片

<meta charset="utf-8">
<img src="https://www.baidu.com/img/flexible/logo/pc/result.png" alt="">

注意

HTML 文档中并没有图片内容，有的只是图片的连接。浏览器会根据HTML 文档中图片的链接地址，再次发起HTTP 请求，请求图片资源。<img> 发起的是GET 请求。

以上说法并不完全正确，也可以将图片进行编码，强行塞进HTML 文档中。

<img src="data:img/png;base64,......" />

表格与表单的制作

表格

了解表格的作用
掌握表格的编写

概述

表格是一种二维结构，横行纵列。

表格由单元格组成。

表格是一种非常“强” 的结构：

每一行有相同的列数（单元格），每一列有相同的行数（单元格）
同一列的单元格，宽度（以最大的为准）相同，同列等宽；同行等高。

相关标签

table 标签

定义了表格框架。
可以使用border 属性指定表格的边框宽度。
可以使用width 属性指定表格的宽度，单位是px。
可以使用height 属性指定表格的高度，单位是px。

tr 标签

定义了表格行。
表格中有多少行，就需要写多少个<tr> 标签。

td 标签

定义了单元格。
每一行中有多少个单元格，就需要些多少个<td> 标签。
单元格的宽度，默认情况下与内容的宽度相同。
默认情况下，单元格中内容都是左对齐的，可以使用text-align 来控制内容对齐方式。

表格练习：简历练习

HTML 语言_属性值_02

完整代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table border="1" cellspacing="0" cellpadding="5" height="15" width="700">>
		<tr>
			<td style="text-align: center;">姓名</td>
			<td style="text-align: center;">李林</td>
			<td style="text-align: center;">性别</td>
			<td style="text-align: center;">男</td>
			<td style="text-align: center;">出生年月</td>
			<td style="text-align: center;">1975412</td>
			<td rowspan="3" style="text-align: center;"></td>
		</tr>
		<tr>
			<td style="text-align: center;">籍贯</td>
			<td style="text-align: center;">四川 南部</td>
			<td style="text-align: center;">民族</td>
			<td style="text-align: center;">汉</td>
			<td style="text-align: center;">身体状况</td>
			<td style="text-align: center;"></td>
			
		</tr>
		<tr>
			<td style="text-align: center;">政治面貌</td>
			<td style="text-align: center;">团员</td>
			<td style="text-align: center;">身高</td>
			<td style="text-align: center;">163</td>
			<td style="text-align: center;">外语程度</td>
			<td style="text-align: center;"></td>
			
		</tr>
		<tr>
			<td style="text-align: center;">所在学院</td>
			<td style="text-align: center;">成都理工校园</td>
			<td style="text-align: center;">学历</td>
			<td style="text-align: center;">大专</td>
			<td style="text-align: center;">曾任职务</td>
			<td colspan="2" style="text-align: center;"></td>
		</tr>
		<tr>
			<td style="text-align: center;">所学专业</td>
			<td colspan="2" style="text-align: center;">土木工程</td>
			<td colspan="2" style="text-align: center;">特长</td>
			<td colspan="2"></td>
		</tr>
		<tr>
			<td style="text-align: center;">毕业时间</td>
			<td colspan="2" style="text-align: center;">1998年</td>
			<td colspan="2" style="text-align: center;">联系电话</td>
			
			<td colspan="2" style="text-align: center;">1898124994</td>
		</tr>
		<tr>
			<td rowspan="3" style="text-align: center;">家庭住址</td>
			<td rowspan="3" colspan="2" style="text-align: center;">四川省南部县河坝镇崇仙井村
			4组49号</td>
			<td colspan="2" style="text-align: center;">邮政编码</td>
			<td colspan="2"></td>
		</tr>
		<tr>
			
			
			<td colspan="2" style="text-align: center;">个人网站</td>
			<td colspan="2"></td>
		</tr>
		<tr>
			
			
			<td colspan="2" style="text-align: center;">E-mall</td>
			<td colspan="2"></td>
		</tr>
		<tr>
			<td style="text-align: center;">个人简历</td>
			<td colspan="6" style="text-align: center;">
				2002年，在水电七分局福堂坝电站调压井施工员:
				2005年，武安水电站二号、二号引水支洞安全员:
				2006一2009年，毛尔兰水电站华水工程监理部:
				2010一2013年，广巴高速二标:
			</td>
		</tr>
		<tr>
			<td style="text-align: center;">个人特点</td>
			<td colspan="6">本人性格开朗、稳重、有活力，待人热情、真诚:对待工作认真负责，善于沟通、协调有较强的组织能力与团队精神，活波开明、乐观上进、有爱心并善于施教并行:上进心强、勤于学习能不断提高自身的能力与综合素质。在未来的工作中，我将以充沛的精力，刻苦钻研的精神来努力工作，稳定地提高自己的工作能力，与企业同步发展。</td>
		</tr>
		<tr>
			<td style="text-align: center;">社会实践，经历</td>
			<td colspan="6">经历了这几年的工作，我感慨颇多，我们见到了社会的真实一面，实践生活中每一天遇到的情况还在我脑海里回旋，它给我们带来了意想不到的效果，更让我懂得了实诚信,讲原则，说到做至腹决不推卸责任:有自制力，做事情始终坚持有始有终，从不半途而废;肯学习,有问题不逃避社会实践经历愿意虚心向他人学习; 自信但不自负，不以自我为中心: 愿意以谦虚态度费扬接纳优越者
，权威者;
				
			</td>
		</tr>
		<tr>
			<td colspan="7" style="text-align: center;">相信您的信任与我的实力将为我们带来共回的成功!希望我能为咱们公司贡献自己的力量</td>
		</tr>
			
		</table>
		
	</body>
</html>

表单

了解表单的作用
掌握表单元素的作用

概述

表单提交：

从服务器角度讲，收集用户的输入数据。
从客户端角度来讲，向服务器提交数据的位置。

应用场景

搜索框、用户登录框、用户留言板、上传文件（头像，附件）。向服务器提交信息，也就是传参时，需要考虑通过什么方法，通过哪个参数名字传递给哪个页面。

提交参数时，需要考虑：

传参的方式GET 或POST；
参数的名字；
传参的页面；
提请内容的数据类型；

表单只是一个框架，很多功能需要表单元素来完成，例如文本框、按钮等等。

如图所示:

HTML 语言_HTML_03

表单要素

form 属性

<form method="" action="" target="_blank" enctype = "">
<!--    表单元素    -->
</form>

属性	说明
enctype	提交数据的形式； application/x-www-form-urlencode，默认值。 multipart/form-data，上传文件时使用。
method	提交方式； GET 方法（默认），参数在URL 中，显示提交，参数在URL 中可见； POST 方法，无长度限制，可以上传大文件，例如几M 大小的头像，附件等等。
action	表单信息提交的目标页面； # 或者默认，代表提交信息到当前页，也就是本页面； URL 地址，本站点或者其他站点。
target	是否在新的标签页打开目标地址； _self（默认值），当前标签页提交； _blank，在新的标签页打开。

表单元素

<input type= "" />

属性	说明
type	用来区分文本框的类型。
name id	标签的唯一标识符。用来表示当前文本框的名字。要服务器完成完整的交互传参，此属性必不可少。
value	代表表单元素控件的默认值；如果没有此属性，需要从用户获得。
disabled	代表控件禁用； disabled = "disabled"。

单行文本框

<input type="text" />

密码框

<input type = "password" />

单选框

在一个确定的范围中单选。

<input type = "radio" />

复选框

都可以选。

<input type = "checkbox" />

复选框要求每个选项，都有自己的name 和value 属性。

下拉列表

<select>
    <option >[选择月份]</option>
    <option >一月</option>
    <option >二月</option>
    ...
</select>

文本域

可以在文本域中输入多行文本。

注册协议：   <textarea cols = '40' rows = '10'>
欢迎注册，你同意了本协议：
1，
2，
3，
...
                   </textarea>

隐藏域

<input type = "hidden" name = "token" value = "12345678910jqka">

表单中的隐藏域，用户是看不见的，但是源代码中有显示。
隐藏域中的内容依然会被提交到服务器。

文件域

<input type="file" />

要求：

method="post";
enctype = "multipart/form-data"。

按钮

普通按钮，type = "button"。

<input type = "button" value = "普通按钮">

重置按钮，type = "reset"。

<input type = "reset" value = "重置按钮"><br />

提交按钮，type = "submit"。

<input type = "submit" value = "提交按钮">

上图所示图片

完整代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户注册</title>
	</head>
	<body>
		  <h1>用户注册</h1>
		    <form 
		        action="目标页面"
		        method="传出方法，GET 或者POST"
		        target="_blank:浏览器新标签也打开提交的表单；_self:在当前标签页打开"
		        enctype="multipart/form-data：只在有文件上传的时候使用；application/x-www-form-urlencoded;默认传出方法"
		    >
		        用户名：<input type="text" name="username"><br />  
				<!--username=admin-->
		        密码：<input type="password"><br />
		        确认密码：<input type="password"><br />
		        性别：<input type="radio" name="sex"> 男<input type="radio" name="sex"> 女 <br />
		        爱好：<input type="checkbox"> 吃饭<input type="checkbox"> 睡觉<input type="checkbox"> 打豆豆 <br>
		        生日：<input type="date"><br />
				籍贯：<select name="" id="">
					<option value="">【选择省份】</option>
					<option value="">黑龙江</option>
					<option value="">吉林</option>
					<option value="">辽宁</option>
					<option value="">北京</option>
					<option value="">广东</option>
					<option value="">山西</option>
					<option value="">湖北</option>
					<option value="">内蒙古</option>
					<option value="">浙江</option>
					<option value="">新疆</option>
				</select>
				<P>
		        注册协议：<br>
				</P>
		        <textarea name="" id="" cols="30" rows="10">
		欢迎注册，你同意了本协议，遵守以下条款：
		1.
		2.
		3.
		        </textarea><br>
		        头像上传：<input type="file"><br>
				<p>
		        <input type="button" value="普通按钮">
				</p>
				<p>
		        <input type="reset" value="重置按钮">
				</p>
				<p>
		        <input type="submit" value="提交按钮">
				</p>
		
		    </form>
 
	</body>
</html>