为了能够更好地理解和认识 HTML5 网页,下面给出一个简单的、符合标准的 HTML5 文档结构代码。
DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>hellotitle>
head>
<body>
body>
html>
元素是 HTML 页面的根元素
元素包含了文档的元(meta)数据和标题head:一般用来存放 css 样式 js 代码。
utf-8:一种目前兼容性最好的字符编码。可以支持多国语言,不容易出现乱码。
案例:新建一个文本文档,命名为 index.txt,在里面输入如下所示的代码。
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的第一个网页title>
head>
<body>
<h1>这是我的第一个网页h1>
<h2>程序猿最烦两件事h2>
<p>第一件事是别人要他给自己的代码写文档,p>
<p>第二件呢?是别人的程序没有留下文档。p>
body>
html>
然后另存为修改字符编码为 UTF-8,并将文本文档的后缀名改为 html,使用浏览器打开,这就是第一个网页。
HTML5 中按功能划分可分为:基础、格式、表单、框架、图像、音频/视频、链接、列表、表格、样式/节、元信息、编程,具体描述如下所示。由于常用的不多我们将其分为基础格式元素、表单元素、框架图形链接列表元素和表格块节元信息元素。
HTML 的本质是文本文件,操作文本文件的的基本方式是记事本,在实际开发中我们不会使用记事本,而作为开发利器的 idea 或者 HBuilderX 在开发 HTML 方面也是非常出众的。
使用 idea 创建一个企业级 web 应用,并配置浏览器。
web 应用的 HTML 页面一般存放在 web 文件夹下,在下面新建一个 index 的 HTML 文件,进入如下的测试阶段。
包括基础与格式元素,常用的都已经标注出来了。
<h1>to<h6> 定义HTML标题
<p> 定义段落
<br> 定义简单的换行
<hr> 定义水平线
定义注释
<acronym> 定义只取首字母的缩写
<abbr> 定义缩写
<address> 定义文档作:者或拥有者的联系信息
<b> 定义粗体文本
<bdi> 定义文本的文本方向,使其脱离周围文本的方向设置
<bdo> 定义文字方向
<big> 定义大号文本
<blockquote> 定义长的引用
<cite> 定义引用(citation)
<code> 定义计算机代码文本
<del> 定义被删除文本
<dfn> 定义项目
<em> 定义强调文本
<font> 定义文本的字体、尺寸和颜色
<i> 定义斜体字
<ins> 定义被插入文本
<kbd> 定义键盘文本
<mark> 定义有记号的文本
<meter> 定义预定义范围内的度量
<pre> 定义预格式文本
<progress> 定义任何类型的任务的进度
<q> 定义短的引用
<rp> 定义若浏览器不支持ruby元素显示的内容
<rt> 定义ruby注释的解释
<ruby> 定义ruby注释
<samp> 定义计算机代码样本
<small> 定义小号文本
<strong> 定义强调文本
<sup> 定义上标文本
<sub> 定义下标文本
<time> 定义日期/时间
<tt> 定义打字机文本
<var> 定义文本的变量部分
<wbr> 定义换行
注意:HTML 中 <, >,& 等有特殊含义,(前两个字符用于链接签,& 用于转义),不能直接使用。使用这三个字符时,应使用它们的转义序列,如下所示:
& lt; 表示 <
& gt; 表示 >
& nbsp; 表示空格,& emsp;表示中文空格(宽一点)
案例:
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<h1>H1h1>
<h2>H2h2>
<h3>H3h3>
<h4>H4h4>
<h6>H6h6>
<p>
<small>websmall> 应用的 <strong>HTMLstrong> 页面一般存放在 web 文件夹下,<br>在下面新建一个 index 的 <i>HTMLi> 文件,进入如下的<q>测试q>阶段。
p>
<hr>
<p>
注意: <, >,&等有<b>特殊b>含义,(前两个字符用于链接签,&用于转义),
<code>不能直接使用。code>使用这三个字符时,<sup>应sup>使用<sub>它们sub>的
<del>转义del>
序列,如下所示:
p>
body>
html>
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>基础格式元素title>
head>
<body>
<h1>大标题h1>
<h6>小标题h6>
<p><b>一段话b>之间可以使用<br> <br> 换行p>
<p>
<del>删除线del>
也还<i>不错i>
p>
<p>
<small>小small>号字体写一个数学等式
<br>
5<sup>2sup>=25
<hr>
H<sub>2sub>O
p>
body>
html>
控制用户输入输出的元素,这里先做基本了解,后面我们会详细学习。
<form> 定义供用户输入的 HTML 表单
<input> 定义输入控件
<textarea> 定义多行的文本输入控件
<button> 定义按钮
<select> 定义选择列表(下拉列表)
<optgroup> 定义选择列表中相关选项的组合
<option> 定义选择列表中的选项
<label> 定义input元素的标注
<fieldset> 定义围绕表单中元素的边框
<legend> 定义fieldset元素的标题
<datalist> 定义下拉列表
<keygen> 定义生成密钥
<output> 定义输出的一些类型
案例:
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<form>
<label>
姓名
<input>
label>
<br>
<input>
<br>
<textarea>textarea>
<br>
<button>提交button>
<br>
<select>
<option>吃饭option>
<option>睡觉option>
select>
form>
body>
html>
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>基础格式元素title>
head>
<body>
<form>
<label>
姓名
<input>
label>
<br>
<label>
密码
<input>
label>
<br>
备注
<textarea>textarea>
<br>
爱好
<select>
<option>吃饭option>
<option>睡觉option>
<option>打豆豆option>
select>
<br>
<button>提交button>
form>
body>
html>
常用元素如下:
<frame> 定义框架集的窗口或框架
<frameset> 定义框架集
<noframes> 定义针对不支持框架的用户的替代内容
<iframe> 定义内联框架
<img> 定义图像
<map> 定义图像映射
<area> 定义图像地图内部的区域
<canvas> 定义图形
<figcation> 定义figure元素的标题
<figure> 定义媒体内容的分组,以及它们的标题
<a> 定义超链接
<link> 定义文档与外部资源的关系
<nav> 定义导航链接
<ul> 定义无序列表
<ol> 定义有序列表
<li> 定义列表的项目
<dl> 定义定义列表
<dt> 定义定义列表中的项目
<dd> 定义定义列表中项目的描述
<menu> 定义命令的菜单/列表
<menuitem> 定义用户可以从弹出菜单调用的命令/菜单项目
<command> 定义命令按钮
注意:img 的 src 既可以是项目路径的相对图片路径,也可以是互联网上的图片路径。最好不要使用本地的绝对路径。
案例:
<body>
<iframe src="https://www.baidu.com/" width="600" height="100">iframe>
<br>
<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png">
<br>
<img src="动画.gif">
<br>
<a href="hello.html">去百度a>
<ul>
<li>1li>
<li>2li>
<li>3li>
ul>
<ol>
<li>1li>
<li>2li>
<li>3li>
ol>
body>
常用元素如下:
<table> 定义表格
<caption> 定义表格标题
<th> 定义表格中的表头单元格
<tr> 定义表格中的行
<td> 定义表格中的单元格
<thead> 定义表格中的表头内容
<tbody> 定义表格中的主体内容
<tfoot> 定义表格中的表注内容(脚注)
<col> 定义表格中一个或多个列的属性值
<colgroup> 定义表格中供格式化的列组
<div> 定义文档中的块级元素
<span> 定义文档中的行内元素
<header> 定义section或page的页眉
<footer> 定义section或page的页脚
<section> 定义section
<article> 定义文章
<aside> 定义页面内容之外的内容
<detais> 定义元素的细节
<dialog> 定义对话框或窗口
<summary> 为<details>元素定义可见的标题
<head> 定义关于文档的信息
<meta> 定义关于HTML文档的元信息
<base> 定义页面中所有链接的默认地址或默认目标
<basefon> 不赞成使用。定义页面中文本的默认字体、颜色或尺寸
注意:要想块级元素 div 居中需要设置宽度和外边距。< div style=“width: 500px;margin: 0 auto”>内容 div>,块元素 div 中可以存放块元素和其他常用元素。
案例:
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>123title>
head>
<body>
<table>
<thead>
<tr>
<td>idtd>
<td>姓名td>
<td>密码td>
tr>
thead>
<tbody>
<tr>
<td>1td>
<td>2td>
<td>3td>
tr>
<tr>
<td>4td>
<td>5td>
<td>6td>
tr>
tbody>
table>
<div style="width: 200px;margin: 0 auto">
注意:要想块级元素 div 居中需要设置宽度和外边距。
div>
body>
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>框架图形链接列表元素title>
head>
<body>
<div style="width: 300px;margin: 0 auto">
<table>
<thead>
<tr>
<th>IDth>
<th>姓名th>
<th>年龄th>
<th>密码th>
<th>操作th>
tr>
thead>
<tbody>
<tr>
<td>1td>
<td>张三td>
<td>18td>
<td>******td>
<td>
<button>修改button>
<button>删除button>
td>
tr>
<tr>
<td>2td>
<td>李四td>
<td>18td>
<td>******td>
<td>
<button>修改button>
<button>删除button>
td>
tr>
<tr>
<td>3td>
<td>王二td>
<td>18td>
<td>******td>
<td>
<button>修改button>
<button>删除button>
td>
tr>
tbody>
table>
div>
body>
html>
< form >元素用于声明一个包含表单元素的区域,该元素并不会生成可视部分,却允许用户在该区域中添加可输入信息的表单控件元素,如文本域、下拉列表、单选按钮、复选框等。
< form >元素既可以指定 id、style、class 等常用的核心属性,也可以指定 onclick 等事件属性。除此之外还可以指定如下几个属性:
1.action:指定当单击表单内的“确认”按钮时,该表单信息被提交到哪个地址。该属性既可以指定一个绝对地址,也可以指定一个相对地址,当不填时是当前页面的地址。
2.method:指定提交表单时发送何种类型的请求,该属性值可以为 get 或 post,分别用于发送 GET 或 POST 请求,表单默认以 GET 方式提交请求。GET 请求和 POST 请求区别如下:
GET 请求:GET 请求把表单数据显式地放在 URL 中,并且对长度和数据值编码有所限制。 GET 请求会将请求的参数名和值转换成字符串,并附加在原 URL 之后,因此可以在地址栏中看到请求参数名和值。GET 请求传送的数据量较小,一般不能大于 2KB。
POST 请求:POST 请求把表单数据放在 HTTP 请求体中,并且没有长度限制。POST 请求传输的数据量总比 GET 请求传输的数据量大,而且 POST 请求参数以及对应的值放在 HTML 的 HEADER 中传输,用户不能在 URL 中看到请求参数值,安全性相对较高。
3.enctype:可指定表单进行编码时所使用的字符集。其取值如下所示。
表单元素必须与其他表单控件元素结合才可以使用。当在 元素定义了一个或多个表单控件元素时, 一旦提交该表单, 该表单的表单控件将会转换成请求参数。关于表单控件转换成请求参数的规则如下:
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单title>
head>
<body>
<form action="hello.html" method="post" enctype="multipart/form-data">
<input name="username">
<br>
<input name="password" value="123456" disabled>
<br>
<input name="age" readonly value="18">
<br>
<button type="submit">提交button>
form>
body>
html>
< input > 元素是表单控件元素中功能最丰富的,许多输入元素都可以使用元素生成。 该元素有一个 type 的属性,该属性决定提交的数据类型,一般对应如下:
单行文本框 text
密码输入框 password
单选框 radio
复选框 checkbox
文件上传城 file (增加属性accept="image/png,video/mp4" 接受的文件类型)
按钮 button
提交按钮 submit
重置按钮 reset
案例:
<body>
<form>
<input type="text">
<br>
<input type="password">
<br>
<label>男<input type="radio" value="男" name="sex">label>
<label>女<input type="radio" value="女" name="sex">label>
<br>
<input type="checkbox" value="吃饭" name="hobby">
<input type="checkbox" value="睡觉" name="hobby">
<input type="checkbox" value="打豆豆" name="hobby">
<br>
<input type="file" accept="image/png">
<br>
<input type="button" value="普通按钮">
<br>
<input type="submit" value="提交">
<br>
<input type="reset" value="重置">
form>
body>
注意:重置和提交按钮都是针对表单节点里面的所有元素,如果表单 DOM 节点不存在,则该功能无效。
label 元素主要用于绑定输入框,关联输入组件的获取焦点与失去焦点,同时对一般文本框起输入提示作用。使用 for 属性:指定< label >元素的 for 属性值为所关联表单控件 id 的属性值。
<body>
<form method="post" name="UserLogin" action="7-2-S.php">
<p>
<label for="UserName">账号:label>
<input type="text" id="UserName" >
p>
<p>
<label for="UserPWD">口令:label>
<input type="password" id="UserPWD" width="30">
<input type="submit" name="Submit" value="提交表单">
p>
form>
body>
button 元素
< button >元素用于定义按钮,在< button >元素的内部可以包含普通文本、文本格式化标签、图像等内容,这也是< button >按钮和< input >按钮的不同之处。
< button >按钮与< input type=“button” />相比,提供了更强大的功能和更丰富的内容。在其开始标签< button>和结束标签< button>之间所有的内容都是该按钮的内容,其中包括任何可接受的正文内容,比如文本或图像等。
需要注意的是,建议不要在< button>与< /button>标签之间放置图像映射,因为它对鼠标和键盘敏感的动作会干扰表单按钮的行为,如果使用图片时,建议使用背景图片的方式。
< button >元素可以指定 id、style、class 等核心属性,还可以指定 onclick 等事件响应属性。除此之外,还可以指定如下几个属性。
案例:
<body>
<button>
<img src="图片1.png">
button>
<br>
<button disabled>禁用按钮button>
<br>
<input type="button" value="按钮">
body>