HTML5的基础知识的梳理及常用标签

1.HTML5的介绍

前端：展示页面、与用户交互 — HTML
后端：数据的交互和传递 — JavaEE/JavaWeb

1.前端开发的工作模式

网页的组成部分(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.标题

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><!--h1~h6:标题标签   注意：其余无效标签认为是文本内容--><h1>一级标签</h1><h2>二级标签</h2><h3>三级标签</h3><h4>四级标签</h4><h5>五级标签</h5><h6>六级标签</h6><h7>七级标签</h7></body>
</html>

2.段落

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><!--p：段落标签--><p>用真心待她人</p><p>做美丽的自己</p></body>
</html>

3.文本

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><!--span：文本标签br：换行标签hr：分割线标签--><span>送人玫瑰</span><br /><span>留有余香</span><hr /></body>
</html>

4.图片

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><!--img：图片标签src：资源地址width：宽height：高alt：图片加载失败后展示的文本内容单位：px -- 像素% --- 按照窗口的百分比--><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>

5.有序列表

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><!--ol：有序列表type="1" -- 阿拉伯数字type="A" -- 大写英文字母type="a" -- 小写英文字母type="I" -- 大写罗马数字type="i" -- 小写罗马数字li：项--><h3>注册流程：</h3><ol type="1"><li>填写基本信息</li><li>绑定手机号</li><li>绑定邮箱</li><li>绑定银行账号</li><li>注册成功</li></ol></body>
</html>

6.无序列表

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><!--ul：无序列表type="circle" -- 空心圆type="disc" -- 实心圆type="square" -- 实心方块li：项--><h3>进入游戏步骤：</h3><ul type="square"><li>打开王者荣耀</li><li>挑选游戏模式</li><li>开始游戏</li><li>挑选英雄</li><li>开始出击</li></ul></body>
</html>

7.定义列表

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><!--dl：定义列表dt：列表标题dd：列表内容--><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>

列表案例

<!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>

8.超链接

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><!--a：超链接href="资源地址"target="_self" -- 本卡页中跳转target="_blank" - 新增卡页中跳转--><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>

通过使用 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>

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" -- 有格子tr -- 行th -- 列（居中、加粗）td -- 列（居左）--><table border="1" width="50%"><tr><th>姓名</th><th>性别</th><th>年龄</th></tr>    <tr><td>刘备</td><td>男</td><td>22</td></tr><tr><td>关羽</td><td>男</td><td>24</td></tr><tr><td>张飞</td><td>男</td><td>28</td></tr><tr><td>貂蝉</td><td>女</td><td>20</td></tr></table></body>
</html>

模拟计算器键盘

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><!--rowspan="n" -- 占n行colspan="n" - 占n列--><table border="1" width="50%" height="300px"><tr><th>C</th><th>-></th><th>+</th><th>-</th></tr><tr><th>7</th><th>8</th><th>9</th><th>*</th></tr><tr><th>4</th><th>5</th><th>6</th><th>/</th></tr><tr><th>1</th><th>2</th><th>3</th><th rowspan="2">=</th></tr><tr><th colspan="2">0</th><th>.</th></tr></table></body>
</html>

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>aaa</option><option>bbb</option><option>ccc</option></select><br /><!--required="required" -- 必填项readonly="readonly" -- 只读--><textarea cols="20" rows="5" required="required" readonly="readonly">文本域</textarea><br /><!-- 将表单中的数据提交给服务器 --><input type="submit" value="提交按钮" /><br /><!-- 将数据还原 --><input type="reset" value="重置按钮" /><br /><!-- 点击普通按钮就会触发fun01函数 --><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>

优化

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><!--action="服务器地址"method="post" -- 请求方式注意：表单必须有name属性才能将数据发送给服务器placeholder="请输入账号" -- 默认显示checked="checked" -- 单选框/多选框的默认选中selected="selected" -- 下拉列表的默认选中--><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>

三、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>

<!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>

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><h1>广告栏</h1></body>
</html>

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><h1>男装</h1></body>
</html>

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><h1>女装</h1></body>
</html>

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><h1>童装</h1></body>
</html>

基本的注意事项 - 有用的提示：
假如一个框架有可见边框，用户可以拖动边框来改变它的大小。为了避免这种情况发生，可以在标签中加入：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>

五、常见名词的解释

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>

HTML5的基础知识的梳理及常用标签相关推荐

Java SE 基础知识体系梳理
## Java SE 基础知识体系梳理 ----------day01------------- (1)计算机的体系结构 (2)Java语言的概述 (3)开发环境的搭建和使用 1.计算机的体系结构(常 ...
Linux常用基础知识必备三之常用指令及操作
Linux常用基础知识必备三之常用指令及操作 1.vi和vim vi如何使用 vi几种模式下的操作指令命令模式进入编辑模式命令模式下的快捷键底行模式(指按了esc键之后输入按键:后出现) 字符串 ...
10分钟HTML5入门基础知识（一）
毫无疑问,对于开发人员而言, HTML5 已是一个热点话题.如果你需要快速了解HTML5的功能的基本原理,阅读本文是你最好的选择. 本文来自The Code Project的付费搜索位置,由Solut ...
HTML基础知识点（2）——常用标签
HTML基础知识点(2)--常用标签和小学妹一起学HTML 这里有:(转载)HTML标签简写及全称常用标签 HTML基础知识点(2)--常用标签一.HTML常用标签 1.效果显示二.HTML属 ...
HTML5的基础知识整理
HTML5 概述:HTML5是HTML最新的修订版本,2014年10月由万维网联盟(W3C)完成标准制定. HTML5的设计目的是为了在移动设备上支持多媒体. 文章目录 HTML5 前言一.HTMl ...
性能测试之前端性能优化（前端基础知识，前端性能测试常用工具，前端性能优化常见方法）
目录 1. 前端基础知识 1.1 为什么要关注前端页面的性能,了解页面的加载,渲染方式和顺序? 1.2 一次页面请求会经历哪些步骤? 1.3 页面的展示过程 2. 前端性能测试的常用工具 2.1 Go ...
cocos2d html5 mysql_cocos2d-html5基础知识
cocos2d-html5是cocos2d引擎家族中的的html5实现! cocos2d-html5文件结构如下: box2d(对box2d物理引擎支持的js) HelloWorld tests(测试 ...
html5 css3基础知识详解
如同人类的的进化一样,CSS3是CSS2的"进化"版本,在CSS2基础上,增强或新增了许多特性, 弥补了 CSS2的众多不足之处,使得Web开发变得更为高效和便捷. Html4 ...
前端基础第一天：HTML常用标签知识点
学习目标理解: 相对路径三种形式应用排版标签文本格式化标签图像标签链接相对路径,绝对路径的使用 1. HTML常用标签首先 HTML和CSS是两种完全不同的语言,我们学的是结构,就只写 ...

HTML5的基础知识的梳理及常用标签

HTML5的基础知识的梳理及常用标签

1.HTML5的介绍

1.前端开发的工作模式

2.运行环境–浏览器

3.开发网页利器

4.HTML简介

5.HTML基本结构

二、常用标签

1.标题

2.段落

3.文本

4.图片

5.有序列表

6.无序列表

7.定义列表

列表案例

8.超链接

9.瞄点超链接

10.表格

模拟计算器键盘

11.表单

优化

三、HTML框架

四、HTML内联框架

五、HTML5新特性

1.定义文档类型

2.新增表单内容

HTML5的基础知识的梳理及常用标签相关推荐

最新文章

热门文章