HTML5学习
一、前端工具介绍
BrowserSync
- 依赖:node.js
- 作用:修改代码后,浏览器实时更新,不用点刷新
- 安装:略,参考百度
Emmet插件语法
注:所有输入 +[Tab键] 触发
| 序号 | 语法 | 说明 |
| ------ | ------ |
| 1 | html:5或者! | 自动生成HTML5网页文档结构 |
| 2 | meta:utf | 设置字符集utf-8 |
| 3 | meta:vp | 窗口视窗 |
| 4 | meta:compat | 设备类型 |
| 5 | link:css | 引入CSS,默认style.css |
| 6 | script:src | Script脚本 |
| 7 | p.info |
| 8 | .red | |
| 9 | h2#box | |
| 10 | #box | |
| 11 | a:link | |
| 12 | a:mai | |
| 13 | h2.header+p.info | |
| 14 | ul>li |
ul>li*3
<ul>
<li></li>
<li></li>
<li></li>
</ul>
h2>span^p.info
<h2><span></span></h2>
<p class="info"></p>
a{wybing的博客}
<a href="">wybing博客</a>
a[title="这是说明文字"]
<a href="" title="这是说明文字"></a>
a[href="http://wybing.com"]{wybing的博客}
<a href="http://wybing.com">wybing的博客</a>
ul.list>li.item*2>a{导航}
<ul class="list">
<li class="item"><a href="">导航</a></li>
<li class="item"><a href="">导航</a></li>
</ul>
ul.list>li.item*8>a{导航$}
<ul class="list">
<li class="item"><a href="">导航1</a></li>
<li class="item"><a href="">导航2</a></li>
<li class="item"><a href="">导航3</a></li>
<li class="item"><a href="">导航4</a></li>
<li class="item"><a href="">导航5</a></li>
<li class="item"><a href="">导航6</a></li>
<li class="item"><a href="">导航7</a></li>
<li class="item"><a href="">导航8</a></li>
</ul>
ul.list>li.item*8>a{导航$$}
这里的$表示占位符,$从1开始,$$从01开始,$$$从001开始
<ul class="list">
<li class="item"><a href="">导航01</a></li>
<li class="item"><a href="">导航02</a></li>
<li class="item"><a href="">导航03</a></li>
<li class="item"><a href="">导航04</a></li>
<li class="item"><a href="">导航05</a></li>
<li class="item"><a href="">导航06</a></li>
<li class="item"><a href="">导航07</a></li>
<li class="item"><a href="">导航08</a></li>
</ul>
ul.list>li.item*8>a{导航$@-}
我的VS Code 不支持解析 @-
<ul class="list">
<li class="item"><a href="">导航8</a></li>
<li class="item"><a href="">导航7</a></li>
<li class="item"><a href="">导航6</a></li>
<li class="item"><a href="">导航5</a></li>
<li class="item"><a href="">导航4</a></li>
<li class="item"><a href="">导航3</a></li>
<li class="item"><a href="">导航2</a></li>
<li class="item"><a href="">导航1</a></li>
</ul>
ul.list>li.item*2>a{导航$100}
<ul class="list">
<li class="item"><a href="">导航101</a></li>
<li class="item"><a href="">导航102</a></li>
<li class="item"><a href="">导航103</a></li>
<li class="item"><a href="">导航104</a></li>
<li class="item"><a href="">导航105</a></li>
<li class="item"><a href="">导航106</a></li>
<li class="item"><a href="">导航107</a></li>
<li class="item"><a href="">导航108</a></li>
</ul>
语法:ul.list>li.item*8>a{导航10$}
二、HTML5文档结构与标签
HTML5文档结构
<!DOCTYPE html> <!-- 声明HTML文档 -->
<html lang="en"> <!-- 语言,中文简体:zh-Hans,中文繁体:zh-Hant -->
<head> <!-- 文档头部,设置文档编码集,引入的css、Script等 -->
<!-- meta标签设置网页中的元数据 -->
<meta charset="UTF-8"> <!-- 字符集 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 视口 -->
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>网页标题</title>
<link rel="stylesheet" href="style.css"><!-- CSS引入 -->
<script src="script.js"></script><!-- JS引入 -->
</head>
<body> <!-- 文档主体 -->
<!-- 主要放置html标签 -->
</body>
</html>
HTML5标签、属性与元素
- 元素是标签、标签的属性与其包装的内容的总称。
<img src="img.png" width="250" height="250" alt="这是图片">
2.常用元素
- p标签(段落)
<p>这是段落,块级标签,自动换行</p>
<p>段落2</p>
- h标签(标题)
<h1>这是H1标签,块级标签</h1>
<h2>H2</h2>
<h3>H3</h3>
<h4>H4</h4>
<h5>H5</h5>
<h6>H6</h6>
- pre标签(格式化文本)
<pre>
登鹳雀楼
白日依山尽,
黄河入海流。
欲穷千里目,
更上一层楼。
</pre>
3.行内文本标签
- time标签(时间)
<time>2019-12-15 00:00:00</time>
- address标签(地址)
<address>地址</address>
- del标签或者s标签(删除线)
<del>删除线</del>
<s>删除线</s>
- ins标签或者u标签(下划线)
<ins>下划线</ins>
<u>下划线</u>
- strong标签或者b标签(强调-加粗文本)
<strong>强调文本</strong>
<b>加粗</b>
- em标签或者i标签(斜体)
<em>斜体</em>
<i>斜体</i>
- mark标签(标志)
<p>这是<mark>标致</mark></p>
- code标签(代码段)
<code>
document.getElementById("id1");
document.getElementById("id2");
document.getElementById("id3");
</code>
<pre>
<code>
document.getElementById("id1");
document.getElementById("id2");
document.getElementById("id3");
</code>
</pre>
4.表格
标题(caption)、表头单元格(th)、头部(thread)、主体(tbody)、行(tr)、单元格(td)、底部(tfoot)
<table border="1" cellspacing="0" cellpadding="5">
<!--
cellspacing——单元格间距,单元格之间的距离
cellpadding——单元格边距,单元格与边框之间的距离
-->
<caption>成绩表</caption>
<thead>
<tr>
<td>First Name</td>
<td>Last Name</td>
<td>Points</td>
</tr>
</thead>
<tbody>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
<tr>
<td>Adam</td>
<td>Johnson</td>
<td>67</td>
</tr>
<tr>
<td colspan="2">跨列的表格</td>
<td>100</td>
</tr>
<tr>
<td rowspan="2">跨行的表格</td>
<td>99</td>
<td>99</td>
</tr>
<tr>
<td>88</td>
<td>88</td>
</tr>
<tr>
<td rowspan="2" colspan="2">跨行又跨列的表格</td>
<td>22</td>
</tr>
<tr>
<td>11</td>
</tr>
</tbody>
</table>
5.图片
<img src="ing.png" width="250" height="250" alt="">
<!--
src——图片地址
width——宽度
height——高度
alt——可替换文本
-->
6.有序与无序列表
1.有序列表
<!-- 有序列表 -->
<ol>
<li>苹果</li>
<li>香蕉</li>
<li>菠萝</li>
<li>西瓜</li>
<li>芒果</li>
</ol>
<!-- reversed——倒序 -->
<ol reversed>
<li>苹果</li>
<li>香蕉</li>
<li>菠萝</li>
<li>西瓜</li>
<li>芒果</li>
</ol>
<!-- 更改起始序号 -->
<ol start="5">
<li>苹果</li>
<li>香蕉</li>
<li>菠萝</li>
<li>西瓜</li>
<li>芒果</li>
</ol>
<!-- 设置列表项序号 -->
<ol>
<li>苹果</li>
<li>香蕉</li>
<li value="10">菠萝</li>
<li>西瓜</li>
<li>芒果</li>
</ol>
2.无序列表
<!-- 无序列表 -->
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>菠萝</li>
<li>西瓜</li>
<li>芒果</li>
</ul>
3.自定义列表
<!-- 自定义列表 -->
<dl>
<dt>wybing</dt>
<dd>- 一个热爱编程的程序猿</dd>
<dt>程序猿</dt>
<dd>- 写出更多的代码</dd>
</dl>
4.列表的嵌套
<!-- 列表的嵌套使用 -->
<ol>
<li>苹果</li>
<li>香蕉</li>
<li>菠萝</li>
<li>
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>菠萝</li>
<li>西瓜</li>
<li>芒果</li>
</ul>
</li>
<li>西瓜</li>
<li>芒果</li>
</ol>
表单
表单是网页中数据采集的工具
- 表单标签
属性名称 | 描述 |
---|---|
name | 表单的名称 |
action | 表单数据接受地址 |
target | 打开url的方式,_blank新窗口,_self当前窗口 |
method | 数据传送方法,get:通过url地址传送参数,网址中可以看到数据,post:后台传送 |
enctype | 发送前如何将数据进行编码,仅与method="post"配对使用 |
application/x-www-form-urlencoded | 默认值,发送前对所有字符进行编码:空格转+号,特殊字符传ASCII 16进制值 |
multipart/form-data | 不对发送字符进行编码,在上传文件时,必须设置 |
text/plain | 纯文本方式,仅将空格转为"+"号,不对特殊字符编码 |
<form action="" method="GET" name="form1">
<label>姓名:</label><input type="text">
<input type="submit" value="提交">
</form>
- 表单域< input >的属性
属性名称 | 描述 |
---|---|
type | 元素的类型,如text文本框、radio单选按钮、select下拉框等 |
name | 元素的名称,主要用于服务端数据传送 |
value | 元素的默认值,可当占位符 |
size | 以字符计算的元素可见宽度,注意,不是像素或百分比 |
maxlength | 元素允许的最大字符长度 |
disabled | 禁用该控件,此时,既不能选择,也不能点击 |
readonly | 该控件字段内容只读,不允许修改 |
<input type="text" name="MyName" size="20" value="wybing" maxlength="10" placeholder="请输入内容">
- < input >标签type属性值
| 属性名称 | 描述 |
| ------ | ------|
| text | 单行文本框 |
| email | 邮箱 |
| passwrod | 密码框,与text类型相似,区别是字符以"*"号代替 |
| radio | 单选按钮,name值必须相同,checked为默认值 |
| checkbox | 复选框,name值必须相同,返回数组,checked为默认值 |
| button | 自定义按钮,多于JavaScript配合使用 |
| submit | 提交按钮,value是按钮上的文字 |
| reset | 重置按钮,将表单控件中的值恢复到默认值 |
| file | 文件上传按钮,multiple允许批量上传,与multipart/form-data配对 |
| image | 设置图像为提交按钮,必须放在中,src为源,alt是说明 |
| hidden | 通常用于向服务器传送预设值或者由JavaScript来处理 |
<!-- 单行文本 -->
<input type="text" name="MyName" value="不能为空">
<!-- 密码 -->
<input type="password" name="pwd" id="pwd">
<!-- 单选按钮 -->
<input type="radio" name="gender" id="male" value="male" checked>男
<input type="radio" name="gender" id="female" value="female">女
<!-- 复选框 -->
<input type="checkbox" name="language" id="php" value="php" checked>
<input type="checkbox" name="language" id="java" value="java">
<!-- 自定义按钮 -->
<input type="button" value="点击">
<!-- 提交按钮 -->
<input type="submit" value="提交">
<!-- 重置按钮 -->
<input type="reset" value="重置">
<!-- 文件上传 -->
<form action="" method="post" enctype="multipart/form-data">
<input type="file" name="file" id="file" multiple> <!-- 支持批量上传 -->
</form>
<!-- 图像按钮 -->
<input type="image" src="url" alt="图片说明">
<!-- 隐藏字段 -->
<input type="hidden" name="id" value="1">
<!-- 用于存储一些字段的默认值,如ID,用户不可见 -->
<!-- 下拉框 -->
<select name="address" id="address">
<option value="bj" selected>北京</option>
<option value="">上海</option>
<option value="">天津</option>
<option value="">广州</option>
<option value="">深圳</option>
<option value="">重庆</option>
</select>
<!-- 下拉框分组 -->
<select name="address" id="address">
<optgroup label="直辖市">
<option value="bj" selected>北京</option>
<option value="">上海</option>
<option value="">天津</option>
<option value="">重庆</option>
</optgroup>
<optgroup label="省级">
<option value="">广州</option>
<option value="">深圳</option>
</optgroup>
</select>
<!-- label标签 -->
<form action="" method="post" name="form">
<label for="MyName">姓名:</label>
<input type="text" name="MyName" id="MyName" placeholder="请输入姓名">
</form>
<div>
<label>姓名:<input type="text" name="MyName1" id="MyName1" placeholder="请输入姓名"></label>
</div>
<!--
label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。
如果您在 label 元素内点击文本,就会触发此控件。
就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。
-->
<!-- 文本域 -->
<textarea name="message" id="message" cols="30" rows="10" style="resize: both;"></textarea>
<!--
cols:每行最多多少个字符
rows:可以显示多少行
resize:
both:默认值
none:不允许调整尺寸
horizontal:仅允许水平调整宽度
vertical:仅允许垂直调整高度
-->
HTML5新增的表单属性
属性名称 | 描述 |
---|---|
placeholder | 占位符,设置提示信息 |
autofoucus | 自动获取焦点 |
required | 必填项,如果为空则无法提交并焦点自动定位在上面 |
pattern | 对输入内容进行正则验证 |
list | 限定输入内容的列表,列表由 |
height和width | 设置宽高 |
min、max和step | input类型为数字或日期类型时,设置取值范围与步长(间隔) |
novalidate | 用标签中,提交时不对数据进行验证 |
<!-- 正则 -->
<input type="text" pattern="[A-Z]{3}">
<!-- <datalist> 元素 -->
<form action="" method="get">
<input list="MyName" name="MyName">
<datalist id="MyName">
<option value="1小明">
<option value="2小红">
<option value="3小兰">
<option value="4小天">
<option value="5小朱">
</datalist>
<input type="submit" value="提交">
</form>
HTML5新增的表单类型
属性名称 | 描述 |
---|---|
number | 数值型数据 |
date | 日期 |
time | 时间 |
电子邮箱 | |
search | 不限定内容,当有内容时,控件尾部有一个(x)取消符号 |
url | 限定以http://或者https://开头的合法url |
color | 拾色器 |
视频与音频
1.视频
属性名称 | 描述 |
---|---|
autoplay | 自动播放 |
controls | 向用户显示控件,如播放按钮 |
height | 高度 |
width | 宽度 |
loop | 循环播放 |
muted | 静音 |
poster | 未开始播放时显示的图像 |
preload | 如果出现该属性,则视频在页面加载时进行加载,并预备播放。如果使用 "autoplay",则忽略该属性。 |
src | 地址 |
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持 video 标签。
</video>
2.音频
属性名称 | 描述 |
---|---|
autoplay | 自动播放 |
controls | 向用户显示控件,如播放按钮 |
loop | 循环播放 |
muted | 静音 |
preload | 如果出现该属性,则视频在页面加载时进行加载,并预备播放。如果使用 "autoplay",则忽略该属性。 |
src | 地址 |
<audio controls>
<source src="horse.ogg" >
<source src="horse.mp3" >
您的浏览器不支持 audio 元素。
</audio>
地理位置
<p id="demo">点击按钮获取您当前坐标(可能需要比较长的时间获取):</p>
<button onclick="getLocation()">点我</button>
<script>
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition);
}
else
{
x.innerHTML="该浏览器不支持获取地理位置。";
}
}
function showPosition(position)
{
x.innerHTML="纬度: " + position.coords.latitude +
"<br>经度: " + position.coords.longitude;
}
</script>