HTML

HTML 标签

块元素标签

div：无意义

address：定义一个地址，浏览器通常会以斜体的形式显示

h1-h6：一级标题至六级标题大小依次减小,h1最大，h6最小，h1只允许使用一个，h2使用十个以下，h3随便用

blockquote：用于定义一段长的引用文本，会在引用的内容前面自动添加一段距离

ol：有序列表，双标签使用li作为列表项 ol内部属性type(罗马数字： 1：小写英文： a：大写英文： A：小写希腊字符： i：大写希腊字符： I)，如果需要修改列表的数字：(ol内部通过start属性修改,在li内部设置属性value修改)

ul：无序列表，双标签使用li作为列表项

dl定义了定义列表，dl 标签用于结合 dt （定义列表中的项目）和 dd （描述列表中的项目）

块元素特性：

块元素默认独占一行
块元素如果没有设置宽度，默认会继承父级的宽度，会撑满父级的宽度
块元素支持宽高
可以正确显示margin和padding

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /*无序列表样式属性：*/
        .ul{
            /*list-style-type类型：disc黑色实心圆点 circle黑色空心圆点 square黑色实心正方形 none无*/
            list-style-type:circle;
            /*设置列表点的图片类型*/
            list-style-image: url('https://www.w3school.com.cn/ui2017/icon2.png');
            /*inside：列表修饰处于列表之内 outside:列表修饰处于列表之外（默认）*/
            list-style-position: inside;
            /*复合写法:类型,位置,图片;*/
            list-style: none inside url("https://www.w3school.com.cn/ui2017/icon2.png");
        }
        /*清除列表默认样式 */
        ul,ol{
            margin:0;padding:0;list-style:none;
        }
    </style>
</head>

<body>
    <div>无含义的块级元素</div>
    <address>地址</address>
    <h1>标题一</h1>
    <h2>标题二</h2>
    <h3>标题三</h3>
    <h4>标题四</h4>
    <h5>标题五</h5>
    <h6>标题六</h6>
    <blockquote cite='http://www.baidu.com'>引用文本</blockquote>
    <!-- 
      有序列表
      type类型:1,a,A,i,I 
      start修改属性
    -->
    <ol type='1' start='2'>
        <!-- value修改属性 -->
        <li value='2'>test1</li>
        <li>test2</li>
    </ol>
    <!-- 无序列表 -->
    <ul class='ul'>
        <li>test3</li>
        <li>test4</li>
    </ul>
    <dl>
        <dt>计算机</dt>
        <dd>用来计算的仪器 ... ...</dd>
        <dt>显示器</dt>
        <dd>以视觉方式显示信息的装置 ... ...</dd>
    </dl>
</body>

</html>

内联元素标签

span:无意义
a：超链接
hr分割线
br换行
em强调的文本浏览器会以斜体显示
strong重要的文本浏览器会以粗体显示语气强于em
<i>斜体</i>
<small>印刷体中的小段英文</small>
q:语义：定义一段短的引用文本浏览器会将引用的文本添加双引号
cite：语义：表示一个作品的名称，书，电影，歌曲浏览器会以斜体显示
code:定义：定义一段计算机代码
pre:语义：表示一大段计算机代码

内联元素特征：

内联元素不会独占一行，多个内联元素会排列在同一行，直到这一行放不下才会换行
内联元素不支持宽高，内联元素的实际宽高由内容撑开
内联元素无法正确显示上下的margin,padding
内联元素的代码进行换行会被解析

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <span>无含义</span>
    <!-- 
      target属性：_self / _blank  
      不会污染地址连接 不会刷新界面 不会实现跳转
      href="javascript:void(0);" / href="javascript:;"
    -->
    <a href="http://www.baidu.com" target='_self'>网络链接</a>
    <!-- 锚点 -->
    <h2 id='a'>我是标题一</h2>
    <a href="#a">点击我就会跳到 '我是标题一'</a>
    <!-- 分割线 -->
    <hr />
    <!-- 换行 -->
    <br />
    <em>强调文本</em>
    <strong>重要文本</strong>
    <i>斜体</i>
    <small>印刷体中的小段英文</small>
    <q>短引用</q>
    <cite>表示一个作品的名称，书，电影，歌曲</cite>
    <code>表示一段计算机代码</code>
    <pre>表示一大段计算机代码</pre>
    <!-- 
      绝对路径：/static/test.png
      相对路径：./test.png
      物理路径：file:///D:/Desketop/index.html
     -->
</body>

</html>

内联块元素标签

img：定义图片

嵌套相关的问题：块元素内允许嵌套其他元素，p,h1-h6,dt中间不能嵌套其他块元素标签, 内联元素一般嵌套内联或内联块 a不能嵌a

内联块元素标签特征：

可正常显示宽高；
多个内敛块可以排列在同一行；
代码换行会被解析；
内联元素无法正确显示上下的margin,padding

换行会被解析问题：处理内联块元素img 下方存在间隙

给父级设置 line-height为0；
给父级设置 font-size为0；
给图片设置 display：block;
给图片设置垂直对齐方式(非基线)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .img {
        /* 
          vertical-align(垂直对齐方式):top 顶部, middle 居中, baseline 基线, bottom 底部
          display:block 块,inline 内联,linlie-block 内联块,none 无
    	*/
        vertical-align: middle
    }
    </style>
</head>

<body>
    <img class='img' src="https://www.baidu.com/img/flexible/logo/pc/result.png" alt="图片请求失败显示这个" />
</body>

</html>

Table标签

单元格的合并

找到单元格合并的起始位置
确定单元格合并的方向：横向合并 colspan ，纵向合并 rowspan
确定需要合并几个单元格
处理多余的单元格

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .thead {
        color: red;
    }

    .tbody {
        color: green;
    }

    .tfoot {
        color: blue;
    }
    </style>
</head>

<body>
    <!-- 
      caption 定义表格标题。
      tr 表格中的行，
      th 表格中的页眉单元格，
      td 表格中的单元格，
      colspan 横向合并
      rowspan 纵向合并
    -->
    <table border="1" cellspacing='10' cellpadding='20'>
        <caption>标题</caption>
        <tr>
            <th>test1test1</th>
            <th>test1</th>
            <th>test1</th>
        </tr>
        <tr>
            <td colspan='2'>test1</td>
            <td>test1</td>
        </tr>
        <tr>
            <td rowspan='2'>test1</td>
            <td>test1</td>
            <td>test1</td>
        </tr>
        <tr>
            <td>test1</td>
            <td>test1</td>
        </tr>
    </table>
    <br />
    <!-- 
      cellspacing 设置单元格和单元格之间的距离,
      cellpadding 设置单元格和内容之间的间距。
      border-collapse：collapse 合并边框

      thead 表格的头部，表格的页眉部分称之为头部，
      tbody 表格的主体，表格的内部的正文称之为主体，
      tfoot 表格的页脚，表格底部。

      table-layout：auto 宽度根据内容去自动计算，fixed 固定需要配合表格的宽度来使用。
    -->
    <table border="1" style='border-collapse:collapse; table-layout:auto;width: 200px;'>
        <thead class='thead'>
            <tr>
                <th>test1test1</th>
                <th>test1</th>
                <th>test1</th>
            </tr>
        </thead>
        <tbody class='tbody'>
            <tr>
                <td>test1</td>
                <td>test1</td>
                <td>test1</td>
            </tr>
        </tbody>
        <tfoot class='tfoot'>
            <tr>
                <td>test1</td>
                <td>test1</td>
                <td>test1</td>
            </tr>
        </tfoot>
    </table>
</body>

</html>

Form标签

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <!-- 
        action 用于记录表单提交的url
        method 用于记录请求方式 get post 等
      -->
    <form action="http://www.baidu.com/api/index" method='get'>
        <!-- 
          内容名称 name
          内容数值 value 
          最大长度 maxlength 
          文本类型 type：text(文本框) / password（密码框）
          取消获取焦点的蓝色边框 style='outline: none'

          radio 单选框 name值需要相同，checked 设置默认选项
          label 将点击事件传递给选项，for属性关联 <label for=“ID名称”></label>
        -->
        <input id='account' type="text" name="account" 
        value='12345' maxlength="5" placeholder="文本框" style='outline: none' /><br>
        <input type="password" placeholder="密码框" /><br>
        <!-- 单选框 -->
        <input type="radio" name="colors" id="red" checked>红色<br>
        <input type="radio" name="colors" id="blue">蓝色<br>
        <label for='account'>关联</label>
        <!-- 隐藏域 -->
        <input type="hidden" value="隐藏输入域" />
        <input type="file" name="file" value='文件上传' />
        <!-- 按钮 -->
        <input type="button" name="button" value='普通按钮' />
        <input type="submit" name="submit" value='提交按钮' />
        <input type="reset" name="reset" value='重置按钮' />
        <!-- 
          下拉列表
          默认的初始值 selected
        -->
        <select>
            <option selected>选项一</option>
            <option>选项二</option>
        </select>
        <!-- resize:none 禁止改变文本输入框大小 -->
        <textarea style='resize:none;' cols=30 rows=20></textarea>
    </form>
</body>

</html>

THML5

HTML5 标签

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <!-- 结构标签 -->
    <header>定义头部</header>
    <nav>定义导航</nav>
    <main>定义主体</main>
    <footer>定义尾部</footer>
    <section>定义一个文档区域</section>
    <article>定义一个文章</article>
    <aside>定义一个文章的侧边栏</aside>

    <!-- 非结构标签 -->
    <mark>突出显示的文字</mark>
    <!-- 代表一段独立的内容 -->
    <figure>
        <!-- 是与其相关联的图片的说明/标题,用于描述其父节点`<figure>`里的其他数据 -->
        <figcaption>黄浦江上的的卢浦大桥</figcaption>
        <img src="https://www.baidu.com/img/flexible/logo/pc/result.png" />
    </figure>
    <!-- 表示日期时间：有利于搜索引擎优化 -->
    <time datetime="2008-02-14">情人节</time>
    <!-- 进度条 -->
    <progress value="22" max="100"></progress>

    <!-- 表单元素 -->
    <form>
        <!-- 
          placeholder 提示文字 
          required 是否必填项 
          autofocus 自动聚焦 
          autocomplete `input`的属性`autocomplete`默认为`no`其含义代表是否让浏览器自动记录之前输入的值，使用该属性，必须要有`name`属性（也许有`bug`）
          multiple 多选，常用与`select`和`file`
    	-->
        <input type="color" name="color" value='颜色选择器' />
        <input type="number" name="number" placeholder="必须输入数字" />
        <input type="search" name="search" placeholder="搜索框" />
        <input type="range" name="range" max=100 min=1 value=20 placeholder="范围" />
        <!-- 日起相关 -->
        <input type="date" name="date" />
        <input type="time" name="time" />
        <input type="week" name="week" />
        <input type="month" name="month" />
    </form>
    
    <!-- 
      选项列表
      与文本框（搜索框）元素配合使用，需要设置文本框（搜索框）的`list`属性值和`datalist`的`id`相同
    -->
    <input list="cars" />
    <datalist id="cars">
        <option value="BMW">
        <option value="Ford">
        <option value="Volvo">
    </datalist>
</body>

</html>

HTML5 API

离线缓存（应用程序缓存-Application Cache）

通过创建cache manifest 文件，可以轻松地创建web应用的离线版本,除IE其他浏览器都支持。

离线缓存的三个好处

离线浏览
速度更快：已缓存资源加载的更快
减少服务器负载：浏览器将只是从服务器下载更新过或者更改过的资源

离线缓存的原理

发起请求，检测到需要加载的js css等文件标识
首先会在本地检索是否有这些表示的文件存在，有的话，还要对比本地的是否和网络端的一直，一直就直接读本地，返回状态码304；否则从网络端重新缓存，覆盖本地缓存
本地没有，则从网络进行请求，存在本地

/*
搭建离线存储的流程

1. <html manifest='xxx.manifest'>
2. 创建xxx.manifest文件，编写缓存代码

CACHE MANIFEST(缓存表示)
## v 1.9

CACHE: （需要缓存的文件css和js等文件）
./css/test.css
./js/test.js
NETWORK: （不需要缓存的文件，每次都需要从服务器获取的）
#* （表示出来以上文件以外，都需要重新获取的）
./css/network.css(也可以指定某一些文件)

FALLBACK：（请求失败后返回的页面）
./404.html

3. 需要刷新页面两次 可以看到效果

Geolocation(浏览器地址位置)

通过getCurrentPosition和watchPosition这两个方法可以获取用户的地理位置

navigator.geolocation.getCurrentPosition(successCallback,errorCallback,options);

successCallback为方法成功的回调，此参数必须；
errorCallback为方法失败时候的回调，此参数可选；
option参数为额外参数，可是可选参数，对象。option参数支持三个可选参数API，为：enableHighAccuracy,timeout,maximumAge。

enableHighAccuracy参数表示是否高精度可用，为Boolean类型，默认为false,如果开启，响应时间会变慢，同时，在手机设备上会用掉更多的流量，也就是money
timeout参数表示等待响应的最大时间，默认是0毫秒，表示无穷时间
maximumAge表示应用程序的缓存时间，单位毫秒，默认是0毫秒，意味着每次请求都立即去获取一个全新的内容

当用户的位置被成功返回的时候，会返回在一个位置对象，具体如下

coords.latitude 纬度数值
coords.longitude 经度数值
coords.altitude 参考椭球之上的高度
coords.accuracy 精确度
coords.altitudeAccuracy 高度的精确度
coords.heading 设备正北顺时针前进的方位
coords.speed 设备外部环境的移动速度(m/s)
timestamp 当前位置捕获到时的时间搓

当获取用户的位置返回失败的时候，会返回一个失败的对象，我们可以通过失败对象的状态码来描述失败的原因，通过error.code的值来判断

位置服务被拒绝
获取不到位置信息
获取信息超时

getCurrentPosition方法属于一次性取用户的地理位置信息，而watchPosition方法则不停的获取用户的地理位置信息，不停的更新用户的位置信息，watchPosition方法可以通过watchPosition方法停掉（停止不断更新用户地理位置信息），方法就是传递watchPosition方法返回的watchID了(类似于定时的timerId)

// geoloacation 示例

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title></title>
   </head>
   <body>
      <script type="text/javascript">
      	 // 判断浏览器是否支持geolocation
         if (navigator.geolocation) {
            alert("ok");
            var options = {
               enableHighAccuracy : true,
               timeout : 5000,// 毫秒
               maximumAge : 0
            }
            navigator.geolocation.getCurrentPosition(successCallBack,errorCallBack, options);
         }
         
         //定位成功返回函数
         function successCallBack (position) {
            //position是返回的定位对象
            alert("纬度：" + position.coords.latitude + "\n经度：" + position.coords.longitude);
            //还有其他属性，去看笔记吧。。。
         }
         
         //定位失败返回函数
         function errorCallBack (error) {
            var errorType = {
               1 : '位置服务被拒绝',
               2 : '获取不到位置信息',
               3 : '获取信息超时'
            }
            //error.code 会返回信息的状态吗 分别是1、2、3，我们去手动匹配中文信息
            alert(errorType[error.code]);
         }
      </script>
   </body>
</html>

HTML5 多媒体

语法

<audio controls='controls' src='source/电锯惊魂.mp3'>
	浏览器不支持该音频标签
</audio>

可以写多个格式的文件，浏览器支持哪个格式就播放哪个格式

<audio controls='controls' >
    <source src='source/电锯惊魂.mp3' type='audio/mp3' ></source>
    <source src='source/电锯惊魂.ogg' type='audio/ogg' ></source>
    <source src='source/电锯惊魂.vorbis' type='audio/vorbis' ></source>
</audio>

如果浏览器不支持，可以用flash来代替

<audio src='xxx.mp4' controls >
    <object data='vidoplay.swf ' type='application/x-shockwave-flash' >
        <param name='movie' value='video.swf' />
    </object>
    浏览器不支持该视频标签
</audio>

属性

src设置或返回音频/视频的当前来源

绝对URL http//:xxx.com/movie.egg
相对URL /source/movie.ogg

autoplay 设置或返回音频/视频是否在加载完后立即播放

true 音频/视频加载完后立即播放
false 音频/视频加载完后不立即播放

controls 设置或返回是否显示标准的音频/视频控件

true 显示标准音频/视频控件
false 不显示标准音频/视频控件

currentSrc(只读) 返回当前音频/视频的URL

duration(只读) 返回当前音频/视频的长度(以秒计)

currentTime 设置或返回音频/视频中当前播放位置（以秒计）

volume 设置或返回音频/视频的音量：音量值在0.0-1.0之间

muted 设置或返回音频/视频是否静音

ture 静音
false(默认值) 不静音

defaultMuted(只有chrome支持) 设置或返回音频/视频是否默认静音状态，注意：设置该属性仅会改变默认的静音状态，而不是当前的状态，要改变当前的静音状态，使用muted属性来设置

ture 音频/视频默认静音
false(默认值) 音频/视频默认不静音

palybackRate 设置或返回音频/视频当前播放速度

1.0 正常熟读（默认值）
0.5 半速
2.0 倍速

defaultPlaybackRate(只有chrome支持) 设置或返回音频/视频是否默认播放速度，注意：设置该属性仅会改变默认的播放速度，而不是当前的状态，要改变当前的播放速度，使用palybackRate属性来设置

1.0 正常熟读（默认值）
0.5 半速
2.0 倍速

ended(只读) 设置或返回音频/视频是否播放完毕

true 播放结束
false 没有播放结束

loop 设置或返回音频/视频是否播放结束时再次播放

true 再次播放
false(默认值) 不再次播放

paused(只读) 返回音频/视频是否暂停

true 暂停
false 没暂停

preload 设置或返回是否在页面加载后立即加载音频/视频

auto 一旦页面加载，则开始加载音频/视频
metadata 当页面加载后，仅加载音频/视频的元数据（数据的数据）
none 当页面加载后，不加载音频/视频

width(video) 给视频设置宽度

height(video) 给视频设置高度

poster(video) 给视频添加默认显示图片

方法

load() 重新加载音频/视频

paly() 开始播放音频/视频

pause() 暂停当前播放的音频/视频

requestFullscreen() 视频需要兼容

webkitRequestFullScreen()
mozRequestFullScreen()

<!-- 实例代码 -->

<!-- 音频 -->
<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title></title>
   </head>
   <body>
      <!-- 使用音频标签 -->
      <audio src="source/薛之谦-演员.mp3" controls="controls"></audio>
      <!-- 也可以这么写，准备多种音频格式供用户选择 -->
      <audio controls="controls">
         <source src="source/电锯惊魂-HelloZepp.mp3" type="audio/mp3"></source>
         <source src="source/电锯惊魂-HelloZepp.ogg" type="audio/ogg"></source>
         <source src="source/电锯惊魂-HelloZepp.mp4" type="audio/mp4"></source>
      </audio>
   </body>
</html>


<!-- 视频 -->
<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title></title>
   </head>
   <body>
      <video width="800" height="500" controls="controls" poster="./source/1.jpg">
         <source src="source/Nimo.MP4" type="video/mp4"></source>
      </video>
      <br />
      <input type="button" value="切换视频" />
      <input type="button" value="测试其他属性和方法" />
     
      <script type="text/javascript">
         var video = document.querySelector('video');
         var changeBtn = document.querySelector("input");
         var otherBtn = document.querySelectorAll("input")[1];
         
         // var arr = ['。。', '..', '...'];
         
         var flag = true;
         changeBtn.onclick = function () {
            if (flag) {
               video.src = 'source/终结者_Larry.MP4';
			// flag = false;
            } else {
               video.src = 'source/Nimo.MP4';
			// flag = true;
            }
            flag = !flag;
         }
         
          //其他操作
          otherBtn.onclick = function () {
            // console.log(video.currentSrc);
            // console.log(video.duration);           
            // video.currentTime = 30;
            // video.volume = 0.5;
            // video.muted = true;
            // video.playbackRate = 2.0;
            // console.log(video.ended);
            // video.loop = true;
            console.log(video.paused);
         }
      </script>
   </body>
</html>

rem和em的区别

rem 单位如何转换为像素值当使用 rem 单位，他们转化为像素大小取决于页根元素的字体大小，即 html 元素的字体大小。根元素字体大小乘以你 rem 值。例如，根元素的字体大小 16px，10rem 将等同于 160px，即 10 x 16 = 160。

em 单位如何转换为像素值,当使用em单位时，像素值将是em值乘以使用em单位的元素的字体大小。相对于父元素的字体大小例如，如果一个 div 有 18px 字体大小，10em 将等同于 180px，即 10 × 18 = 180。

欢迎大家批评指正！~

HTML小结