系统学习——HTML/HTML5

sKK07

已于 2022-04-23 11:07:14 修改

阅读量408

点赞数 1

分类专栏：系统学习前端文章标签： HTML

于 2019-11-04 17:35:38 首次发布

本文链接：https://blog.csdn.net/zhaoguang2018/article/details/102901508

版权

前端同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

系统学习

7 篇文章 1 订阅

订阅专栏

系统学习目录

第一篇——HTML/HTML5
第二篇——CSS/CSS3
第三篇——JavaScript
第四篇——jQuery
第五篇——Ajax & JSON
第六篇——Bootstrap
第七篇——Less

写在前面的：从今天（2019-11-04）开始系统的学习html，以w3cschool提供的微课和文档为基准，记录自己之前不知道的知识点。各位仅供参考。今天（2019-11-19）w3cschool的HTML微课学习完了，发现确实是微课讲了很多基础的东西也很实用，此文章之后就是在日常工作中的一点点补充了。

空格： ，<小于号：<，>大于号：>，
&和号：&，"引号："，'撇号：'(IE不支持)，
￠分：¢，£镑：£，¥人民币/日元：¥，
€欧元：€，§小节：§，
©版权：©，®注册商标：®，™商标：™，
×乘号：×，÷除号：÷。

<a>

在 <a> 标签中使用 target 属性，你可以规定在何处打开链接文档。
target 属性值有：
- _blank：在新窗口中打开被链接文档。
- _self：默认。在相同的框架中打开被链接文档。
- _parent：在父框架集中打开被链接文档。
- _top：在整个窗口中打开被链接文档。
- framename：在指定的框架中打开被链接文档。

<head>

标签	描述
`<head>`	定义了文档的信息
`<title>`	定义了文档的标题
`<base>`	定义了页面链接标签的默认链接地址
`<link>`	定义了一个文档和外部资源之间的关系
`<meta>`	定义了HTML文档中的元数据
`<script>`	定义了客户端的脚本文件
`<noscript>`	定义在脚本未被执行时的替代内容（包含普通 HTML 页面的 body 元素中能够找到的所有元素。）
`<style>`	定义了HTML文档的样式文件

自定义列表

自定义列表以 <dl> 标签开始。
每个自定义列表项以 <dt> 开始。
每个自定义列表项的描述以 <dd> 开始。

<iframe>

可以把需要的文本放置在 <iframe> 和 </iframe> 之间，这样就可以应对不支持 <iframe> 的浏览器（一些旧的浏览器不支持<iframe>）。
frameborder 用于定义<iframe>是否显示边框。属性默认值为“1”，表示开启边框。设置 frameborder 属性值为 “0” ，则表示移除 <iframe> 的边框。

<table>

标签	描述
`<table>`	定义表格
`<th>`	定义表格的表头（表头单元格）
`<tr>`	定义表格的行
`<td>`	定义表格单元（标准单元格）
`<caption>`	定义表格标题
`<colgroup>`	定义表格列的组
`<col>`	定义表格列的属性
`<thead>`	定义表格的页眉
`<tbody>`	定义表格的主体
`<tfoot>`	定义表格的页脚

在使用了 <thead>、<tbody>、<tfoot>后，表格是“从头到脚”显示。也就是说，不论放在哪，都优先显示，再以此类推往下加载。

<form>

enctype：<form>的一个属性。application/x-www-form-urlencoded为默认值，在发送前对所有字符进行编码（将空格转换为 “+” 符号，特殊字符转换为 ASCII HEX 值）。multipart/form-data，不对字符串编码，当使用有文件上传表单控件时必须为此值。注：只有 method=“post” 时才使用 enctype 属性。
autocomplete：用于form或input域的输入提示。当用户在自动完成域中输入时，浏览器应该在该域显示填写的选项。值：on，off
<input type="submit" value="提交" /> 定义了提交按钮。 <button type="submit">提交</button>同样效果。

<button>

submit：该按钮是提交按钮（除了 IE 浏览器，该值是其他浏览器的默认值）。
button：该按钮是可点击的按钮（IE 浏览器的默认值）。
reset：该按钮是重置按钮（清除表单数据）。
不同的浏览器对元素的 type 属性使用不同的默认值。所以要始终为 <button> 元素规定 type 属性。

<fieldset> , <legend>

两者都是一种表单标签，后者写在前者里。<fieldset>定义了一组相关的表单元素，并使用外框包含起来。<legend>定义了元素的标题。效果如图：

内容类型（HTML）

元数据（Metadata）：通常出现在页面的head中，设置页面其他部分的行为和表现。<base>、<link>、<meta>、<script>、<noscript>、<style>、<title>。
内联（Embedded）：在文档中添加其他类型的内容。<audio>、<video>、<canvas>、<iframe>、<img>、<math>、<object>、<svg>。
交互（Interactive）：与用户交互的内容。<a>、<audio>、<video>、<button>、<details>、<embed>、<iframe>、<img>、<input>、<label>、<object>、<select>、<textarea>。
标题（Heading）：定义段落标题。<h1>、<h2>、<h3>、<h4>、<h5>、<h6>、<hgroup>、<svg>。
短语（Phrasing）：文本和文本标记元素。<img>、<span>、<strong>、<label>、<br />、<small>、<sub>等。
区段（Sectioning）：定义标题、内容、导航和页脚的范围。<article>、<aside>、<nav>、<section>。
流（Flow）内容：包含在文档正常流中的大多数HTML5元素。
相同的元素可以属于多个内容模型。

HTML5 的元素按优先等级定义为结构性元素、级块性元素、行内语义性元素和交互性元素四大类。

结构性元素

结构性元素主要负责 Web 的上下文结构的定义，确保 HTML 文档的完整性，这类元素包括以下几个：
<header>：页面主题上的头部，注意区别于 <head> 元素。
<nav>：是专门用于菜单导航、链接导航的元素，是 “navigator” 的缩写。
<article>：用于表示一篇文章的主题部分，一般为文字集中显示的区域。
<section>：在 Web 页面应用中，该元素也可以用于区域的章节表述。
<footer>：页面的底部（页脚）。

级块性元素

级块性元素主要完成 Web 页面区域的划分，确保内容的有效分隔，这类元素包括以下几个：
<aside>：用以表达注记、贴士、侧栏、摘要、插入的引用等作为补充主体的内容。

<figure>：是对多个元素进行组合并展示的元素，通常与 <figcaption> 联合使用。

<figure>
	<img src="https://www.w3cschool.cn/statics/images/logonew2.png" alt="The Pulpit Rock" width="304" height="58" />
	<figcaption>这是一个由figure标签包裹的图片</figcaption>
</figure>

<code>：表示一段代码块。
<dialog>：用于表达人与人之间的对话，该元素还包括 <dt> 和 <dd>这两个组合元素，它们常常同时使用。<dt> 用于表示说话者，而 <dd> 用来表示说话者的内容。注意：目前只有 Chrome 和 Safari 6 支持 dialog 标签。
```
<dialog open>
	<dt>提示:</dt>
	<dd>好好学习，天天向上</dd>
</dialog>
```

行内语义性元素

行内语义性元素主要完成 Web 页面具体内容的引用和表述，是丰富内容展示的基础，这类元素包括以下几个：

<meter>：表示特定范围内的数值，可用于工资、数量、百分比等。

<meter value="2" min="0" max="10">2 out of 10</meter><br>
<meter value="0.6">60%</meter>

<time>：表示时间值。

<p>我们在每天早上 <time>9:00</time> 开始上班。</p>
<p>我在 <time datetime="2021-02-14">情人节</time> 有个约会。</p>

<mark>：定义带有记号的文本。

<p>Do not forget to buy <mark>milk</mark> today.</p>

<progress>：用来表示进度条，完成对进度的表示和监视。<progress> 标签不适合用来表示度量衡（例如，磁盘空间使用情况或查询结果）。如需表示度量衡，请使用 <meter> 标签代替。
<video>：视频元素，用于支持和实现视频（含视频流）文件的直接播放，支持缓冲预载和多种视频媒体格式，如 MPEG-4、OggV 和 WebM 等。
<audio>：音频元素，用于支持和实现音频（音频流）文件的直接播放，支持缓冲预载和多种音频媒体格式。

交互性元素

交互性元素主要用于功能性的内容表达，会有一定的内容和数据的关联，是各种事件的基础，这类元素包括以下几个：

<details>：用来表示一段具体的内容，但是内容默认可能不显示，通过某种手段（如单击）与 <legend> 交互才会显示出来。

<details>
	<summary>W3Cschool</summary>
	<p> - by W3Cschool Data. All Rights Reserved.</p>
	<p>All content and graphics on this web site are the property of the company W3Cschool Data.</p>
</details>

<datalist>：定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。
<menu>：主要用于交互菜单。注：所有主流浏览器均不支持 menu 元素。
<command>：用来处理命令按钮。注：只有 Internet Explorer 9 （更早或更晚的版本都不支持）支持 <command> 标签。只有当 command 元素位于 menu 元素内时，该元素才是可见的。

<audio>，<video>

格式：mp3，wav，ogg。mp4，webm，ogg。

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>

<video width="320" height="240" controls autoplay loop>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
您的浏览器不支持 video 标签。
</video>

<source>:标签用来定义多种媒体资源。
controls :属性提供播放、暂停、音量和下载控件。
<audio> 元素允许使用多个 <source> 元素。<source> 元素可以链接不同的音频文件，浏览器将使用第一个支持的音频文件。
可以在 <audio> 和 </audio> 之间放置文本内容，这些文本信息将会被显示在那些不支持 <audio> 标签的浏览器中。

<progress>

作用：定义运行中的任务进程，进度条。
max：进度条满值。
value：进度条的当前值。
其他：不设置任何属性时，会有一个小块一直循环往复的晃动。

<select>，<datalist>

下拉选项框与自动完成列表。

<select>
	<option value="apple">Apple</option>
	<option value="banana">Banana</option>
	<option value="orange">Orange</option>
</select>

<input list="browsers">
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

下拉选项框：会默认展示一个值，标签间的字符为展示字符，value的属性值是获取的真正值。
自动完成选项框：没有默认展示值，列表数据为动态匹配输入内容的自动完成选项。

<input>的输入类型:type

search：搜索输入框，放在form表单中，点击回车相当于直接点击了提交按钮，有×可以清除输入内容。
email：简单的自动验证邮箱格式。
tel：简单的自动验证电话号格式。
url：简单的自动验证网址格式。
date：输入框变为日期选择期。
time：输入框变为时间输入框。

SVG

什么是SVG?

可伸缩矢量图形（Scalable Vector Graphics）。
定义用于网络的基于矢量的图形。
使用xml格式定义图形。
图像在放大或改变尺寸的情况下其图形的质量不会有损失。
是万维网联盟的标准。

SVG画图

<svg width="1000" height="1000">
	<circle cx="100" cy="40" r="40" fill="blue" />
	<rect width="200" height="200" x="150" y="25" fill="red" />
	<line x1="20" y1="30" x2="200" y2="300" style="stroke:#002233;stroke-linecap:round;stroke-width:20;" />
	<polyline style="stroke-linejoin:miter;stroke:black;stroke-width:2;fill:none;" points="100 100,150 150,200 100"/>
	<ellipse cx="200" cy="100" rx="150" ry="70" style="fill:green;" />
	<polygon points="300 50,400 150, 450 100" style="fill:grey;stroke:black;"/>
	<path d="M150 0 L75 200 L225 200 Z" style="fill:white;stroke:red;stroke-width:2"/>
</svg>

圆形：cx和cy为圆心，r为半径，fill填充颜色。不写cx和cy默认为（0，0）。
矩形：x和y为矩形左上角坐标。坐标原点为svg框定范围的左上角。
直线：stroke:线条颜色，stroke-linecap:线条端点样式（butt没有端点默认值，round圆端点，square方端点），stroke-width:线条宽度。
曲线：stroke-linejoin:两条线交角的边角形状（bevel斜角，round圆角，miter尖角默认值），fill默认黑色。
椭圆：rx和ry分别为椭圆的横、纵周半径。
多边形：写不少于三个点的多边形，自动依次连接形成封闭图形。最后一个点连第一个点。
路径：上述例子表示它开始于位置（M）150 0，到达位置（L）75 200，然后从那里开始到（L）225 200，最后在150 0关闭路径（Z）。M = moveto；L = lineto；H = horizontal lineto；V = vertical lineto；C = curveto；S = smooth curveto；Q = quadratic Bézier curve；T = smooth quadratic Bézier curveto；A = elliptical Arc；Z = closepath；以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。

SVG动画

SVG动画使用<animate>元素创建。

<svg width="1000" height="250">
	<rect width="150" height="150" fill="orange">
 		<animate attributeName="x" from="0" to="300"
    	dur="3s" fill="freeze" repeatCount="2"/> 
	</rect>
</svg>

attributeNmae：图形的哪个属性产生动画效果。
from：指定属性起始值。
to：指定属性结束值。
dur：指定动画运行的时间。
fill：指定动画结束后图形所处的位置。freeze动画结束的终点，remove动画的初始位置。
repeatCount：动画重复播放的次数。无限重复使用indefinite。

<canvas>

<canvas> 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成。画布API详解
getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。

画线：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0); //定义线条开始坐标。
ctx.lineTo(200,100); //定义线条结束坐标。
ctx.stroke();

画圆：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI); //arc(x,y,r,start,stop)
ctx.stroke();
ctx.scale(2,2);//所有之后的绘图都会被缩放。定位也会被缩放。如设置 scale(2,2)，那么绘图将定位于距离画布左上角两倍远的位置。
ctx.stroke();

画文本：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.textAlign="start"; //start、end、left、right、center
ctx.fillText("w3cschool",10,50);  //在画布上绘制“被填充的”文本
ctx.strokeText("w3cschool",10,100); //在画布上绘制文本（无填充）
ctx.translate(100, 150); //重新映射画布上的 (0,0) 位置
ctx.fillText("after translate", 20, 40);
ctx.rotate( (Math.PI / 180) * 25);  //旋转当前绘图 rotate 25 degrees.
ctx.fillText("after rotate", 20, 40);

画渐变：渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。

var c1=document.getElementById("myCanvas1");
var ctx1=c1.getContext("2d");

var c2=document.getElementById("myCanvas2");
var ctx2=c2.getContext("2d");

// 创建渐变，渐变必须两种或两种以上的停止颜色。
var grd1=ctx1.createLinearGradient(0,0,200,0);
grd1.addColorStop(0,"red"); //指定颜色停止，参数使用坐标来描述，可以是 0 至 1。
grd1.addColorStop(1,"white");

// 创建渐变
var grd2=ctx2.createRadialGradient(75,50,5,90,60,100);
grd2.addColorStop(0,"red");
grd2.addColorStop(1,"white");

// 填充渐变
ctx1.fillStyle=grd1;
ctx1.fillRect(10,10,150,80);

// 填充渐变
ctx2.fillStyle=grd2;
ctx2.fillRect(10,10,150,80);

画图像：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("myimg");
ctx.drawImage(img,10,10);

SVG 与 Canvas 的区别

SVG
- SVG 是一种使用 XML 描述 2D 图形的语言。
- SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。可以为某个元素附加 JavaScript 事件处理器。
- 在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。
- 特点：
  - 不依赖分辨率。
  - 支持事件处理器。
  - 最适合带有大型渲染区域的应用程序（比如谷歌地图）。
  - 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）。
  - 不适合游戏应用。
Canvas
- Canvas 通过 JavaScript 来绘制 2D 图形。
- Canvas 是逐像素进行渲染的。
- 在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。
- 特点：
  - 依赖分辨率。
  - 不支持事件处理器。
  - 弱的文本渲染能力。
  - 能够以 .png 或 .jpg 格式保存结果图像。
  - 最适合图像密集型的游戏，其中的许多对象会被频繁重绘。

HTML安全色

数年以前，当大多数计算机仅支持 256 种颜色的时候，一系列 216 种 Web 安全色作为 Web 标准被建议使用。其中的原因是，微软和 Mac 操作系统使用了 40 种不同的保留的固定系统颜色（双方大约各使用 20 种）。在线WEB安全色查询

API

Web存储

保存数据：localStorage.setItem(key,value);
读取数据：localStorage.getItem(key);
删除单个数据：localStorage.removeItem(key);
清除所有数据：localStorage.clear();
得到某个索引的key：localStorage.key(index);
sessionStorage使用的API与localStorage的相同。
localStorage 与 sessionStorage 的区别
- localStorage 对象存储的数据没有时间限制。
- sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。

Geolocation API

Geolocation（地理定位）对于拥有 GPS 的设备，比如 iPhone，地理定位更加精确。

Geolocation API 的主要方法是 getCurrentPosition()，它用来获得用户的位置。

<body>
    <input type="button" name="demo" id="demo" onclick="getLocation()" value="获取" />
    <p id="position">地理位置：</p>
    <script type="text/javascript" charset="utf-8">
        var x = document.getElementById("position");

        function getLocation() {
            if (navigator.geolocation) {
            //getCurrentPosition(successCallback, errorCallback,PositionOptions)
              navigator.geolocation.getCurrentPosition(function (res) {
                 showPosition(res)
              });
          } else {
              x.innerHTML = "该浏览器不支持获取地理位置。";
            }
       }

      function showPosition(position) {
      // position包含coords和timestamp。
      // coords属性包含七个值，accuracy：精确度，latitude：纬度，longitude：经度，altitude：海拔，altitudeAcuracy：海拔高度的精确度，heading：朝向，speed：速度。
          x.innerHTML = "纬度: " + position.coords.latitude +
               "<br>经度: " + position.coords.longitude;
     }
	</script>
</body>

拖动

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"> 
		<title>W3Cschool教程(w3cschool.cn)</title>
		<style type="text/css">
  			#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
		</style>
		<script>
  			function allowDrop(ev){
    			ev.preventDefault(); //阻止默认事件
			}
			// 规定了被拖动的数据。
  			function drag(ev){
  			 //数据类型是 "Text"，值是可拖动元素的 id ("drag1")
   				ev.dataTransfer.setData("Text",ev.target.id);
			}

  			function drop(ev){
    			ev.preventDefault();
    			var data=ev.dataTransfer.getData("Text");
   				ev.target.appendChild(document.getElementById(data));
			}
		</script>
	</head>
	<body>
	 	<p>拖动 w3cschool.cn 图片到矩形框中:</p>
		<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
		<br>
		<img id="drag1" src="/statics/images/logo.png" draggable="true" ondragstart="drag(event)" width="336" height="69">
	</body>
</html>

首先，为了使元素可拖动，需要把 draggable 属性设置为 true 。所有元素都可设置draggable属性，img和a自带可拖动。
拖动什么 ondragstart 和 setData()。ondragstart 属性调用了一个函数，drag(event)，它规定了被拖动的数据。dataTransfer.setData() 方法设置被拖数据的数据类型和值。
放到何处 ondragover事件规定在何处放置被拖动的数据。默认无法将数据/元素放置到其他元素中。如果需要设置允许放置，必须阻止对元素的默认处理方式。
进行放置 ondrop。当放置被拖数据时，会发生 drop 事件。