Html5学习

1. 百度百科上的定义:

HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。

2. webview是什么

浏览网页一般用的是浏览器
webview翻译过来就是网页查看器, 原理和浏览器一样, 可以看做是浏览器
app上都内置了webview, 所以可以浏览网页。

3. 常用浏览器使用的引擎

谷歌浏览器(Google Chrome)，采用的是双内核，Webkit，Blink；
360安全浏览器，采用的也是双内核，Blink(极速模式)，Trident(IE)(兼容模式)；
360极速浏览器，采用的也是双内核，Blink(极速模式)，Trident(IE)(兼容模式)；
UC浏览器，采用的也是双内核，Blink(极速模式)，Trident(IE)(兼容模式)；
QQ浏览器，采用的也是双内核，Blink(极速模式)，Trident(IE)(兼容模式)；
Safari浏览器，采用的也是单内核，Webkit；
Firefox(火狐)浏览器，采用的也是单内核，Gecko；
IE浏览器，采用的也是单内核，Trident；
Microsoft Edge浏览器，采用的也是双内核，Blink，Trident(IE)；

4.Html版本

HTML1.0
HTML2.0
HTML3.2
HTML4.0
HTML4.01（微小改进）
HTML5：2008年正式发布,现在都在用第5版的html

5. 文档类声明

使用的是html5文档.<!DOCTYPE html> html的第一句话是文档类型声明, 表明了是使用html语言的哪个版本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

6.HTML XHTML XML的区别

HTML(Hyper Text Markup Language) 超文本标记语言
XHTML (eXtensible HyperText Markup Language) 可扩展超文本标记语言, 语法要求比HTML更严格
XML(Extensible Markup Language) 可扩展标记语言, 并非像HTML那样，提供了一组事先已经定义好了的标签，而是提供了一个标准，利用这个标准，可以根据实际需要定义自己的新的标记语言

7. 字符编码

01 什么是字符编码

在计算机中，所有信息最终都是用二进制来表示的。
为了在计算机中表示英文中的字符，美国制定了一套字符编码，对英文字符与二进制位之间做了映射关系，这被称为 ASCII 码
拥有了ASCII码之后，英文就可以在计算机当中完美的表示出来了，但随着计算机的普及，其他的国家也要求将自己国家的语言编入计算机当中，他们纷纷在基于ASCII码之上，编写了自己的码表，比如中国的GB2312。

02 html中的字符编码设置

为了正确显示HTML页面，浏览器必须知道页面采用的是什么字符编码。

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

03 常见的字符编号

ASCII字符集
ISO字符集
Unicode标准
- UTF-8
- UTF-16
GB2312 简体中文

8.改变图标

想要得到该图标需用到ico转换工具，自行百度。

 <link rel="icon" href="./bitbug_favicon.ico">

image.png

9. 标签的使用

<body>
   <p>p标签中进行换行，<br>在此处进行换行</p>
   <hr>   <!--水平线的使用 -->
   <i>斜体标签</i><br>
   <pre>
尊敬的某某：
    在此是中国建筑第八工程局某某公司，因为你近期帮助我公司
    修订员工手册，在此提出感谢
                            xxx
                             2022年1月1日
   </pre>
   <b>粗体文本</b> <br>
   <em id="aa">强调文本</em><br>
   <ins>被插入文本</ins><br>
   <u>下划线文本</u><br>
   <s>加删除线文本</s><br>
   <del>被删除文本</del><br>
   <sub>下标文本</sub><br>
   <sup>上标文本</sup><br>
   <p>11111</p>
   <p>11111</p>
   <p>11111</p>
   <p>11111</p>
   <p>11111</p>
   <p>11111</p>
   <p>11111</p>
   <p>11111</p>
   <p>11111</p>
   <p>11111</p>
   <p>11111</p>
   <p>11111</p>
   <p>11111</p>
   <p>11111</p>
   <p>11111</p>
   <p>11111</p>
   <p>11111</p>
   <p>11111</p>
   <p>11111</p>
   <p>11111</p>
   <p>11111</p>
   <p>11111</p>
   <p>11111</p>
   <p>11111</p>
   <span>co<sub>2</sub></span><br>    //二氧化碳
   <span>m<sup>2</sup></span><br>    //平方米
   <a target="_self" href="https://www.sogou.com/">搜狗</a><br>
   <a target="_block" href="https://www.sogou.com/">搜狗</a><br>
   <a target="-block" href="./年龄练习(if练习).html">跳转到年龄练习</a><br>
   <a href="#">返回顶部</a> <br>
   <a href="#aa">返回aa</a><br>
   <a target="_block" href="计算器.html">跳转到计算器</a>
//a标签中target表示网页跳转时候是内部跳转还是外部跳转。href='#'表示回到顶部。#后面可以跟id，表示回到id所在地。
   <p>1111</p>
   <p>1111</p>
   <p>1111</p>
   <p>1111</p>
   <p>1111</p>
   <p>1111</p>
   <p>1111</p>
   <p>1111</p>
   <p>1111</p>
   <p>1111</p>

   <div>
    <img src="https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF" alt="图片加载失败">   
    <img src="https://cdn2.jianshu.io/assets/default_avatar/7-0993d41a595d6ab6ef17b19496eb2f21.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/240/h/240" alt="图片加载失败">
//img中alt表示当图片加载失败时的提示文字。
   </div>
//转移字符
   <div>小于号  &lt;
       <p>大于号  &gt;</p>
       <p>11111&nbsp;&nbsp;&nbsp;&nbsp;22222</p>
       <p>钱&yen;</p>
   </div>
   </body>

转义字符代码网址

表格

<table> 定义一个表格
<caption> 定义表格标题
<thead> 定义表格中的表头内容
<tbody> 定义表格中的主体内容
<tfoot> 定义表格中的表注内容（脚注）
<tr> 定义表格中的行
<th> 定义表格中的表头单元格
<td> 定义表格中单元格
colspan 合并横向单元格
rowspan 合并竖向单元格
border 边框
cellspacing=0 合并边框
合并单元格需要将被合并的单元格注释掉或者删除掉

<table border="1" cellspacing="0" width="505px" align="center">
    <caption> 表格标题</caption>
    <thead>
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td align="center" width="200px" colspan="2" >张三 男</td>
            <td align="center">男</td>
        </tr>
        <tr>
            <td align="center" width="200px" rowspan="2">李四</td>
            <td align="center">女</td>
            <td align="center">22</td>
        </tr>
        <tr>
            <td align="center" width="200px">风耳</td>
            <td align="center">男</td>
            <td align="center">23</td>
        </tr>
    </tbody>
   </table >

表单

01 form

定义一个 HTML 表单

以下三个属性了解即可, 现在几乎用不到

action：规定当提交表单时向何处发送表单数据。
method：发送表单数据的 HTTP 方法，get/post。
target：在何处打开 action URL，取值blank，self。

02 input

输入控件

type:指定输入控件的类型,常用取值：

*   text   文本
*   password   密码
*   checkbox    多选框
*   radio    单选框   需要设置name
*   file    选择文件或文件夹
*   reset   重置表单，只能在表单中才有用
*   submit   提交表单

其他控件
placeholder 占位符，当输入时消失
value 真正显示在输入框中
disabled 禁用输入框
readonly 文本只读
maxlength 输入框中最大字符量
autofocus 自动获得焦点

label，实现点击文字时也可以进行选择

定义 checkbox、radio 元素的标注
for:规定 label 与哪个表单元素绑定，需要用到id

<!-- 表单 -->
   <form action="xxx">
       <p>
           <input type="text" placeholder="请输入手机号码">  <br>
           <input type="text" value="12113213"> <br>
           <input type="text" disabled placeholder="禁用输入框">  <br>
           <input type="text" readonly placeholder="文本只读">  <br>
           <input type="text" maxlength="11" placeholder="请输入手机号只能到11位">  <br>
           <input type="text" maxlength="11" autofocus placeholder="自动获得焦点">  <br>
       </p>
       <p>
           <input type="password" placeholder="请输入密码">
       </p>
       <p>
           兴趣爱好：<br>
           <label for="bb">打球</label><input id="bb" type="checkbox">
           <label for="cc">休息</label><input id="cc" type="checkbox">
           <label for="rest">休息</label><input id="rest" type="checkbox">
       </p>
       <p>
           性别: <br>
           <input type="radio" name="aa" id="man"><label for="man">男</label>
           <input type="radio" name="aa" id="woman"><label for="woman">女</label>
             </p>
             <p>
                 <input type="file">
             </p>
             <p>
                 <input type="reset">
             </p>
             <p>
                 <input type="submit">
             </p>
   </form> <br>

文本域

可以通过设置高宽来调整文本域大小（或者通过行数和列数进行调整）

 <textarea name="" id="" cols="30" rows="10"></textarea> <br>

下拉列表

disabled:禁用。
name:元素名称。
<optgroup> 定义下拉列表中的选项组

label：为选项组规定描述。
disabled:禁用该选项组。
<option> 定义下拉列表中选项

value：定义送往服务器的选项值。
selected：默认选中。
disabled:禁用该选项。

<select name="" id="">
        <optgroup>
        <option value="">贵阳</option>
        <option selected value="">遵义</option>
        <option value="">都匀</option>
    </optgroup>
        <optgroup>
            <option value="">潍坊</option>
            <option value="">济南</option>
            <option value="">青岛</option>
        </optgroup>
    </select>

button属性

定义按钮
type: 规定按钮的类型,取值：button, reset, submit,默认button
disabled:禁用该按钮。

iframe 网页中的网页

<body>
    <h1>网页中的网页</h1>
    <iframe src="http://zk.huruqing.cn/" frameborder="1" width="800" height="600"></iframe>
</body>

html5新增标签

自行查看并学习，需记住常用的标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <video src=" https://www.w3school.com.cn/i/movie.ogg" autoplay></video>
    <audio src=" https://www.w3school.com.cn/i/horse.ogg" controls></audio> <br>
     
<input type="number"/>  <br>
<input type="tel"/>  <br>
<input type="date"/>  <br>
<input type="color"/>  <br>
<input type="datetime"/>  <br>
<input type="datetime-local"/>  <br>
<input type="email"/>  <br>
<input type="month"/>  <br>
<input type="range"/>  <br>
<input type="search"/>  <br>
<input type="time"/>  <br>
<input type="url"/>  <br>
<input type="week"/>  <br>

</body>
</html>

canvas画布

及画出统计表子类的标签，需要用到js

<body> 
    <canvas id="mycanvas" width="800" height="600"></canvas>

    <script>
        var canvas = document.querySelector('#mycanvas');
        var ctx = canvas.getContext('2d');
        ctx.moveTo(10,10); 
        ctx.lineTo(200, 150);
        ctx.lineTo(20, 200);
        ctx.stroke();
    </script>
</body>