HTML复习
HTML5 与 HTML4 的区别
- 语法简单
在 HTML5 中，头部只需要写即可。 - 新增语义化标签
新增加的语义化标签（如等）使得网页的可读性变得更 高，也更加明确地表示出网页的结构， - 新的媒体标签
新的和标签可以用来嵌入音频文件和视频文件。 - 使用画布标签绘制图形
标签具有绘图功能，通过与 JavaScript 脚本的搭配，可在网页上绘制图像。 - 新的表单设计
表单增加了新元素，也为表单元素增加了许多新属性。 - 废除了一些旧标签
废除了一些标签，其中大部分为网页美化标签。
学习 HTML5 前的准备工作
常用浏览器介绍
**浏览器**是指可以显示网页服务器或者文件系统的HTML 文件（标准通用标记语言的一个应用）内容，并可以让用户与 HTML 文件交互的一种软件。
1.常用浏览器
- Internet Explorer 是微软公司推出的一款网页浏览器。
- Google Chrome 是由 Google 公司开发的一款网页浏览器。Google Chrome 的特点是简洁、快速。
- Mozilla Firefox 中文俗称“火狐”，Mozilla Firefox 中文俗称“火狐”。
2.浏览器内核介绍
- 渲染引擎负责获取网页内容（HTML、XML、图像等）、整理信息（如加入 CSS等）以及计算网页的显示方式，然后输出至显示器或打印机。
- JavaScript 引擎负责解析和执行 JavaScript 来实现网页的动态效果。
常见的 HTML5 开发软件介绍
- VScode（推荐）
该软件支持语法高亮、代码自动补全（又称 IntelliSense）、代码重构、查看定义功能，并且内置了命令行工具和 Git 版本控制系统。用户可以更改主题和键盘快捷方式实现个性化设置，也可以通过内置的扩展程序商店安装扩展以拓展软件功能。 - HBuilder
快是 HBuilder 的最大优势，通过完整的语法提示和代码输入法、代码块等，大幅提升HTML、JavaScript、CSS 的开发效率。同时，它还包括最全面的语法库和浏览器兼容性数据。 - Dreamweaver
集网页制作和网站管理功能于一身的所见即所得网页代码编辑器 - WebStorm
WebStorm 被广大中国JavaScript 开发者誉为“Web 前端开发神器”“最强大的 HTML5 编辑器”“最智能的 JavaScript IDE”等。 - Notepad++
有完整的中文化接口并支持多国语言编写的功能（UTF8 技术）
HTML5 的语法与结构
1.HTML5 标签
标签是 HTML5 最基本单位和最重要的组成。
<hr/> <!--单标记 也叫自结束标记-->
<title></title> <!--标准标记，前面是开始标记，后面是结束标记，标记可以嵌套，但不能交叉嵌套-->
2.HTML5 标签属性
标签属性是标签的一部分，用于包含额外的信息。
<img src=“../image/a.png” width=“100” height=“100”/>
<!-- 结构是 属性名=”属性值” -->
3．HTML5 文档注释
浏览器不会对注释内容进行解析并呈现到页面上，只有查看HTML5 文件源代码时才会看到注释。
<!-- 这是 HTML5 注释-->
HTML5 的文档结构
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>我的第一个网页</title>
</head>
<body>
Hello World！
</body>
</html>
1．头部内容
标签用于表示网页的元数据，即描述网页的基本信息。其中主要包含以下标签：-
标签用于定义页面的标题，是成对标记。 - 标签用于定义页面的相关信息，为非成对标记。 1. charset 属性：设置文档的字符集编码格式。 ```HTML ```
-
http-equiv 属性：将信息写给浏览器看，让浏览器按照这里面的要求执行，可选属性
值有 Content-Type（文档类型）、refresh（网页定时刷新）、set-cookie（设置浏览器 cookie 缓
存），需要配合 content 属性使用。<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> -
name 属性：将信息写给搜索引擎看。
<!--作者--> <meta name="author" content="http://www.jredu100.com" /> <!--网页关键字：多个关键字用英文逗号分隔--> <meta name="keywords" content="HTML5,网页,Web 前端开发" /> <!--网页描述：搜索网站时，title 下面的解释文字。--> <meta name="description" content="这是我在杰瑞教育开发的第一个网页。" />
-
-
使用标签可以加载一个图片作为网页图标。标签有如下属性：
- rel 属性：声明被链接文件与当前文件的关系，此处选 icon。
- type 属性：声明被链接文件的类型，可以省略。
- href 属性：表示图片的路径地址。
<link rel="icon" type="image/x-icon" href="img/icon.jpg" />
2.主题内容
标记包含文档所有的内容，如文字、图像、表格、表单等元素。
<body>
<header>网站主题</header>
<nav>连接菜单</nav>
<article>
主内容
<section>
章节段落
</section>
</article>
<aside>侧边栏</aside>
<footer>页脚</footer>
</body>
HTML5 常见的块级标签和行级标签
常见的块级标签
块级标签，顾名思义，此类标签在网页中显示为块。块级标签一般独占一行，新的块级
标签将从新的一行开始排列，它可以容纳内联元素和其他块级元素。
<h1></h1>···<h6></h6>:标题标签<hr/>：水平线标签<p></p>：段落标签<br/>：换行标签<pre></pre>：预格式标签<ul><li></li></ul>：无序列表标签<ol><li></li></ol>：有序列表标签<div></div>：分区标签
<h1>一级标题：👇水平线</h1>
<hr/>
<h2>二级标签：👇换行</h2>
<br/>
<h3>三级标签：👇与格式标签（与属于内容相同排版）</h3>
<pre>
╭◜◝ ͡ ◜◝╮ ╭◜◝ ͡ ◜◝╮
( ๑❛ᴗ❛๑ ) ( ❛ᴗ❛ั⁎ ) )
╰◟◞ ͜ ◟◞╯ ╰◟◞ ͜ ◟◞╯
</pre>
<h4>四级标签：👇无序列表</h4>
<ul>
<li>type</li>
<li>disc、circle、square</li>
</ul>
<h5>五级标签：👇有序标签</h5>
<ol>
<li>type</li>
<li>start</li>
</ol>
<h6>六级标签：👇div</h6>
<div style="background-color:aqua;">我是一个大块，背景是青蓝色</div>
常见的行级标签
行级标签在页面中可以和其他元素在同行显示，直到一行不能放下一个完整的元素，并且通常行级元素内不会包含其他元素。
-
<img/>：图片标签- src 属性
-
相对路径：以当前文件为准，去寻找图片地址。
-
绝对路径：file:///盘符:/文件夹/图片.扩展名。
1.绝对路径只在当前计算机生效，若将网站转移服务器，则路径会失效。
2.通过绝对路径打开图片使用的是 file 协议，但网页中使用的是 http 协议，因此会出现跨域问题，造成图片无法显示。 -
网络地址：使用网络上的图片链接。
-
- title 属性
该属性用于设置图片的标题，即当鼠标指在图片上后显示的文字。-
例图
-
alt 属性
该属性可设置由于图片无法加载时显示的文字。- 例图
- 例图
-
- src 属性
-
<a></a>：超链接标签- href 属性
在标签中使用 href 属性来描述链接的地址，这个地址可以是网络链接，也可以是本
地文件。当用#时，表示这是一个空的超链接。可以当作锚点使用 - target 属性
使用 target 属性可以定义通过超链接打开的文档在何处显示。常用的两个属性值分别为
_self（在与链接相同的框架中打开被链接文档）和_blank （在新窗口中打开链接），默认属
性值为_self。
- href 属性
-
<span></span>：最常用的行级标签
- 实例
-
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h1>游戏手柄</h1> <div> <img src="img/游戏.png" alt="游戏手柄"> <p>跳楼疯抢价<strong>1</strong>元</p> </div> <p>这个游戏手柄超级好用！</p> </body> </html> -
图片
-
注意：块级标签与行级标签的特点与区别。
1.块级标签自动换行，前后隔一行；行级标签不会自动换行，从左往右依次显示。
2.块级标签的宽度默认是 100%；行级标签的宽度由文字内容撑开。
3.块级标签可以设置宽度、高度、边距等属性；行级标签不能设置上述属性（img除外）。
HTML5 新增标签简介（了解）
使用结构标签可以提升网页文档的可读性，并且有利于搜索引擎优化。
- HTML5 新增的结构标签主要包括以下 7 个：section、article、header、hgroup、footer、nav、aside。
HTML5 表格
表格由 table 标签定义。每个表格均有若干行，行由 标签定义，每行被分割为若干单元格，列由td 标签定义。字母 td 指表格数据（table data），即数据单元格的内容。
-
表格的基本属性
-
border: 表格边框属性
<table border="1"> </table> -
width/height: 表格（宽度/高度）属性
<table border="1" width="400" height="200"> </table> -
bgcolor: 表格背景色属性
<table border="1" bgcolor="red"> </table> -
background: 表格背景图属性
<table border="1" background="img/img.png"> </table> -
bordercolor: 表格边框颜色属性
<table border="1" bordercolor="blue"> </table> -
cellspacing: 表格单元格间距属性
<table border="1" cellspacing="10"> </table> -
cellpadding: 表格单元格内边距属性
<table border="1" cellpadding="10"> </table> -
align:表格对齐属性
<table border="1" align="center"> </table> -
valign：单元格内容垂直对齐属性
<table border="1" width="200" height="100"> <tr> <td valign="top">第一行 1</td> <td valign="center">第一行 2</td> <td valign="bottom">第一行 3</td> </tr> </table> -
colspan /rowspan：表格的跨行与跨列
<table border="1"> <tr> <td colspan="3">学生成绩</td> </tr> <tr> <td rowspan="2">张三</td> <td>语文</td> <td>98</td> </tr> <tr> <td>数学</td> <td>95</td> </tr> </table>colspan 属性表示跨列，当某个格跨 N 列时，其右边 N-1 个单元格需删除。
rowspan 属性表示跨行，当某个格跨 N 行时，其下方 N-1 个单元格需删除。
-
-
实例
-
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h1 >特别休假申请单</h1> <p>申请日期： 年 月 日</p> <table border="1" cellspacing="0" cellpadding="5" width="500px" bgcolor="#f1f1f1"> <tr> <th>所属单位</th> <td> 部 组 班</td> <th>职称</th> <td>111</td> <th>姓名</th> <td>111</td> <th>厂长</th> </tr> <tr> <th rowspan="2">期间</th> <td colspan="3"> 年 月 日</td> <th rowspan="2" colspan="2">天数</th> <td>111</td> </tr> <tr> <td colspan="3"> 年 月 日</td> <td>主管</td> </tr> <tr> <th colspan="2">职务代理人</th> <th colspan="4">盖章</th> <td>111</td> </tr> <tr> <th>到期日期</th> <td colspan="3"> 年 月 日</td> <th colspan="2">审核意见</th> <th>组长</th> </tr> <tr> <th colspan="2">全年特别休假数</th> <td colspan="2">天</td> <td>111</td> <td>111</td> <td>111</td> </tr> <tr> <th colspan="2">全年特别休假数</th> <td colspan="2">天</td> <td>人事主任</td> <td>人事经办</td> <td>组长</td> </tr> <tr> <th colspan="2">全年特别休假数</th> <td colspan="2">天</td> <td rowspan="2">111</td> <td rowspan="2">111</td> <td rowspan="2">111</td> </tr> <tr> <th colspan="2">全年特别休假数</th> <td colspan="2">天</td> </tr> </table> <hr> </body> </html> -
成图
-
HTML5 表单
用户填写数据完成后，单击“提交”按钮就可以发送数据到服务器，经过后台程序处理后将用户所需的信 息返回到客户端，在浏览器中展示给用户，表单内容由包裹。
表单的常用属性
-
action属性
action 属性用于指定表单提交时向何处发送表单数据，即需要发送的服务器地址。<form action="form.php"> 各种表单控件 </form> -
method属性
method 属性用于指定表单向服务器提交数据的方法，包括两种方法，分别是 get 和post。- 1.get 方法的特点（不安全）
所有信息可在地址栏中看到，并且可以通过地址栏随意传递其他数据。 - 2.post 方法的特点（安全）
将数据封装后使用 http 请求传递
- 1.get 方法的特点（不安全）
-
enctype属性
enctype 属性指定表单发送的编码方式。- 1.application/x-www-form-urlencoded
此为默认值，如果 enctype 属性省略不写，则表示采取此种编码方式。 - 2.multipart/form-data
不对字符编码，用于上传文件时使用。 - 3.text/plain
将空格转换为“+”符号，但不编码特殊字符，通常在将表单发送到电子邮箱时使用。
- 1.application/x-www-form-urlencoded
input 输入框
-
type 属性
-
text定义重置按钮。重置按钮会清除表单中的所有数据。
文本输入框用于输入单行文本，默认宽度为 20 个字符。在登录注册时，常常用到文本输入框，它主要用于填写用户名称。<form action="form.php" method="post"> 请输入内容： <input name="text1" type="text" maxlength="10" size ="5"/> <!--上述代码表示这个文本输入框的最大字符长度为 10，可显示的字符数为 5（输入框宽度） --> </form> -
password定义密码字段。该字段中的字符被掩码。
密码输入框输入的内容会以小黑点的形式替代显示。<form action="form.php" method="post"> 请输入内容： <input name="pwd" type="password" maxlength="16"/> </form> -
radio定义单选按钮。
单选按钮用于填写表单时信息选择，如调查问卷中的单选题。<form action="form.php" method="post"> <input type="radio" name="sex" value="男" checked="checked" />男 <input type="radio" name="sex" value="女" />女 </form>1.name 和 value 属性需同时存在，提交时，提交的是 value 中的属性值。
例如： 提交时，显示"sex=男"。
2.radio 凭借 name 属性区分是否为同一组。name 相同，为同组，同组中只能选择一个。3.checked=“checked” 默认选中。radio 只能选一个，checkbox 可以选多个. -
checkbox复选框
复选按钮与单选按钮相同，也用于填写表单时信息选择，如调查问卷中的多选题。<form action="form.php" method="post"> 爱好选择： <input type="checkbox" name="hobby" value="sing" checked="checked" />唱 <input type="checkbox" name="hobby" value="draw" checked="checked" />跳 <input type="checkbox" name="hobby" value="dance" />rap </form> -
file定义输入字段和 "浏览"按钮，供文件上传。
文件上传按钮用于文件上传，单击“选择文件”按钮会弹出对话框，选择需要上传的文件。<form action="form.php" method="post" enctype="multipart/form-data "> <input type="file"/> </form> -
submit定义重置按钮。重置按钮会清除表单中的所有数据。
表单提交按钮用于提交表单数据，单击按钮后，表单中用户填写的信息会被发送到表单指定的地方进行处理。<form action="form.php" method="post"> <input type="submit"" value="登录"/> </form> -
reset定义重置按钮。重置按钮会清除表单中的所有数据。
重置按钮将表单数据重置为初始状态，通常是清空表单已填内容。<form action="form.php" method="post"> <input type="text" value="输入框的默认值"/> <input type="text" placeholder="请输入"/> <input type="reset"/> </form> -
button按钮
定义一个可单击的按钮，通常与 JavaScript（后面会有专门的篇章讲解）一起使用来启动脚本。<form action="form.php" method="post"> <input type="button" value="点我！" οnclick="alert('这是一个按钮！')" /> </form> -
image定义图像形式的提交按钮。
图形提交按钮需要添加 src 属性来设置图片路径。功能与 submit 相同，可以提交表单数据，通常在美化网页时会用到图形提交按钮来代替默认的提交按钮，使页面更加美观。<form action="form.php" method="post"> <input type="image" src="../img//logo.png"/> </form> -
hidden定义隐藏的输入字段。
使用隐藏域传递数据。<input type="hidden" name="username" value="1234" /> -
标签新增输入类型
- color 定义拾色器
- date 限制用户输入时间格式
- email 限制用户输入email 格式
- number 限制用户输入数字格式
- range 定义包含一定范围内的值的数字字段
- search 定义用于输入搜索字符串的文本字段
<form> 拾色器：<input type="color" name="test" /><br /><br /> 日期选择：<input type="date" name="test" /><br /><br /> 电子邮件：<input type="email" name="test" /><br /><br /> 数字输入框：<input type="number" name="test" /><br /><br /> 滑块输入：<input type="range" name="test" /><br /><br /> 搜索框：<input type="search" name="test" /><br /><br /> </form>
-
-
name 属性
name 属性表示 input 输入框的名称，一般必填。因为传递数据时，使用“name=value”的形式传递。 -
value 属性
value 属性表示 input 输入框的默认值。 -
placeholder 属性
placeholder 属性表示输入框中的提示信息，当输入框有 value 属性的时候，提示内容会消失，转而显示 value 属性值。 -
tabindex 属性
tabindex=“1” 此属性控制按 Tab 键时的跳转顺序，从最小的数值开始，逐个往大的数值跳转，依次获得焦点。 -
input 元素的其他属性
- checked=“checked” 默认选中。
- disabled=“disabled” 设置控件不能使用。用在按钮上效果为不能单击，用在输入框上则表示不能修改。而且，如果输入框设置为 disabled，则输入框中的信息不能往后台传递。
其他表单元素
-
select 下拉选择控件
在表单中通过控件可以创建一个下拉式的列表或带有滚动条的列表，可以在列表中选中一个或多个选项，通常用于填写生日、所在地区等信息。- 标签的属性
- name=“列表名”：所有选项只有一个 name。
- multiple=“multiple”：设置 select 控件为多选，可在列表中使用 Ctrl 键+鼠标进行多选。一般不用。
- size=“1”：规定下拉列表中可见选项的数目。如果 size 属性的值大于 1，但是小于列表中选项的总数目，下拉列表就会显示出滚动条，表示可以查看更多选项。
- 标签的属性 1. value=""：当选项 option 没有 value 属性时，往后台传递的是标签中的文字；当选项 option 有 value 属性时，往后台传递的是 value 属性的值。 2. title=""：鼠标指上后显示的文字，与图片的 title 属性类似。 3. selected="selected"：默认选中，即 select 的初始值。
- selected=“selected”：默认选中，即 select 的初始值。 用于将标签进行分组，label 属性表示分组 名。
<form action="form.php" method="post"> <select name="city"> <optgroup label="嘿哈"> <option value="1" title="乌拉乌拉乌拉">乌拉</option> <option value="2" selected="selected">啊哒啊哒</option> <option value="3">欧拉欧拉</option> </optgroup> <optgroup label="芜湖"> <option>起飞</option> <option>唔~~~</option> </optgroup> </select> </form> - 标签的属性
-
textarea 文本域
与的 type="text"不同，创建的文本域是多行的，文本区中可容纳无限数量的文本，其中文本的默认字体是等宽字体。<form action="form.php" method="post"> <textarea style="width: 200px; height: 150px;">这是文本域的内容</textarea> </form> -
button 按钮
的作用是定义一个按钮，与创建的按钮功能类似。<form action="form.php" method="post"> <button type="button">这是一个按钮</button> </form>
- 最终作品
-
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h1>用户注册</h1> <form action="" method="post"> <table> <tr> <th>登录名：</th> <td><input type="text">(可包含a-z\0-9和下划线)</td> <td><strong>阅读服务协议</strong></td> </tr> <tr> <th>密码：</th> <td><input type="password">(至少包含6个字符)</td> <td rowspan="9"><textarea name="协议" id="" cols="20" rows="20" placeholder="阅读服务协议"></textarea></td> </tr> <tr> <th>再次输入密码：</th> <td><input type="password"></td> </tr> <tr> <th>电子邮件：</th> <td><input type="email"></td> </tr> <tr> <th>性别：</th> <td> <input type="radio" name="sex" value="男" checked="checked" />男 <input type="radio" name="sex" value="女" />女 </td> </tr> <tr> <th>头像：</th> <td><input type="file"></td> </tr> <tr> <th>爱好：</th> <td> <input type="checkbox" name="hobby" value="sing" checked="checked" />唱 <input type="checkbox" name="hobby" value="draw" checked="checked" />跳 <input type="checkbox" name="hobby" value="dance" />rap </td> </tr> <tr> <th>喜欢的城市：</th> <td><select name="city" id=""> <optgroup label="河南"> <option value="1" title="禹州">禹州</option> <option value="2" selected="selected">新乡</option> <option value="3">洛阳</option> </optgroup> <optgroup label="北京"> <option >朝阳区</option> </optgroup> </select></td> </tr> <tr> <th></th> <td><button disabled="disabled">同意右侧服务条款，请提交注册信息</button> <input type="reset"></td> </tr> </table> </form> </body> </html> -
成图
本文为作者学习web前端学习笔记后所作笔记
-
583
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
