HTML5学习
引言
HTML是什么？
Hyper Text Markup Language **(超文本标记语言) **
W3C标准
W3C
-
World Wide Web Consortium (万维网联盟)
-
成立于1994年，Web技术领域最权威和最具影响力的国际中立性技术标准机构
-
http://www.w3.org/
-
http://www.chinaw3c/org/
W3C标准包括
-
结构化标准语言（HTML、XML）
-
表现标准语言（CSS）
-
行为标准语言 (DOM、ECMAScript)
HTML基本结构
<!--注释的格式-->
<!--DOCTYPE: 这个作用是告诉浏览器我们使用什么规范 -->
<!--<body>、</body>等成对出现的标签，分别叫开放标签和闭合标签
单独呈现的标签叫自闭合标签：<hr/>加 / 为了形成规范-->
<!DOCTYPE html>
<html lang="en">
<!-- head标签代表网页头部-->
<head>
<!-- meta描述性标签，它用来描述我们网站的一些信息-->
<!-- meta一般用来做SEO-->
<meta charset="UTF-8">
<meta name="keywords" content="关键词"><!---->
<meta name="description" content="介绍、概括">
<!-- title网页标题-->
<title>我的第一个网页</title>
</head>
<!-- body标签代表网页主体-->
<body>
</body>
</html>
网页的基本标签
标题标签
<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
段落标签
<!--段落标签-->
<p>天涯 的尽头是风沙</p>
<p>红尘 的故事叫牵挂</p>
<p>封刀隐没在寻常人家</p>
<p>东篱下</p>
换行标签
<!--换行标签(小间距)-->
天涯 的尽头是风沙<br/>
红尘 的故事叫牵挂<br/>
封刀隐没在寻常人家<br/>
东篱下<br/>
水平线标签
<hr/><!--水平线-->
字体样式标签
<!-- 粗体 ，斜体-->
<h1>字体样式标签</h1>
粗体：<strong>I Love You</strong>
斜体：<em>I Love You</em>
特殊符号
<!-- 特殊符号-->
空 格： <br/>
空 格：
<br/>
大于：>
<br/>
小于：<
<br/>
版权符号：©King
图像标签
常见的图像格式
- JPG
- GIF
- PNG
- BMP
- …
格式
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ey5TtVsY-1632376082836)(D:\图片\学习截图\4C07FD958E1D2F72F3B370C89A054955.png)]
代码示例
<!--img学习
../ --上一级目录
alt --图片加载失败时所显示的文字(等于是名字——必填)
title -- 鼠标悬停时显示的文字
-->
<img src="../resourse/images/风景.jpg" alt="风景" title="悬停文字" width="300px" height="250px">
链接标签
格式
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-A8FyZ52y-1632376082838)(D:\图片\学习截图\20210923092741.png)]
代码示例
<!-- a标签href :必填，表示要跳转到哪个页面target :表示窗口在哪里打开 _blank 在新页面打开 _self 在当前页面打开--><a href="1.我的第一个网页.html">点击我跳转到页面一</a> <a href="https://www.baidu.com">百度</a><br/><p> <a href="2.基本标签.html" target="_blank"> <img src="../resourse/images/风景.jpg" alt="风景" title="悬停文字" width="300px" height="250px"> </a></p>
锚链接
<!--锚标签 1.需要一个标记 2.跳转到标记--><a href="#top">回到顶部</a><a name="down">down</a>
<!--使用name作为标记--><a name="top">顶部</a>
<a href="4.链接标签.html#top"></a> <!--跳转到“4.链接标签”这个页面的“顶部”-->
功能性链接
<!--功能性链接 邮箱链接 ：mailto--><a href="mailto:1987316649@qq.com">点击联系我</a>
行内元素和块元素
块元素
- 无论内容多少，该元素独占一行
- （p、h1-h6…）
行内元素
- 内容撑开宽度，左右都是行内元素的可以排在一行
- （a、strong、em …）
列表
有序列表
<!--有序列表应用范围：试卷、问答......--><ol> <li>Java</li> <li>Html</li> <li>PHP</li> <li>Python</li></ol>
无序列表
<!--无序列表应用范围 ：导航 ，侧边栏......--><ul> <li>Java</li> <li>Html</li> <li>PHP</li> <li>Python</li></ul>
自定义列表
<!--自定义列表dl:标签dt:列表名称dd:列表内容--><dl> <dt>学习方向</dt> <dd>Java</dd> <dd>Html</dd> <dd>PHP</dd> <dd>Python</dd> <dt>位置</dt> <dd>上海</dd> <dd>福州</dd> <dd>南平</dd></dl>
表格
<!--表格table行 tr列 td跨行 rowspan跨列 colspan边框 border--><table border="1px"> <tr> <!-- colspan跨列--> <td colspan="3">1-1</td> </tr> <tr> <!-- rowspan跨行--> <td rowspan="2">2-1</td> <td>2-2</td> <td>2-3</td> </tr> <tr> <td>3-2</td> <td>3-3</td> </tr></table>
媒体元素
<!--音频和视频src : 资源路径controls : 控制条autoplay : 自动播放--><!--视频--><video muted src="..\resourse\video\temp01.mp4" controls autoplay></video><!--音频--><audio src="..\resourse\video\temp01.mp4" controls></audio>
页面结构分析
| 元素名 | 描述 | |
|---|---|---|
| header | 标题头部区域的内容（用于页面或页面中的一块区域） | |
| – | – | |
| footer | 标记脚部区域的内容（用于整个页面或页面的一块区域） | |
| – | – | |
| section | Web页面中的一块独立区域（主体） | |
| – | – | |
| article | 独立的文字内容 | |
| – | – | |
| aside | 相关内容或应用（常用于侧边栏） | |
| – | – | |
| nav | 导航类辅助内容 |
iframe内联框架
格式
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wQdpnPwv-1632376082839)(D:\图片\学习截图\20210923103252.png)]
代码示例
<!--iframe 内联框架
src ：地址
-->
<iframe src="" name="hao123" frameborder="0" width="1000px" height="800px"></iframe>
<a href="https://www.hao123.com" target="hap123">点击跳转</a>
表单
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bkQz4tf0-1632376082842)(D:\图片\学习截图\20210923104047.png)]
表单标签
表单的提交方式（method）
method : post ， get 提交方式
get方式提交：我们可以在url当中看到我们提交的信息，不安全
post方式提交：比较安全，可以传输大文件
h1>注册</h1>
<!--表单form
action :表单提交的位置，可以是网站，也可以是一个请求处理地址
method : post ， get 提交方式
get方式提交：我们可以在url当中看到我们提交的信息，不安全
post方式提交：比较安全，可以传输大文件
-->
<form action="2.基本标签.html" method="post">
</form>
文本框
<!-- 文本框 input type="text"
name 自定义名字（变量名）
required maxlength 最大长度
size 文本框显示长度 -->
<p>名字：<input type="text" name="username" placeholder="请输入用户名" required maxlength="8" size="30"/></p>
密码框
<!-- 密码框 input type="password"
-->
<p>密码：<input type="password" name="pwd"/></p>
单选框
<!-- 单选框 ： input type="radio"
value : 单选框的值
name : 表示组
checked : 默认-->
<p>
<input type="radio" name="sex" value="boy"/>男
<input type="radio" name="sex" value="girl"/>女
</p>
多选框
<!-- 多选框 ： input type="radio"
value:单选框的值
name：表示组
checked: 默认-->
<p>
<input type="checkbox" name="hobby" value="sleep"/>睡觉
<input type="checkbox" name="hobby" value="code" checked/>编程
<input type="checkbox" name="hobby" value="game"/>游戏
</p>
下拉框
<!-- select 下拉框,列表框-->
<p>国家：
<select name="列表名称">
<option value="nation" >中国</option>
<option value="nation">美国</option>
<option value="nation">日本</option>
<option value="nation"selected>瑞士</option>
</select>
</p>
文本域
<!--文本域
cols --列
row --行
-->
<p>
反馈：
<textarea name="textarea" cols="50" rows="10">提示信息</textarea>
</p>
文件域
<!--文件域
<input tpye="file" name="files"
-->
<p>
文件：
<input type="file" name="files">
<input type="button" value="上传" name="upload">
</p>
按钮
<!-- 按钮 ： input type="button"
value = "想要在按钮上显示的文字"
input type="image"（图片也能实现点击的效果）
-->
<p>
按钮：<input type="button" name="btn1" value="点击变长"/>
图片按钮：<input type="image" src="../resourse/images/风景.jpg"/>
</p>
提交与重置按钮
<!-- 按钮 ： input type="submit"
input type="reset"
value = "想要在按钮上显示的文字"
input type="image"
-->
<p>
<input type="submit" value="上缴"/>
<input type="reset" value="夺回"/>
</p>
邮箱验证
<!--邮件验证-->
<p>邮箱：
<input type="email" name="emails">
</p>
自定义邮箱验证
<!--自定义邮件验证
在pattern当中输入正则表达式
正则表达式查询网站：https://www.jb51.net/tools/regexsc.htm
-->
<p>邮箱：
<input type="text" name="diyemails" pattern="正则表达式">
</p>
URL验证
<!--URL验证-->
<p>URL：
<input type="url" name="url">
</p>
数字验证
<!--数字验证-->
<p>商品数量：
<input type="number" name="num" max="100" min="1" step="1">
</p>
滑块
<!--滑块-->
<p>音量：
<input type="range" name="voice" max="100" min="0" step="1">
</p>
搜索框
<!--搜索框-->
<p>查询：
<input type="search" name="search" >
</p>
增强鼠标复用性
在鼠标点击输入框前端文字时，文本框自动进入输入状态
<!--增强鼠标可用性-->
<label for="mark">点我试下</label>
<input type="text" id="mark">
<p>
<input type="submit" />
<input type="reset" />
</p>
表单的应用
| 元素名 | 作用效果 | |
|---|---|---|
| readonly | 只读 | |
| – | – | |
| hidden | 隐藏域 | |
| – | – | |
| disable | 禁用 |
表单的初级验证
| 元素名 | 作用效果 | |
|---|---|---|
| placeholder | 在输入框中显示提示信息（开始输入时则会消失） | |
| – | – | |
| required | 非空判断 | |
| – | – | |
| pattern | 输入正则表达式进行判断 |
扫一扫
26万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
