什么是HTML

Hyper Text Markup Language(超文本标记语言)

超文本包括：文字，图片，音频，视频，动画等

w3c标准

WOrld Wide Web Consortium(万维网联盟)

成立于1994年，Web技术领域最权威和具影响力的国际中立性技术标准机构

https://www.w3.org

https://www.chinaw3c.org

W3C标准包括

结构化标准语言（HTML、XML）
表现标准语言（CSS）
行为标准（DOM、ECMAScript）

改默认浏览器

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-m39SxtN2-1608813934210)(C:\Users\王东梁\AppData\Roaming\Typora\typora-user-images\image-20201224164932645.png)]

SEO

汉译为搜索引擎优化。是一种方式：利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。

<!--告诉浏览器，我们要是用什么规范 -->
<!DOCTYPE html>
<html lang="en">
<!--head 网页头部-->
<head><!--    meta描述性标签，用来描述我们网站的一些信息--><!--    meta一般用来做SEO--><meta charset="UTF-8"><meta name="keywords" content="跟狂神学Java"><meta name="description" content="可以学习java"><!--    title网页标题--><title>我的第一个网页</title>
</head>
<body>
Hello，World！
</body>
</html>

网页基本标签

标题标签标题
段落标签
一段话
换行标签一句话
和段落标签的区别是其比较紧凑
水平线标签
字体样式标签粗体粗体斜体

注释和特殊符号

<!--特殊符号-->
空 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格：
大于号&gt;
小于号&lt;
&copy;版权符号

Tab键

自动补全

图像标签

常见的图像格式

JPG

GIF

PNG

BMP

<img src="../resources/image/1.jpg" alt="我的图片" title="悬停文字" width="1366" height="768">
<!--img学习
src:图片地址相对地址（推荐使用），绝对地址../返回上一级目录  --><!--alt 图片加载失败会显示的内容“”。-->

链接标签

超链接

页面间链接

从一个页面链接到另一个页面

<!-- a标签
href：必填，表示要跳转到那个页面
target：表示窗口在那里打开
_blank 在新标签中打开
_self   在自己的网页中打开
-->

锚链接

<!--使用name作为标记-->
<a name="top">顶部</a>
1.需要一个锚标记
2.跳转到标记-->
<a href="#top">回到顶部</a>
<a name="down">底部</a>

功能性链接

<!--功能性连接
邮件连接：mailto
QQ链接-->
<a href="mailto:1395950933@qq.com">点击联系我</a>

QQ推广的实现

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-juQ88lrQ-1608813934212)(C:\Users\王东梁\AppData\Roaming\Typora\typora-user-images\image-20201224183331980.png)]

uin=2764954910

行内元素和块元素

块元素：无论内容有多少，元素自己独占一行

例如：

行内元素：内容撑开宽度，左右都是行内元素的可以排在一行

例如：

列表标签

列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷地获得相应的信息。

列表的分类：

无序列表

<ul><li>元素1</li><li>元素2</li><li>元素3</li>...
</ul>

有序列表

<ol><li>元素1</li><li>元素2</li><li>元素3</li>...
</ol>

定义列表

<dl>
<dt>自定义列表1</dt>
<dd>自定义列表1的元素1</dd>
<dd>自定义列表1的元素2</dd>
<dd>自定义列表1的元素3</dd><dt>自定义列表2</dt>
<dd>自定义列表2的元素1</dd>
<dd>自定义列表2的元素2</dd>
<dd>自定义列表2的元素3</dd>
</dl>

表格标签

表格标签就是html通过表格标签在网页中显示一个类似Excel表格的内容，表格的基本结构有以下几个部分：

单元格
行
列
跨行 1-1
跨列 2-1

<table border="1px"><tr><td colspan="2">1-1</td><td>1-2</td></tr><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>

音频和视频

<!--音频和视频
src：资源路径
controls：控制条
autoplay：自动播放-->
<video src="../resources/video/2.mp4" controls autoplay></video>
<audio src="../resources/audio/3.mp3" controls autoplay></audio>

页面结构分析

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yGn0al4s-1608813934214)(C:\Users\王东梁\AppData\Roaming\Typora\typora-user-images\image-20201224191404959.png)]

iframe内联架构

<!--iframe内联框架
src：地址
w-h：宽，高-->
<iframe src="" name="change" frameborder="0" width="1000" height="800">点击跳转学习java</iframe>
<a href="https://www.baidu.com" target="change" >点击跳转</a>//内联框架的嵌入

表单

<!--表单form
action:表单提交的位置，可以是网站，也可以是一个请求处理地址
method:post，get 提交方式get方式提交：我们可以在url中看到我们提交的信息，不安全，但高效post：比较安全，传输大文件-->
<form action="demo02.html" method="post"><!--文本输入框 Input type="text"  submit提交按钮 reset重置按钮  --><p>名字：<input type="text" name="username"/></p><p>密码：<input type="password" name="pwd"/></p><p><input type="submit"> <input type="reset"></p>
</form>

单选框多选框

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MvXdzrKS-1608813934217)(C:\Users\王东梁\AppData\Roaming\Typora\typora-user-images\image-20201224193659751.png)]

<!--单选框按钮 input type="radio" name必须为一致，才能表示为同一组，才能只选择一个input标签 类型是radio时，必须有valuechecked 默认选中--><p><input type="radio" value="boy" name="sex"/>男<input type="radio" value="girl"name="sex">女
<!-- 多选框标签 input type="checkbox"   --><input type="checkbox" value="sleep" name="hobby"/>睡觉<input type="checkbox" value="talk" name="hobby"/>聊天<input type="checkbox" value="game" name="hobby" checked/>游戏<input type="checkbox" value="eat" name="hobby"/>吃东西</p>

按钮

<!--    按钮input type="button" 普通按钮input type="image"  图片按钮input type="submit" 提交按钮input type="reset"  重置按钮-->
<p><input type="button" name="btn1" value="按钮名字"/><input type="image" src="../resources/image/1.png"/>//和submit拥有相同的功能
</p>
<p><input type="submit"><input type="reset"></p>

下拉框

<!--下拉框 列表框<select>name是下拉框的名字option value 是下拉框可以选择的值selected是默认为那个列
-->
<p>国家<select name="列表名称" ><option value="china" selected>中国</option><option value="us">美国</option><option value="agt">阿根廷</option><option value="md">缅甸</option></select>
</p>

文本域和文件域

<!--    文本域
cols="30" rows="10" 行，，，列
-->
<p>反馈：<textarea name="textarea"  cols="30" rows="10">文本内容</textarea></p>
<!--    文件域-->
<p><input type="file" name="files"><input type="button" value="上传" name="upload">
</p>

简单验证

<!--  邮箱验证  -->
<p><input type="email" name="email"></p>
<!--    URL验证-->
<p><input type="url" name="url"></p>
<!--    数字验证
max最大数量
min 最小数量
step 每次点击增加或减少的数量-->
<p><input type="number" name="num" max="100" min="1" step="1"></p>

滑块

<!--滑块-->
<p>音量<input type="range" name="voice" max="100" min="0" step="2" ></p>

搜索框(删除东西比较容易)

<!--    搜索框-->
<p><input type="search" name="search"></p>

表单的应用

只读：value=“admin”（先给一个默认值） readonly

禁用：disabled

隐藏：hidden

label提高作用域

<p> <label for="mark">点击</label><input type="text" id="mark"/>
</p>

表单初级验证

placeholder=“请输入用户名”
required 非空判断
pattern 正则表达式

总结

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Jn7mEJY6-1608813934218)(C:\Users\王东梁\AppData\Roaming\Typora\typora-user-images\image-20201224204330421.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fjoK5kpJ-1608813934221)(C:\Users\王东梁\AppData\Roaming\Typora\typora-user-images\image-20201224204412445.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bqgTxUZZ-1608813934222)(C:\Users\王东梁\AppData\Roaming\Typora\typora-user-images\image-20201224204447501.png)]

HTML5(笔记)