HTML5
1.First Html file
<!-- 向浏览器声明文件类型,默认Html -->
<!DOCTYPE html>
<!---->
<html lang="en">
<!-- 网页头 -->
<head>
<!-- meta描述性标签,一般用于SEO -->
<meta charset="UTF-8">
<meta name="keywords" content="htmlStudy">
<meta name="description" content="Study Html">
<!-- 网页标题 -->
<title>FirstHtml</title>
</head>
<!-- 网页主体 -->
<body>
Hello World
</body>
</html>
2.标签
2.1.基本标签
<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<!--段落标签: 行距较大-->
<p>this is</p>
<p>mashiro</p>
<!--换行标签: 行距较小-->
this is<br/>
mashiro<br/>
<!--水平线标签-->
<hr/>
<!--字体样式标签-->
<h1>字体样式标签</h1>
粗体: <strong>This is mashiro </strong> <br/>
斜体: <em>This is mashiro </em>
<!-- 特殊符号 -->
空格: <br/>
大于:> <br/>
小于:< <br/>
版权:© <br/>
2.2.图像标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图像标签</title>
</head>
<body>
<!--
src:图片地址(必填)
alt:图片名字(必填)
title: 悬停文字
width & height: 长宽
-->
<img src="../resources/image/timg.jpg" alt="Shina_Mashiro" title="Mashiro" width="1280" height="720">
</body>
</html>
2.3.超链接标签(*)
h1>页面间标签</h1>
<!--href:跳转网站的地址 -->
<a href="http://www.baidu.com/">跳转至baidu</a>
<br/>
<a href="http://www.baidu.com/">
<img src="../resources/image/timg.jpg" alt="mashiro" title="Mashiro">
</a>
<br/>
<!-- target: 设置新页面的打开方式
_blank: 在新页面打开
_self: 在当前页面打开
-->
<a href="http://www.baidu.com/" target="_blank">跳转至baidu</a>
<a href="http://www.baidu.com/" target="_parent">跳转至baidu</a>
<a href="http://www.baidu.com/" target="_self">跳转至baidu</a>
<a href="http://www.baidu.com/" target="_top">跳转至baidu</a>
<hr>
<h1>锚标签</h1>
<!--锚标记-->
<a name="Top">top</a>
<a href="#Top">跳转到top</a>
<a href="theFitstHtmlFiie.html#Top">挑战到theFitstHtmlFiie.html的Top处</a>
<hr>
<h1>功能标签</h1>
<!--
邮件链接:mailto
QQ链接: QQ推广工具
-->
<a href="mailto:2571693608@qq.com">联系QQ邮箱</a>
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes">
<img border="0" src="http://wpa.qq.com/pa?p=2::53" alt="点击此处联系我" title="点击此处联系我"/></a>
2.4.块元素 & 行元素
- 块元素: 该标签独占一行
- 行元素: 左右行内元素都在同一行
2.5.列表标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表</title>
</head>
<body>
<!--1.有序列表-->
<ol>
<li>Java</li>
<li>Python</li>
<li>Linux</li>
<li>C/C++</li>
</ol>
<hr/>
<!--2.无序列表-->
<ul>
<li>Java</li>
<li>Python</li>
<li>Linux</li>
<li>C/C++</li>
</ul>
<hr/>
<!--3.自定义列表
dt:标题
dd:内容
-->
<dl>
<dt>class</dt>
<dd>Java</dd>
<dd>Python</dd>
<dd>Linux</dd>
<dd>C/C++</dd>
<dt>name</dt>
<dd>mashiro</dd>
<dd>nagisa</dd>
</dl>
<hr/>
</body>
</html>
2.6.表格标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格标签</title>
</head>
<body>
<!--
border:间隔宽度
tr:行
td:列
colspan:跨行
rowspan:跨列
-->
<table border="1px">
<tr>
<td colspan="4">学生成绩</td>
</tr>
<tr>
<td rowspan="2">Mashiro</td>
<td>Chinese</td>
<td>100</td>
</tr>
<tr>
<td>Math</td>
<td>100</td>
</tr>
<tr>
<td rowspan="2">Nagisa</td>
<td>Chinese</td>
<td>100</td>
</tr>
<tr>
<td>Math</td>
<td>100</td>
</tr>
</table>
</body>
</html>
2.7.媒体元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>媒体元素</title>
</head>
<body>
<!--视频-->
<video src="../resources/Video/xxx" controls autoplay></video>
<!--音频-->
<audio src="../resources/Audio/xxx" controls autoplay></audio>
</body>
</html>
2.8.页面结构分析
- header:标记头部区域的内容(用于页面或者页面的一块区域)
- footer:标记脚部区域的内容(用于整个页面或者页面的一块区域)
- section:Web页面中独立的区域
- article:独立的文章内容
- aside:相关内容或应用(侧边栏)
- nav:导航类辅助内容
<!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>
2.9.Iframe内联框架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Iframe内联框架</title>
</head>
<body>
<!--
src:页面地址
name:页面名
target="Hello":跳转在hello页面
-->
<iframe src="https://www.baidu.com" name="Hello" frameborder="0" width="1000px" height="800px"></iframe>
<a href="https://www.baidu.com" target="Hello">点击跳转</a>
</body>
</html>
3.表单标签
3.1.表单标签
<form action="theFitstHtmlFiie.html" method="post">
<p>UserName: <input type="text" name="UserName"></p>
<p>password: <input type="password" name="password"></p>
</form>
3.2.单选框
<!--单选框
input type="radio"
value: 指定选框的值
name: 指定组(组名称要相同)-->
<p>sex:
<input type="radio" value="odoko" name="sex" checked>男
<input type="radio" value="onna" name="sex">女
</p>
3.3.多选框
<!--多选框
input type="checkbox"
value: 指定选框的值
name: 指定组(组名称要相同)
checked: 默认选择 -->
<p>hobbies:
<input type="checkbox" value="Java" name="hobby" checked>Java
<input type="checkbox" value="Python" name="hobby">Python
<input type="checkbox" value="C/C++" name="hobby">C/C++
<input type="checkbox" value="Linux" name="hobby">Linux
</p>
3.4.按钮
<!-- 按钮
button: 普通按钮
image:图片按钮
submit:提交按钮
reset:重置按钮
-->
<p>buttons:
<input type="button" name="btn1" value="hit">
<input type="image" src="../resources/image/timg.jpg">
<input type="submit"/>
<input type="reset" value="clear"/>
</p>
3.5.下拉框
<!-- 下拉框
selected: 默认选择
-->
<p>国家:
<select name="country">
<option value="china">中国</option>
<option value="usa">美国</option>
<option value="Japan" selected>日本</option>
<option value="India">印度</option>
</select>
</p>
3.6.文本域
<!--文本域
cols & rows:文本框大小
-->
<p>反馈:
<textarea name="textarea" cols="30" rows="10"></textarea>
</p>
3.7.验证标签
<!-- 邮箱验证 -->
<p>邮箱:
<input type="email" name="email">
</p>
<!--url验证-->
<p>URL:
<input type="url" name="url">
</p>
<!--数字验证
step: 步长
-->
<p>Number:
<input type="number" name="num" max="100" min="0" step="10">
</p>
3.8.滑块
<p>音量:0
<input type="range" min="0" max="100" step="2">100
</p>
3.9.搜索框
<p>搜索:
<input type="search" name="search">
</p>
表单应用:
- 1.只读readonly
<p>UserName: <input type="text" name="UserName" value="admin" readonly></p>
- 2.禁用disabled
<input type="radio" value="odoko" name="sex" disabled>男
- 3.隐藏域hidden
<p>password: <input type="password" name="password" hidden></p>
- 4.增强鼠标可用性
<p>
<label for="mashiro">你点我试试</label>
</p>
4.表单初级验证
4.1.提示信息 placeholder
<p>UserName: <input type="text" name="UserName" placeholder="请输入用户名"></p>
4.2.非空判断 required
<p>UserName: <input type="text" name="UserName" placeholder="请输入用户名" required></p>
4.3.正则表达式 pattern
<p>自定义邮箱:
<input type="email" name="diyEmail" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$">
</p>
5.链接
BV1x4411V75C