HTML5
声明：本文是我学习B站“狂神说java”所做的笔记，上传至此只是为了方便，要想学习，请去关注这个宝藏男孩吧
HTML5
1、什么是HTML？
HTML（Hyper Text Markup Language）：超文本标记语言
超文本包括：文字、图片、音频、视频、动画等。
1.1、W3C标准
1.1.1、W3C
- World Wide Web Consortium （万维网联盟）
- 成立于1994年，Web技术领域最具权威和影响力的国际中立性技术标准机构
- http://www.w3.org/
- http://wwwchinaw3c.org/
1.1.2、W3C标准包括
- 结构化标准语言（HTML、XML）
- 表现标准语言（CSS）
- 行为标准（DOM、ECMAScript）
1.2、HTML基本结构
单独呈现的标签（空元素），如
,意为用/来关闭空元素
1.3、HTML基本信息
-
DOCTYPE声明：告诉浏览器我们使用什么规范
-
title标签
-
meta标签
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="keyword" content="第一次写HTML">
<meta name="description" content="学习">
<title>我的第一个HTMLtitle>
head>
<body>
我的第一个网页
body>
html>
2、网页基本标签
2.1、标题标签
<h1>一级标签h1>
<h2>二级标签h2>
<h3>三级标签h3>
<h4>四级标签h4>
<h5>五级标签h5>
<h6>六级标签h6>
2.2、段落标签
<p>两只老虎，两只老虎，p>
<p>跑得快，跑得快，p>
<p>一只没有眼睛，p>
<p>一只没有尾巴，p>
<p>真奇怪！真奇怪！。p>
2.3、换行标签
两只老虎，两只老虎，<br/>
跑得快，跑得快，<br/>
一只没有眼睛，<br/>
一只没有尾巴，<br/>
真奇怪！真奇怪！。<br/>
2.4、水平线标签
<hr/>
2.5、字体样式标签
<h1>字体标签h1>
粗体：<strong>I Love Youstrong>
斜体：<em>I Love Youem>
2.6、注释和特殊符号
空格： <br/>
大于：><br/>
小于：<<br/>
版权：©<br/>
3、图像标签
src：图片地址（必填）
相对路径:…/表示上一级目录
绝对路径
alt：图片加载失败时显示的文字（必填）
title：鼠标悬停文字
width=“1920” height=“1024”：图片的大小
<img src="../resources/img/1.jpg" alt="背景" title="悬停文字" width="1920" height="1024">
4、链接标签
href：连接地址，跳转的地址（必填）
target：表示窗口在哪打开
_blank：在新标签中打开网页
_self：在自己的网页中打开
<a href="我的第一个网页.html" target="_blank">点击我跳转到我的第一个网页a>
<a href="http://www.baidu.com/" target="_parent">点击我跳转到百度a>
<br/>
<p><a href="我的第一个网页.html">
<img src="../resources/img/1.jpg" alt="点击我跳转到我的第一个网页" title="点击我跳转到我的第一个网页" width="500" height="300">
a>p>
锚链接
1.需要一个锚标记
2.跳转到标记
<a name="top">顶部a>
<a href="#down">回到顶部a>
···
···
···
<a href="#top">回到顶部a>
<a name="down">底部a>
功能性链接
邮件链接：mailto：邮箱
QQ链接：百度QQ推广获取
<a href="mailto:[email protected]">点击a>
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=935074243&site=qq&menu=yes">
<img border="0" src="http://wpa.qq.com/pa?p=2:935074243:53" alt="点击这里给我发消息" title="点击这里给我发消息"/>
a>
5、块元素和行内元素
**块元素：**无论内容多少，该元素独占一行，如：p、h1-h6
**行内元素：**内容撑开度，左右都是行内元素的可以排在一行，如：a.strong.em
6、列表标签
6.1、有序列表
运用范围：考试、应答
<ol>
<li>Javali>
<li>Pythonli>
<li>C++li>
<li>运维li>
ol>
6.2、无序列表
运用范围：导航、侧边栏
<ul>
<li>Javali>
<li>Pythonli>
<li>C++li>
<li>运维li>
ul>
6.3、自定义列表
dl：标签
dt：列表名称
dd：列表内容
运用范围：网站底部
<dl>
<dt>科目dt>
<dd>Javadd>
<dd>Pythondd>
<dd>C++dd>
<dd>运维dd>
<dt>位置dt>
<dd>西安dd>
<dd>甘肃dd>
<dd>新疆dd>
<dd>宁夏dd>
dl>
7、表格标签
行：tr
列：td
border：分割线
<table border="1px">
<tr>
<td colspan="4">1-1td>
tr>
<tr>
<td rowspan="2">2-1td>
<td>2-2td>
<td>2-3td>
<td>2-4td>
tr>
<tr>
<td>3-1td>
<td>3-2td>
<td>3-3td>
tr>
table>
8、媒体元素
src：资源路径
controls：控制器，有它才能看到
autoplay：自动播放
8.1、视频标签video
<video src="../resources/video/【狂神说Java】HTML09：媒体元素.mp4" controls autoplay>video>
8.2、音频标签audio
<audio src="../resources/audio/HTML09：媒体元素.m4a" controls autoplay>audio>
9、页面结构分析
<header>
<h2>网页头部h2>
header>
<section>
<h2>网页主体h2>
section>
<footer>
<h2>网页脚部h2>
footer>
10、iframe内联框架
src：地址
width、height:宽度高度
name：框架标示名
<iframe src="" name="hello" width="1000px" height="500px">iframe>
<a href="https://space.bilibili.com/95256449/" target="hello">点击跳转a>
11、表单
action：表单提交的位置，可以是网站，可以是一个请求处理地址
method：post，get 提交方式
get方式提交可以在URL中看到我们提交的信息，不安全，但高效
post方式提交，比较安全，传输大文件
11.1、表单元素格式
<h1>注册h1>
<form action="我的第一个网页.html" method="get">
<p>名字：<input type="text" name="username">p>
<p>密码：<input type="password" name="password">p>
<p>性别：
<input type="radio" value="boy" name="sex"/>男
<input type="radio" value="girl" name="sex"/>女
p>
<p>爱好：
<input type="checkbox" value="sleep" name="hobby">睡觉
<input type="checkbox" value="code" name="hobby">敲代码
<input type="checkbox" value="chat" name="hobby">聊天
<input type="checkbox" value="game" name="hobby">游戏
p>
<input type="button" name="btn1" value="点击边长">
<p>国家：
<select name="列表名称">
<option value="china">中国option>
<option value="us">美国option>
<option value="yd">印度option>
<option value="rd" selected>瑞士option>
select>
p>
<p>
<input type="file" name="files">
<input type="button" value="upload">
p>
<p>
<textarea name="textarea" id="" cols="50" rows="10">文本内容textarea>
p>
<p>邮箱：
<input type="email" name="email">
p>
<p>url：
<input type="url" name="url">
p>
<p>number：
<input type="number" name="number" max="9" min="0" step="2">
p>
<p>音量：
<input type="range" min="0" max="100" step="2" name="voice">
p>
<p>搜索：
<input type="search" name="search">
p>
<p>
<input type="submit">
<input type="reset">
p>
form>
隐藏域：hidden
只读：readonly
禁用：disable
11.2、表单的初级验证
placeholder：提示信息
required：非空判断
pattern：正则表达式
正则表达式速查表：https://www.jb51.net/tools/regexsc.htm
<p>自定义邮箱：
<input type="text" name="diymail" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$">
p>
12、总结
