HTML学习笔记

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$}

更多语法请参考Emmet官网

二、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	时间
email	电子邮箱
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>