文章目录
W3C标准：
结构化标准语言(XHTML、XML)
表现标准语言(CSS)
行为标准(DOM、ECMAScript)
1.什么是HTML？
HTML：Hyper Text Markup Language(超文本标记语言)，一种标识性的语言。
超文本包括：文字、图片、音频、视频、动画等；
2.网页基本信息
<!DOCTYPE html> <!--DOCTYPE(文档类型):告诉浏览器要使用什么规范，默认HTML5-->
<html lang="en"> <!--所有网页代码都要写在这里面-->
<head> <!-- head标签代表网页头部-->
<meta charset="UTF-8">
<!--meta标签：java描述性标签，用来描述网站的一些信息；eg:网页的关键字、描述等-->
<!--meta一般用来做SEO-->
<meta name="keyboards" content="html">
<meta name="description" content="用来学习的html一个网页">
<title>小红帽</title> <!-- “小红帽”是打开网页时的网页标题-->
</head>
<body> <!-- body标签代表网页主体内容-->
Hello,html
</body>
</html>
图像显示：
3.网页基本标签
-
标题标签：<h·x></h·x>
-
段落标签:<p·></p·>
-
换行标签:<br/·>
-
水平线标签：<hr/·>
-
字体样式标签:粗：<strong·></strong·>斜：<em·></em·>
-
注释和特殊符号:<!----·>;&字母;
（‘·’是为了方便标签显示）<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>基本标签学习</title> </head> <body> <!--标题标签:<hx></hx>--> <h1>一级标签</h1> <h2>二级标签</h2> <h3>三级标签</h3> <h4>四级标签</h4> <h5>五级标签</h5> <h6>六级标签</h6> <!--段落标签：<p></p> p+[tab]快捷生成--> <p>窗前明月光</p> <p>疑是地上霜</p> <p>举头望明月</p> <p>低头思故乡</p> <!-- 水平线标签:hr/('/'最好带上) 自闭和标签--> <hr/> <!--换行标签：br/('/'最好带上) 自闭和标签--> 窗前明月光<br/> 疑是地上霜<br/> 举头望明月<br/> 低头思故乡<br/> <!--字体样式标签：粗体：<strong></strong>，斜体：<em></em>--> 粗体：<strong>这里是粗体</strong><br/> 斜体：<em>这里是斜体</em> <!--特殊符号：&字母;--> <br/>空格：空 格 <br/>大于号：> <br/>小于号：< <br/>版权符号：©版权所有cqr <br/> </body> </html>
4.图像标签
常见的图像格式：
- JPG
- GIF
- PNG
- BMP：位图
- ······
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图像标签学习</title>
</head>
<body>
<!--图像标签:<img
src=图片地址（相对地址（推荐），绝对地址）
../ 代表上一级目录
alt=当src指向的路径不对时，网页内显示该图片（alt）的名字>
title：鼠标悬停在图片上时显示的文字
width:图片的宽度
height：图片的高度-->
<img src="../resource/image/虎太郎1.png" alt="大虎子" title="悬停文字"
width="300" height="300">
</body>
</html>
图像显示成功：
图像显现失败：
5.链接标签
- 文本超链接
- 图像超链接
- 锚链接
- 功能性链接：邮箱链接等
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>链接标签学习</title>
</head>
<body>
<!--用name做标记，通过"top"跳转到顶部-->
<a name="top">顶部</a>
<!--a标签
href:必填，表示要跳转到那个页面
target：表示窗口在哪里打开
_blank:在新标签中打开
_self:在自身网页中打开(默认）-->
<a href="myfirstHtml.html" target="_blank">点击我跳转到第一个页面</a><br/> <!--文字超链接跳转到新页面-->
<a href="second.html" target="_self">点击我跳转到第二个页面</a><br/>
<br/>
<!--图片超链接跳转-->
<a href="myfirstHtml.html">
<img src="../resource/image/虎太郎.png" alt="大虎子" title="悬停文字"
width="300" height="300">
</a><br/>
<a href="myfirstHtml.html">
<img src="../resource/image/虎太郎.png" alt="大虎子" >
</a><br/>
<a href="myfirstHtml.html">
<img src="../resource/image/虎太郎.png" alt="大虎子" >
</a><br/>
<a href="myfirstHtml.html">
<img src="../resource/image/虎太郎.png" alt="大虎子" >
</a><br/>
<a href="myfirstHtml.html">
<img src="../resource/image/虎太郎.png" alt="大虎子" >
</a><br/>
<!--锚链接:#标记名称
1.一个锚标记：name=top
2.跳转标记：#-->
<a href="#top">回到顶部</a> <!--同一页面内跳转-->
<a href="second.html#down">跳转到基本标签学习页面</a> <!--不同页面跳转:跳到second页面的底部-->
<!--功能性链接
邮件链接：mailto;
QQ链接-->
<a href="mailto:197***14@qq.com">我的邮箱</a>
</body>
</html>
显示效果：
6.行内元素和块元素
块元素：无论内容多少，该元素独占一行 块标签：p,h1-h6···
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
<p>窗前明月光</p>
<p>疑是地上霜</p>
<p>举头望明月</p>
<p>低头思故乡</p>
显示效果：
行内元素：内容撑开宽度，左右都是行内元素的可以排一行,不会自动换行；行内标签：a,strong,em···
粗体：<strong>这里是粗体</strong>
斜体：<em>这里是斜体</em>
显示效果：
7.列表
什么是列表？
列表就是信息资源的一种展示形式，它可以使信息结构化和条理化，并以列表的样式显现出来
列表的分类：
无序列表：(ul)
有序列表：(ol)
有序和无序的子标签都是：li
自定义列表：
列表名称(dt)+内容(dd)
<!--有序列表:ol(order list)
子标签：li-->
<ol>
<li>C/C++</li>
<li>Java</li>
<li>数据结构</li>
</ol>
<hr/>
<!--无序列表:ul-->
<ul>
<li>C/C++</li>
<li>Java</li>
<li>数据结构</li>
</ul>
<!--自定义列表:
dl：标签
dt:列表名字
dd:列表内容-->
<hr/>
<dl>
<dt>已学科目</dt>
<dd>C/C++</dd>
<dd>Java</dd>
<dd>数据结构</dd>
<dt>待学科目</dt>
<dd>Python</dd>
<dd>网络安全</dd>
</dl>
</body>
显示效果：
8.表格标签
表格作用：简单，通用，结构稳定
基本结构：单元格、行、列、跨行、跨列
<!--表格标签：table
行：tr table rows
列：td table data
跨行：rowspan
跨列：colspan-->
<table border="1px"> <!--birder显示表格边缘-->
<tr> <!--一行有三列-->
<!-- colspan="3" : 跨3列-->
<td colspan="3">1-1</td>
</tr>
<!-- rowspan="2" :跨2行-->
<tr>
<td rowspan="2">2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
</tr>
</table>
显示效果：
9.视频和音频
video和audio
<body>
<!--视频：video
src:视频路径
controls:显示进度条
autoplay：打开网页时自动播放-->
<video src="../resource/video/视频video.mp4" controls ></video>
<!--音频：audio-->
<br/>
<audio src="../resource/audio/audio.mp3" controls></audio>
</body>
显示效果：
10.页面结构
| 元素名 | 描述 |
|---|---|
| header | 标题头部区域的内容 |
| footer | 标记脚部区域的内容 |
| section | web网页中的一块独立的区域 |
| article | 独立的文章内容 |
| aside | 相关内容或应用（侧边栏） |
| nav | 导航类辅助内容 |
<!--header-->
<header>
<h1>这里是网页的头部</h1>
</header>
<!--section-->
<section>
<h2>这里是网页的内容</h2>
</section>
<!--footer-->
<footer>
<h6>这里是jiojio位置</h6>
</footer>
显示效果：
此后的name,为了统一，方便学习，都要加上
11.iframe内联框架
- 一个网站里嵌套另外一个
<body>
<!--内联框架：iframe
src:内联的网页地址
name:框架标识名
width-height:宽-高
-->
<iframe src="列表学习.html" name="hello" frameborder="0" width="400" height="300"></iframe>
<!--<iframe src="http://www.baidu.com" name="hello" frameborder="0"></iframe>-->
<a href="表格标签.html" target="hello" >点我去表格标签学习</a>
</body>
显示效果：
12.1.表单&单选框&多选框
表单form：eg:登录窗口···
-
form: action method(get post)
-
文本框 type="text"和value：文本框内默认值
-
密码框type=“password”
-
单选框：type=“radio” ；单选选项的name相同
-
多选框：type=“checkbox” ；选项的name相同
-
按钮：type=“button” 普通按钮
type=“image” 图片按钮
type=“submit” 提交按钮
type=“reset” 重置按钮
value：按钮上的文字
<body>
<h1>登录页</h1>
<!--form表单
action：表单提交的位置(网页等)
method：提交方式:
get:不安全，可通过url显示出提交的信息（密码等）
post:安全，可提交大文件-->
<form action="myfirstHtml.html" method="get" >
<!-- 文本框：input type="text"
value:文本框内的默认初始值
maxlength:最长字符数
size:文本框的长度
-->
<p>用户名：<input type="text" name="username" > </p>
<p>密码：<input type="password" name="password" maxlength="5" ></p>
<p>性别：
<!-- 单选框：type="radio"
实现单选功能时，选项要在同一个组内（既name值相同）
使用radio时，必须要有value和name-->
<input type="radio" value="boy" name="sex"/>男
<input type="radio" value="girl" name="sex"/>女
</p>
<!-- 多选框：type="checkbox"
多选选项同一name
value：名字
-->
<p>爱好：
<input type="checkbox" value="chat" name="hobby">聊天
<input type="checkbox" value="swim" name="hobby">游泳
<input type="checkbox" value="game" name="hobby">游戏
<input type="checkbox" value="code" name="hobby">编码
</p>
<!-- 按钮：
type="button" 普通按钮
type="image" 图片按钮
type="submit" 提交按钮
type="reset" 重置按钮
value：按钮上的文字
-->
<p>按钮：
<input type="button" value="按钮上的名字" name="btn1">
<input type="image" src="../resource/image/虎太郎.png" > <!--点击图片可直接跳转页面-->
</p>
<p><input type="submit" >
<input type="reset" ></p>
</form>
</body>
登录：
get：
post:
12.2.下拉框&文本域&文件域
-
下拉框：select
下拉选项：option
-
文本域：textarea
-
文件域：type=“file”
<body>
<form action="myfirstHtml.html" method="get">
<!--下拉框：select
下拉选项：option-->
<p>国家：
<select name="country">
<option value="China">中国</option>
<option value="America">美国</option>
<option value="French" selected>法国</option>
<option value="Japan">日本</option>
</select>
</p>
<!-- 文本域：textarea-->
<p>文本域：
<textarea name="context" cols="30" rows="10">文本的内容，随意填写</textarea>
</p>
<!-- 文件域：type="file"-->
<p>文件选择:
<input type="file" name="files">
<input type="button" name="upload" value="上传">
</p>
<p>
<input type="submit">
</p>
</form>
</body>
显示效果：
12.3.邮件验证&URL&数字&滑块&搜索框
- 邮件验证：type=“email”
- URL：type=“url”
- 数字(价格)：type=“number”,step=x 数值一次变动的范围为x
- 滑块(eg：音量)：type=“range”
- 搜索框：type=“search”
<!-- 邮件验证：type="email-->
<p>邮箱：
<input type="email" name="email">
</p>
<!-- URL：type="url"-->
<p>地址：
<input type="url" name="URL">
</p>
<!-- 数字：type=number
min:最小值
max:最大值
step：数字一次变动的值-->
<p>数量：
<input type="number" name="num" min="1" max="20" step="3">
</p>
<!-- 滑块：type="range" -->
<p>音量：
<input type="range" name="audio" min="0" max="2" step="1">
</p>
<!-- 搜索框：type="search"-->
<p>搜索：
<input type="search" name="sarch" >
</p>
展示：
13.表单的应用
- 隐藏域 ：hidden 隐藏掉对应元素
- 只读：readonly 只能读
- 禁用：disabled 禁止使用，按钮变灰
<!-- 邮件验证：type="email-->
<p>邮箱：
<input type="email" name="email" value="197***8" readonly> <!--value值默认只能看-->
</p>
<!-- URL：type="url"-->
<p>地址：
<input type="url" name="URL" hidden>
</p>
<p>
<input type="submit" disabled>
</p>
效果：
14.表单的初级验证
作用：数据的安全，减压
常用方式：
- placeholder：提示性信息，显示在输入框中
- required：文本框值不能为空，非空判断
- pattern 正则表达式(具体值可根据实际情况上网查找，不建议自己记忆)
<!-- 邮件验证：type="email-->
<p>邮箱：
<input type="email" name="email" placeholder="请输入正确邮箱" required>
</p>
<!-- URL：type="url"-->
<p>地址：
<input type="url" name="URL" pattern="/^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/">
</p>
placeholder和required:
正则表达式：
总结
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
