HTML5
HTML5的更新：使用网页实现动态渲染图形、图表、图像和动画，不需要安装插件直接使用网页播放视频。
W3C（万维网联盟）：
W3C标准：
- 结构化标准语言（HTML、XML）
- 表现标准语言（CSS）
- 行为标准（DOM）
IDE ： WebStorm
块元素:无论内容多少，该元素独占一行
行内元素：内容撑开宽度，左右都是行内元素的可以排在一行
基本标签
<!-- DOCTYPE:告诉浏览器，我们使用什么规范-->
<!DOCTYPE html>
<html lang="en">
<!--头部 -->
<head>
<!--meta：描述性标签，描述网站信息 -->
<meta charset="UTF-8">
<meta name="keywords">
<title>我的第一个网页</title>
</head>
<!-- -->
<body>
<!--标题标签 -->
<h1>一级标签</h1>
<h2>二级标签</h2>
<!--段落标签 -->
<p>好的 好的</p>
<!--换行标签 -->
<br/>
<!--水平线标签-->
<hr/>
<!--粗体，斜体-->
<h1>字体样式标签</h1>
<strong>i love you</strong>
<em>i love you</em>
<br/>
<!--注释，特殊符号,记忆方式：&+字母-->
空格:空 格 <br/>
> : > <br/>
< : < <br/>
版权符号：©
</body>
</html>
图像标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图像标签</title>
</head>
<body>
<!--img学习：
src:图片地址
相对地址（推荐使用），绝对地址
../ ---上级目录
title:悬停文字
width：图像宽度
height：图像高度
-->
<img src="../resources/image/1.jpg" alt="云朵" title="悬停文字" height="500" width="667">
<a href="链接标签.html#down">跳转</a>
</body>
</html>
链接标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>链接标签</title>
</head>
<body>
<a name="top"></a>
<!--a标签
href：必填，表示要跳转到那个页面
target:表示窗口在哪里打开
_blank 在新标签打开
_self 在自己的网页打开
-->
<a href="https://www.baidu.com" target="_blank">百度</a><br/>
<a href="FirstWeb.html" target="_self">我的网页</a><br/>
<!--锚链接
1.需要一个标记
2.跳转到标记
-->
<a href="#top">回到顶部</a>
<a name="down"></a>
<!--功能性链接
邮件链接：mailto:-->
<a href="mailto:[email protected]">点击联系我</a>
</body>
</html>
列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表</title>
</head>
<body>
<!--有序列表-->
<ol>
<li>Java</li>
<li>python</li>
<li>运维</li>
<li>前端</li>
</ol>
<hr/>
<!--无序列表-->
<ul>
<li>Java</li>
<li>python</li>
<li>运维</li>
<li>前端</li>
</ul>
<hr/>
<!--自定义列表
dl:标签
dt:列表名称
dd:列表内容
-->
<dl>
<dt>学科</dt>
<dd>java</dd>
<dd>python</dd>
<dt>位置</dt>
<dd>西安</dd>
<dd>重庆</dd>
</dl>
</body>
</html>
表格标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<!--表格 table
行：tr rows
列 td
-->
<table border="1px">
<tr>
<!--colspan跨列-->
<td colspan="4">1-1</td>
</tr>
<!--rowspan跨行-->
<tr>
<td rowspan="2">2-1</td>
<td>2-2</td>
<td>2-3</td>
<td>2-4</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
</tr>
</table>
</body>
</html>
媒体元素
视频（video）音频（ audio）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>媒体元素</title>
</head>
<body>
<!--音频和视频
autoplay 自动播放
src 资源路径
control 控制条-->
<video src="../resources/video/1.mp4" controls autoplay></video>
<audio src="../resources/audio/1.MP3" controls autoplay></audio>
</body>
</html>
页面结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>页面结构</title>
</head>
<body>
<header>
<h2>网页头部</h2>
</header>
<section>
<h2>网页主题</h2>
</section>
<footer>
<h2>网页脚部</h2>
</footer>
</body>
</html>
内联框架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内联框架</title>
</head>
<body>
<!--内联框架iframe
src :地址
w-h：宽度 高度
-->
<iframe src="" name="hello" frameborder="0" width="1000px" height="800px"></iframe>
<a href="https://www.baidu.com" target="hello">跳转</a>
</body>
</html>
表单语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<h1>注册</h1>
<!--表单form
action：表单提交的位置，可以是网站，也可以是一个请求处理地址
method：post get 提交方式
get:我们可以在url中看到我们提交的信息，不安全，高效
post：比较安全，传输大文件
-->
<form action="FirstWeb.html" method="get">
<!--文本输入框：input type=“text”
value: 默认初始值
maxlength：最长字符
size：文本框长度
-->
<p>名字 <input type="text" name="username" value="请输入名字" maxlength="8" size="20" readonly/></p>
<!--密码框：input type=“password”-->
<p>密码 <input type="password" name="pwd"></p>
<!--单选框标签
input type="radio"
value:单选框的值
name 表示组
checked 默认值
-->
<p>性别：
<input type="radio" value="boy" name="sex" checked disabled/>男
<input type="radio" value="girl" name="sex"/>女
</p>
<!--多选框-->
<p>爱好
<input type="checkbox" value="sleep" name="hobby"/>睡觉
<input type="checkbox" value="write" name="hobby" checked/>写字
<input type="checkbox" value="chat" name="hobby"/>聊天
<input type="checkbox" value="game" name="hobby"/>游戏
</p>
<!--按钮
input type="button" 普通按钮
input type="image" 图像按钮
input type="submit" 提交按钮
input type="reset" 重置按钮
-->
<p>按钮：
<input type="button" name="button1" value="变"/>
<input type="image" src="../resources/image/1.jpg"/>
</p>
<!--下拉框，列表框
selected 默认值
-->
<p>下拉框
<select name="列表名称" id="">
<option value="选项的值">a</option>
<option value="选项的值">b</option>
<option value="选项的值" selected>c</option>
<option value="选项的值">d</option>
<option value="选项的值">e</option>
</select>
</p>
<!--文本域
cols="30" 列
rows="10" 行
-->
<p>反馈
<textarea name="text" id="1" cols="30" rows="10"></textarea>
</p>
<!--文件域
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>
<!--滑块-->
<p>音量
<input type="range" min="0" max="100"step="2">
</p>
<!--搜索-->
<p>搜索
<input type="search" name="search">
</p>
<!--增强鼠标可用性-->
<p>
<label for="mark">来呀来呀</label>
<input type="text" id="mark">
</p>
<p>
<input type="submit">
<input type="reset"value="清空">
</p>
</form>
</body>
</html>
readonly 只读
disabled 禁用
hidden 隐藏
表单验证
placeholder 提示信息
required 非空判断
pattern 正则表达式
标签：网页,python,标签,元素,HTML5,nbsp From： https://www.cnblogs.com/zxd0313/p/17542293.html