HTML
一、HTML概述
1.1 什么是HTML
HTML：Hyper Text Markup Language（超文本标记语言）
超文本包括：文字、图片、音频、视频、动画等
1. 网页的组成
-
标签作用是什么
-
浏览器打开后，会从上到下解释这些代码，并呈现相应的效果
1.2 发展史、优势
-
HTML：Hyper Text Markup Language超文本标记语言
-
超文本标记语言—在1993年6月互联网工程工作小组工作案发布（并非标准）
-
HTML2.0—1995年11月作为RFC1866发布，在RFC2854于2000年6月发布之后被宣布过时。
-
HTML3.2—1996年1月14日，W3C推荐标准
-
HTML4.0—1997年12月18日，W3C推荐标准
-
HTML4.01（微小改进）—1999年12月24日，W3C推荐标准，2000年5月15日发布基本严格的
-
HTML4.01语法，是国标标准化组织和国际电工委员会的标准
-
XHTML1.0—发布于2000年1月26日，是W3C推荐标准，后来经过修订于2002年8月1日重新发布
-
XHTML1.1—2001年5月31日发布
-
XHTML2.0是W3C的工作草案，由于改动过大，学习这个新技术的成本过高而最终胎死腹中，因
此，现在最常用的还是XHTML1.0标准。
-
目前最新的版本为HTML5，它是2004年被提出，2007年被W3C接纳并成立新的HTML工作团队，
2008年1月22日公布HTML5第一份正式草案，2012年12月17日HTML5规范正式定稿，2013年5月
6日，HTML5.1正式草案公布。
-
HTML 5作为最新版本，提供了一些新的元素和一些有趣的新特性，同时也建立了一些新的规则。
这些元素、特性和规则的建立，提供了许多新的网页功能，如使用网页实现动态渲染图形、图表、
图像和动画，以及不需要安装任何插件直接使用网页播放视频等。目前企业开发中也在增大使用
HTML5的力度
HTML5的优势
世界知名浏览器厂商对HTML5的支持
通过对Internet Explorer、Google、Firefox、Safari、Opera等主要的Web浏览器发展策略调查，发现
他们都在支持HTMl5上采取措施。
微软：2010年3月16日，微软于拉斯维加斯市举行的MIX10技术大会上宣布已推出IE9浏览器开发者预览
版。此版本将更多的支持CSS3、SVG和HTML5等互联网浏览通用标准。
Google：2010年2月19日，谷歌Gears项目经理伊安一费特通过博客宣布，谷歌将放弃对Gears浏览器
插件项目的支持，以此重点开发HTML5项目。
苹果：2010年6月7日，苹果在开发者大会的会后发布了Safari 5，这款浏览器支持10个以上HTML5新技
术，包括全屏播放、HTML5视频、HTML5地理位置、HTML5的形式验证等功能。
Opera：2010年5月5日，Opera软件公司首席技术官Hakon Wium Lie先生在访华之际，接受中国软件
资讯网等少数几家媒体采访，他认为HTMl5和CSS3将是全球互联网发展的未来趋势。
mozilla fifirefox：2010年7月，Mozilla基金会发布了Firefox 4浏览器的第一个测试版，从官方文档看，
它对HTML5是完全级别的支持。
以上证据表明，目前这些浏览器已经纷纷朝着支持HTML5、结合HTML5的方向迈进，因此HTML5已经
被广泛的推行开来。
2．市场的需求
现在的市场已经迫不及待的要求有一个统一的互联网通用标准。HTML5之前的情况是，由于各浏览器之
间的不统一，光是修改Web浏览器之间的由于兼容性而引起的bug就浪费了大量的时间。而HTML5的目
标就是将Web带入一个成熟的应用平台，在HTML5平台上，视频、音频、图像、动画以及同电脑的交互
都被标准化。
3．跨平台
HTML5可以做到跨平台开发，用户只用打开浏览器即可访问应用，PC网站、各种移动设备、插件等核心
代码就可以不需要重复编写，极大的减少了开发人员的工作量。
1.3 W3C标准
-
W3C
- World Wide Web Consortium（万维网联盟）
- 成立于1994年，Web技术领域最权威和具影响力的国际中立性技术标准机构
- http://www.w3.org/
- http://www.chinaw3c.org/
-
W3C标准包括
-
结构化标准语言（XHTML 、XML）
-
表现标准语言（CSS）
-
行为标准（DOM、ECMAScript ）
-
-
常见的网页编辑工具IDE:
没有最好的，只有最合适的。就像那句话：技术没有高低之分，只有使用技术的人有强弱之别
-
记事本
-
NotePad++
-
Sublime
-
VsCode
-
WebStorm
-
HBuidler
-
IDEA
-
…
-
二、HTML 基本标签
HTML网页基本结构
-
强调H TML标签都以“< >”开始、“</ >”结束
-
说明网页基本结构中这几个标签的用法
-
网页中所有的内容都放在之间
- DOCTYPE声明：告诉浏览器，我们要使用什么规范
百度搜索DOCTYPE声明，查看菜鸟教程：https://www.runoob.com/tags/tag-doctype.html
HTML5 中仅规定了一种：
HTML 4.01 规定了三种不同的 <!DOCTYPE> 声明，分别是：Strict、Transitional 和 Frameset
<!-- DOCTYPE:告诉浏览器，我们要使用什么规范 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<!-- head标签代表网页头部 -->
<head>
<!-- title网页标题 -->
<title>这是我的第一个网页</title>
<!-- 描述性标签，它用来描述我们网站的一些信息 -->
<!-- meta一般用来做SEO -->
<meta charset="UTF-8">
<meta name="keywords" content="狂神说Java,西部开源">
<meta name="description" content="来这地方可以学习Java">
</head>
<!-- body标签代表网页的主体 -->
<body>
<!-- 没有标签的文本集中在一行,文本间有多空格只显示一个空-->
helloword!!!<br/> dddd dddddddd d
dd不会换行
<!-- 段落标签:自动换行, 文本间有多空格只显示一个空 -->
<p>这是 一个段落</p>
<p>这是下一个段落</p>
<img src="imgs/boy.jpg" width="50" height="50" alt="这是一个图片"/>
<!-- 标题标签：自动换行，文本间有多空格只显示一个空 -->
<h1>标题一</h1>
<h2>标题二</h2>
<h3>标题三</h3>
<h4>标题四</h4>
<h5>标题五</h5>
<h6>标题六</h6>
<h7>XXXX</h7>无标题七
<!-- 列表标签自动换行 -->
<!-- type='A' 表示类型 start=2 表示从第2个开始,也就是B开始 -->
<ol type="A" start="2">
<li>第一行</li>
<li>第一行</li>
<li>第一行</li>
<li>第一行</li>
</ol>
<ul type="s">
<li>第一行</li>
<li>第一行</li>
<li>第一行</li>
<li>第一行</li>
</ul>
<!-- 粗体，斜体 :没有标签的文本集中在一行,文本间有多空格只显示一个空 -->
粗体：<strong>i love you</strong>
斜体：<em>i love you</em>
`我我<b>我</b>我我<i>我</i> <u>我</u> 我喔喔 <b><i><u>我我我</u></i></b> <br/>
水分子：H<sub>2</sub>O <br/>
氧分子：O<sup>2</sup> <br/>
5小于10：5<10 <br/>
5大于10：5>10 <br/>
5小于等于10：5≤10 <br/>
5大于等于10：5≥10 <br/>
注册商标：® <br/>
版权：© <br/>
<sqan>不换行的标记，将来做处理</sqan><br/>
<a href="http://www.baidu.com" target="_">这是一个连接</a>
</body>
</html>
<!--
总结如下：
(1)一对标签
<html></html>
<head></head>
<title></title>
<meta charset="UTF-8"> 编码设置
<body></body>
<p></p> 段落，自动换行，间隙比普通大
<h1></h1> <h2></h2> <h3><h3> <h4></h4> <h5></h5> <h6></h6> 无标题7<h7></h7>
列表
<ol type="A" start="2"> 有序列表order list,
type=1 A a I（罗马数字）i,start表示从哪开始
<li>第一行</li>
<li>第一行</li>
<li>第一行</li>
<li>第一行</li>
</ol>
<ul type=""> 无序列表unorder list, type=disc(default) circle square
<li>第一行</li>
<li>第一行</li>
<li>第一行</li>
<li>第一行</li>
</ul>
自定义列表
dl:标签
dt:列表名称
dd:列表内容
公司网站底部
<dl>
<dt>学科</dt>
<dd>Java</dd>
<dd>Python</dd>
<dd>Linux</dd>
<dd>C</dd>
<dt>位置</dt>
<dd>西安</dd>
<dd>重庆</dd>
<dd>新疆</dd>
</dl>
网页结构的学习
<header>
<h2>网页头部</h2>
</header>
<section>
<h2>网页主体</h2>
</section>
<footer>
<h2>网页脚部</h2>
</footer>
<b>我</b> <i>我</i> <u>我</u> <b><i><u>我我我</u></i></b>
水分子：H<sub>2</sub>O <br/>
氧分子：O<sup>2</sup> <br/>
<sqan>不换行的标记，将来做处理</sqan>
<a href="http://www.baidu.com" target="">这是一个连接</a>
//target=_blank(新窗口) _self(子窗口) _parent _top
值 描述
_blank 在新窗口中打开 被链接文档。
_self 默认。在相同的框架中打开 被链接文档。
_parent 在父框架集中打开 被链接文档。
_top 在整个窗口中打开 被链接文档。
锚链接
1.需要一个锚标记 <a name="top">顶部</a> <a name="down">底部</a>
2.跳转到标记 <a href="#top">跳到顶部</a> <a href="#down">跳到底部</a>
功能性链接
邮件链接：mailto <a href="mailto:2052712743@qq.com">点击联系我</a>
qq链接：
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes">
<img border="0" src="http://wpa.qq.com/pa?p=2::53" alt="点击联系我" title="点击联系我"/>
</a>
html实体：特殊符号记忆方式：
方法1：& 自动显示
方法2：百度
5小于10：5<10 <br/>
5大于10：5>10 <br/>
5小于等于10：5≤10 <br/>
5大于等于10：5≥10 <br/>
注册商标：® <br/>
版权：© <br/>
空格： <br/>
(2)单标签
<hr/> 水平线分割线标签
<br/> 换行
图片
<img src="相对路径/绝对" width="宽度" height="高度" alt="提示信息"/>
src:图片地址
相对地址，绝对地址 alt:找不到图片显示 图片名字（必填）
../ -上一级目录
等等属性：按下空格会有提示选择，不用记
音频和视频 controls控制播放 autoplay自动播放
<video src="../resources/video/片头.mp4" controls autoplay></video>
<audio src="../resources/audio/世界这么大还是遇见你.mp3" controls autoplay></audio>
-->
三、HTML 层次(div)、表格(table)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>层，表格学习</title>
<meta charset="UTF-8">
<style type="text/css">
div{
width:200px;
height:200px;
}
#div1{
background-color:#ABC;
}
#div2{
background-color:#BCA;
left:100px;
top:100px;
}
#div3{
background-color:#CBA;
left:200px;
top:200px;
}
</style>
</head>
<body>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div><br/>
<table border="1" width="600" cellspacing="0" cellpadding="4">
<tr align="center">
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
</tr>
<tr align="center">
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
</table>
<hr/>
<table border="1" width="600" cellspacing="0" cellpadding="4">
<tr align="center">
<th>名称</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
<th>操作</th>
</tr>
<tr align="center">
<td>1</td>
<td rowspan="2">1</td>
<td>1</td>
<td>1</td>
<td><img src="imgs/del.jpg" width="24" height="24"/> </td>
</tr>
<tr align="center">
<td>2</td>
<td>2</td>
<td>2</td>
<td><img src="imgs/del.jpg" width="24" height="24"/> </td>
</tr>
<tr align="center">
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td><img src="imgs/del.jpg"width="24" height="24"/> </td>
</tr>
<tr align="center">
<td>总计</td>
<td colspan="4">100</td>
</tr>
</table>
</body>
</html>
<!--
(1)一对标签
<div></div> 层
(2)表格用法
<table border(表格边框) width(表格长度) cellspacing(表格间距) cellpadding(表格填充) >
<caption>表名</caption>
<tr align="center"(文本居中)> //align="center"(文本居中)只能用在tr / th td
<th></th>
</tr>
<tr align="center"(文本居中) left(左对齐) right(右对齐·)>
<td></td > //rowspan="2" (向下合并2表格) //colspan="2"(向右合并2表格)
</tr>
</table>
也可
<table>
<thead>
<tr><th></th></tr>
</thead>
<tbody>
<tr><td></td></tr>
</tbody>
</table>
(3)单标签:分割线
<hr/>
__>
四、HTML 表单(from)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>表单标签学习</title>
<meta charset="UTF-8">
</head>
<body>
<!-- 表单from
action:表单提交的位置，可以是网站，也可以是一个请求处理地址
method:post,get提交方式
get方式提交：我们可以在url中看到我们提交的信息，不安全，高效
post:比较安全，传输大文件
-->
<from action="demo04.html" mothod="post">
<!-- get(不用) -->
<!-- 文本输入框：input type="text"
value="狂神" : 默认初始值
placeholder="请输入用户名" 提示语默认显示，输入即消失(很实用)
maxlength="8": 最长能写几个字符
size="30": 文本框长度
-->
昵称：<input type="text" name="name1" placeholder="请输入用户名"/> <br/>
<!-- 密码输入框：input type="password" -->
密码：<input type="password" name="pwd"/> <br/>
<!-- 单选框(只可勾选一个)：input type="radio" name值要相同（达到互斥效果），
当checked=“checked”可以省略直接写checked (checked表示默认选中) -->
性别：<input type="radio" name="gender" value="male" checked="checked"> 男
<input type="radio" name="gender" value="female"> 女 <br/>
<!--复选框(选多)input type="checkbox 服务器收到一个hobby数组，其他同单选框，-->
爱好：<input type="checkbox" name="hobby" value="basketball" checked/>篮球
<input type="checkbox" name="hobby" value="foolball" checked/>足球
<input type="checkbox" name="hobby" value="earth"/>地球 <br/>
<!--下拉列表：<select> </select> -->
星座：<select name="star">
<option> 白羊座</option>
<option> 金牛座</option>
<option selected> aa座</option>
<option> bb座</option>
<option> cc座</option>
<option> dd座</option>
</select><br/>
<!-- 文本域：<textarea> </textarea>
cols="4" rows="30"
-->
备注：<textarea name="remark" rows="4" cols="30"></textarea> <br/>
<!--中间不能换行-->
<!-- 按钮
input type="button" 普通按钮
input type="image" 图片按钮
input type="submit 提交按钮 value=提交 默认值
input type="reset 重置按钮 value=重置 默认值
-->
<p><input type="image" src="imgs/boy.jpg"> </p>
<input type="submit" value="注册"/>
<input type="reset" value="重置"/>
<input type="button" value="这是一个普通按键"/>
</from>
<form action="1.我的第一个网页.html" method="get">
<!-- 文件域
input type="file name="files"
-->
<p>
<input type="file" name="files">
<input type="button" value="上传" name="upload">
</p>
<!-- 邮件验证 -->
<p>邮箱：
<input type="email" name="email">
</p>
<!-- url验证 -->
<p>URL：
<input type="url" name="url">
</p>
<!-- 数字验证 -->
<p>数字：
<input type="number" name="num" max="100" min="0" step="10">
</p>
<!-- 滑块
input type="range" name="voice"
-->
<p>滑块：
<input type="range" name="voice" min="0" max="100" step="2">
</p>
<!-- 搜索框
input type="search" name="search"
-->
<p>搜索框：
<input type="search" name="search">
</p>
<!-- 只读，禁用,隐藏域
只读：readonly
禁用：disabled
隐藏域：hidden
-->
<!-- 增强鼠标可用性 -->
<p>
<label for="mark">你点我试试</label>
<input type="text" id="mark">
</p>
<!-- 表单初级认证:提示，不能为空,正则表达式
placeholder="请输入用户名"
required 不能为空
pattern="" 正则表达式 //工具网站https://www.jb51.net/tools/regexsc.htm
-->
<p>自定义邮箱：
<input type="text" name="diyemail" pattern="/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/
/^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/或\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*">
</p>
<p>
<input type="submit">
<input type="reset">
</p>
</form>
</body>
</html>
<!--
(1)一对标签:表单用法
<from>
昵称：<input type="text" name="name1"/>
//type="text" "password"(文本类型) name必须要设置，服务器接收要用的变量名
</from>
表单的高级应用：
隐藏域：在浏览器中看不到隐藏域，但是在提交表单时可以看到隐藏域的内容被提交至服务器
<input type="hidden" value="666" name="userid">
只读、禁用：W3C HTML5标准中，规定对于布尔类型的属性，属性值可以省略
讲解只读和禁用的语法，强调不能单写readonly或disabled，必须写readonly ＝”readonly”和 disabled=“disabled”，介绍只读和禁用的使用场合
<input name="name" type="text" value="张三" readonly>
<input type="submit" value="保存" disabled>
表单元素的标注
增强鼠标的可用性
自动将焦点转移到与该标注相关的表单元素上
它的for属性对应的id与表单元素id一致
<label for="male">标注的文本</label>
<input type="radio" name="gender" id="male"/>
<p>
<label for="mark">你点我试试</label>
<input type="text" id="mark">
</p>
表单初级验证的方法
表单验证的好处：
（1）减轻服务器的压力。
（2）保证数据的可行性和安全性。
在客户端就对表单进行验证是非常有必要的
placeholder：提示语默认显示，当文本框中输入内容时提示语消失
<input type="search" name="sousuo" placeholder="请输入要搜索的关键字"/>
required：规定文本框填写内容不能为空，否则不允许用户提交表单
<input type="text" name="username" required/>
pattern：用户输入的内容必须符合正则表达式所指的规则，否则就不能提交表单
javaScript课程会详解:正则表达式
<input type="text" name="tel" required pattern="^1[358]\d{9}" />
-->
五、HTML 页面框架(无notbody的framset+frame、iframe)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>页面框架学习</title>
<meta charset="UTF-8">
</head>
<frameset rows="20%,*">
<frame src="frames/top.html"/>
<frameset cols="15%,*">
<frame src="frames/left.html",*/>
<frameset rows="80%,*">
<frame src="frames/main.html"/>
<frame src="frames/bottom.html"/>
</frameset>
</frameset>
</frameset>
</html>
<!--
外联框架：使用frameset 就不能使用body标签 代表页面框架，现在已经被淘汰，了解
<frameset></frameset> frameborder="no"(不显示框架边框) scrolling="no" border="0" framespacing="0" allowfullscreen="true"
<frame /> 引入具体页面
内联框架：iframe 在一个页面嵌套一个页面
<iframe src="" name="hello" frameborder="1" width="1000px" height="800px"></iframe>
<a href="1.我的第一个网页.html" target="hello">点击跳转</a>
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内联框架的学习</title>
</head>
<body>
<!-- iframe内联框架
src:地址
w-h:宽度高度
-->
<iframe src="" name="hello" frameborder="1" width="1000px" height="800px"></iframe>
<a href="1.我的第一个网页.html" target="hello">点击跳转</a>
<!--
<iframe src="//player.bilibili.com/player.html?aid=55440782&bvid=BV1p4411P7V3&cid=96932168&page=17" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true">
</iframe>
-->
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
