-
HTML5的基础知识的梳理及常用标签
HTML5的基础知识的梳理及常用标签
1.HTML5的介绍
前端：展示页面、与用户交互 — HTML
后端：数据的交互和传递 — JavaEE/JavaWeb1.前端开发的工作模式
网页的组成部分(HTML+CSS+JAVASCRIPT)
HTML：页面结构
CSS：页面样式表现
JavaScript：交互行为
2.运行环境–浏览器
现阶段：主要是本地直接通过游览器打开，后期我们再将网页放置到服务器上，通过http协议来访问我们需要的资源
尽量使用谷歌浏览器和火狐浏览器
3.开发网页利器
HBuilder编写软件
官方下载地址：http://www.dcloud.io/
4.HTML简介
HTML（英文Hyper Text Markup Language的缩写）中文译为“超文本标记语言”，主要是通过HTML标记对网页中的文本、图片、声音等内容进行描述。
HTML提供了许多标记，如段落标记、标题标记、超链接标记、图片标记等，网页中需要定义什么内容，就用相应的HTML标记描述即可。5.HTML基本结构
DOCTYPE html> -------HTNL标识符 <html> -------跟控制标记 <head> -------头控制标记 <meta charset="UTF-8"> <title>title> -------标题标记 head> <body> -------网页显示区域 body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
设置网页标题+网页主体显示中文信息
二、常用标签
1.标题
DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>title> head> <body> <h1>一级标签h1> <h2>二级标签h2> <h3>三级标签h3> <h4>四级标签h4> <h5>五级标签h5> <h6>六级标签h6> <h7>七级标签h7> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
2.段落
DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>title> head> <body> <p>用真心待她人p> <p>做美丽的自己p> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
3.文本
DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>title> head> <body> <span>送人玫瑰span> <br /> <span>留有余香span> <hr /> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
4.图片
DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>title> head> <body> <img src="../img/呆萌小猪.png" width="120px" height="150px"/> <br /> <img src="../img/呆萌小猪.png" width="10%" /> <br /> <img src="../img/呆萌小猪.png" width="10%" alt="图片加载失败..."/> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
5.有序列表
DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>title> head> <body> <h3>注册流程：h3> <ol type="1"> <li>填写基本信息li> <li>绑定手机号li> <li>绑定邮箱li> <li>绑定银行账号li> <li>注册成功li> ol> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
6.无序列表
DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>title> head> <body> <h3>进入游戏步骤：h3> <ul type="square"> <li>打开王者荣耀li> <li>挑选游戏模式li> <li>开始游戏li> <li>挑选英雄li> <li>开始出击li> ul> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
7.定义列表
DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>title> head> <body> <dl> <dt> <img src="../img/呆萌小猪.png" width="10%"/><span>呆萌小猪span> dt> <dd> <p>2000年出生于地球 p> <p>2岁上幼儿园，5岁上小学，11岁上初中，14岁上高中，17岁上大学p> <p>22岁毕业于xxx大学p> dd> dl> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
列表案例
DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>title> head> <body> <ul> <li> <h3>荤菜h3> <ol> <li>回锅肉li> <li>农家小炒li> <li>红烧狮子头li> <li>糖醋排骨li> ol> li> <li> <h3>素菜h3> <ol> <li>土豆炒洋芋li> <li>番茄炒西红柿li> <li>玉米炒包谷li> <li>菌子炒蘑菇li> ol> li> <li> <h3>汤类h3> <ol> <li>三鲜汤li> <li>酸菜豆米汤li> <li>紫菜蛋花汤li> ol> li> ul> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
8.超链接
DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>title> head> <body> <a href="08_列表案例.html" target="_self">跳转到本地页面a> <br /> <a href="../index.html" target="_self">跳转到本地其他目录页面a> <br /> <a href="http://www.baidu.com" target="_blank">跳转到百度页面a> <br /> <a href="07_定义列表.html" target="_blank"> <img src="../img/呆萌小猪.png" width="10%" /> a> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
-
通过使用 href 属性 - 创建指向另一个文档的链接
-
通过使用 name 属性 - 创建文档内的书签
Target属性：
_blank：在新窗口中打开被链接文档。
_self：默认。在相同的框架中打开被链接文档。
_top：在整个窗口中打开被链接文档。
_parent：在父框架集中打开被链接文档
9.瞄点超链接
掌握name属性，创建锚链接
在文档的某个位置，关联到该锚点查看 Chapter 4。
在文档的某个位置，设置锚点Chapter 4
DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>title> head> <body> <a href="#new01">国际a> <a href="#new02">教育a> <a href="#new03">娱乐a> <a href="#new04">视频a> <a name="new01">a> <h2>国际事件h2> <h2>国际事件h2> <h2>国际事件h2> <h2>国际事件h2> <h2>国际事件h2> <a name="new02">a> <h2>教育通知h2> <h2>教育通知h2> <h2>教育通知h2> <h2>教育通知h2> <h2>教育通知h2> <h2>教育通知h2> <h2>教育通知h2> <a name="new03">a> <h2>娱乐新闻h2> <h2>娱乐新闻h2> <h2>娱乐新闻h2> <h2>娱乐新闻h2> <h2>娱乐新闻h2> <h2>娱乐新闻h2> <h2>娱乐新闻h2> <h2>娱乐新闻h2> <a name="new04">a> <h2>腾讯视频h2> <h2>腾讯视频h2> <h2>腾讯视频h2> <h2>腾讯视频h2> <h2>腾讯视频h2> <h2>腾讯视频h2> <h2>腾讯视频h2> <h2>腾讯视频h2> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
10.表格
表格由
标签来定义。每个表格均有若干行（由 标签定义），每行被分割为若干单元格（由标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。 完整的表格：
cellspacing=“20px” ：规定单元格之间的空白
cellpadding=“5px” ：规定单元格边沿与其内容的空白
th：定义表头
tr：行
td：列
DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>title> head> <body> <table border="1" width="50%"> <tr> <th>姓名th> <th>性别th> <th>年龄th> tr> <tr> <td>刘备td> <td>男td> <td>22td> tr> <tr> <td>关羽td> <td>男td> <td>24td> tr> <tr> <td>张飞td> <td>男td> <td>28td> tr> <tr> <td>貂蝉td> <td>女td> <td>20td> tr> table> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
模拟计算器键盘
DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>title> head> <body> <table border="1" width="50%" height="300px"> <tr> <th>Cth> <th>->th> <th>+th> <th>-th> tr> <tr> <th>7th> <th>8th> <th>9th> <th>*th> tr> <tr> <th>4th> <th>5th> <th>6th> <th>/th> tr> <tr> <th>1th> <th>2th> <th>3th> <th rowspan="2">=th> tr> <tr> <th colspan="2">0th> <th>.th> tr> table> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
11.表单
DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>title> head> <body> <form> 用户名框：<input type="text" /><br /> 密码框： <input type="password" /><br /> 单选框： <input type="radio" name="xxx"/> <input type="radio" name="xxx" /> <input type="radio" name="xxx" /> <br /> 多选框： <input type="checkbox" /> <input type="checkbox" /> <input type="checkbox" /> <br /> 上传文件：<input type="file" /><br /> 下来链表： <select> <option>aaaoption> <option>bbboption> <option>cccoption> select> <br /> <textarea cols="20" rows="5" required="required" readonly="readonly"> 文本域 textarea> <br /> <input type="submit" value="提交按钮" /><br /> <input type="reset" value="重置按钮" /><br /> <input type="button" value="普通按钮" onclick="fun01()"/><br /> <input type="image" src="../img/呆萌小猪.png" width="20px" height="20px"/> form> <script type="text/javascript"> function fun01(){ alert("送人玫瑰，手有余香"); } script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
优化
DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>title> head> <body> <form action="服务器地址" method="post"> 账号：<input name="username" type="text" placeholder="请输入账号" /><br /> 密码：<input name="password" type="password" placeholder="请输入密码" /><br /> 性别： <input type="radio" name="sex" value="man" checked="checked" />男 <input type="radio" name="sex" value="woman" />女 <br /> 爱好： <input type="checkbox" name="hobbys" value="football" />足球 <input type="checkbox" name="hobbys" value="basketball" />篮球 <input type="checkbox" name="hobbys" value="shop" />购物 <br /> 籍贯： <select name="province"> <option value="sc">四川option> <option value="gz" selected="selected">贵州option> <option value="sc">云南option> <option value="sc">广东option> <option value="sc">重庆option> select>省 <select name="city"> <option value="gy">贵阳option> <option value="gy">毕节option> <option value="gy">六盘水option> <option value="gy">遵义option> <option value="gy">铜仁option> select>市 <br /> <input type="submit" value="注册" /> form> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
三、HTML框架
通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。
框架结构标签（）一般，我们习惯叫框架集
框架结构标签（）定义如何将窗口分割为框架
每个 frameset 定义了一系列行或列
rows/cols 的值规定了每行或每列占据屏幕的面积框架标签（Frame）
Frame 标签定义了放置在每个框架中的 HTML 文档。
在下面的这个例子中，我们设置了一个两列的框架集。第一列被设置为占据浏览器窗口的 25%。第二列被设置为占据浏览器窗口的 75%。HTML 文档 “frame_a.htm” 被置于第一个列中，而 HTML 文档 “frame_b.htm” 被置于第二个列中：DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>title> head> <frameset rows="20%,80%"> <frame src="advertisement.html" noresize="noresize"/> <frameset cols="30%,70%"> <frame src="goods_list.html" noresize="noresize"/> <frame name="goods_info" src="man.html" noresize="noresize"/> frameset> frameset> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>title> head> <body> <a href="man.html" target="goods_info">男装a><br /> <a href="woman.html" target="goods_info">女装a><br /> <a href="child.html" target="goods_info">童装a> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>title> head> <body> <h1>广告栏h1> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>title> head> <body> <h1>男装h1> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>title> head> <body> <h1>女装h1> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>title> head> <body> <h1>童装h1> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
基本的注意事项 - 有用的提示：
假如一个框架有可见边框，用户可以拖动边框来改变它的大小。为了避免这种情况发生，可以在 标签中加入：noresize=“noresize”。
为不支持框架的浏览器添加 标签。
重要提示：不能将 标签与 标签同时使用！不过，假如你添加包含一段文本的 标签，就必须将这段文字嵌套于 标签内。（在下面的第一个实例中，可以查看它是如何实现的。）四、HTML内联框架
iframe 用于在网页内显示网页。
使用 iframe 作为链接的目标
DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>title> head> <body> <a href="http://www.taobao.com" target="page">淘宝a> <iframe name="page" width="100%" height="400px">iframe> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
五、常见名词的解释
WWW：万维网（world wide web），它是提供网站相关服务，人们可以通过万维网服务进行网上聊天、网上冲浪、网购、搜索资料、查看天气、查看新闻、交友聊天等。**W3C：**万维网联盟创建于1994年.是Web技术领域最具权威和影响力的国际中立性技术标准机构。我们后面学的html、css等标准都是由此机构主导制定。
HTTP：超文本传输协议（HTTP，HyperText Transfer Protocol），也就是浏览器和服务器端的网页传输数据的约束和规范。
五、HTML5新特性
1.定义文档类型
在文件的开头总是会有一个标签
语言 文档类型声明方式 html4 html5 2.新增表单内容
<form action="#" method="post"> 日期选择器：<input type="date"/><br/> 时间选择器：<input type="time"/><br/> 邮箱输入框：<input type="email"/><br/> 数字输入框：<input type="number" value="50" min="10" max="100" step="5"/><br/> URL输入框： <input type="url" list="url_list"/> <datalist id="url_list"> <option label="W3School" value="http://www.w3school.com.cn" /> <option label="谷歌" value="http://www.google.com" /> <option label="百度一下" value="http://www.baidu.com" /> datalist><br/> <input type="submit" value="提交"/> form>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
-
相关阅读:
TCP 三次握手和四次挥手机制,TCP为什么要三次握手和四次挥手,TCP 连接建立失败处理机制
金仓数据库WalMiner日志逻辑解码工具 （5. WalMiner使用示例）
2022面试相关- reactnatvie相关
C#:实现DisjointSet不相交集算法(附完整源码)
【电商数仓】数仓BI工具集成之Zabbix入门、部署、配置、启停、使用
java进阶编程思想（七天）
OCR文字识别软件对于硬件的哪方面需求较高？
LeetCode 363 期周赛
【C刷题】day6
C Primer Plus(6) 中文版 第6章 C控制语句：循环 6.12 使用函数返回值的循环示例
- 原文地址：https://blog.csdn.net/GL280599ZL/article/details/127837881
