系统学习——HTML

笔记目录

• • 标签
  • • 属性
    • 格式化标签
    • 预留实体字符
    • <form>
    • <fieldset> , <legend>
    • 内容类型（HTML）
    • <audio>，<video>
    • <progress>
    • <select>，<datalist>
    • <input>的输入类型:type
    • SVG
    • • 什么是SVG?
      • SVG画图
      • SVG动画
    • <caption>
  • API
  • • Web存储

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

标签

属性

• title

  ：大部分标签都具有的一个基本属性，用于鼠标悬浮该标签时展示提示文本。

格式化标签

• <b>

  :加粗，

  <i>

  ：斜体，

  <em>

  ：着重，

  <sub>

  ：下角标，

  sup

  ：上角标，

  ins

  ：插入，

  del

  ：删除，

  small

  ：小号字，

  strong

  ：强调。

预留实体字符

• 空格： ，

  <

  小于号：

  &lt;

  ，

  >

  大于号：

  &gt;

  ，

• &

  和号：

  &amp;

  ，

  "

  引号：

  &quot;

  ，

  '

  撇号：

  &apos;

  (IE不支持)，

• ￠

  分：

  &cent;

  ，

  £

  镑：

  &pound;

  ，

  ¥

  人民币/日元：

  &yen;

  ，

• €

  欧元：

  &euro;

  ，

  §

  小节：

  &sect;

  ，

• ©

  版权：

  &copy;

  ，

  ®

  注册商标：

  &reg;

  ，

  ™

  商标：

  &trade;

  ，

• ×

  乘号：

  &times;

  ，

  ÷

  除号：

  &divide;

  。

<form>

• enctype

  ：<form>的一个属性。

  application/x-www-form-urlencoded

  为默认值，在发送前对所有字符进行编码（将空格转换为 “+” 符号，特殊字符转换为 ASCII HEX 值）。

  multipart/form-data

  ，不对字符串编码，当使用有文件上传表单控件时必须为此值。注：只有 method=“post” 时才使用 enctype 属性。

• autocomplete

  ：用于form或input域的输入提示。当用户在自动完成域中输入时，浏览器应该在该域显示填写的选项。值：

  on

  ，

  off

<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元素。
• 相同的元素可以属于多个内容模型。

<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;"/>
</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分别为椭圆的横、纵周半径。
• 多边形：写不少于三个点的多边形，自动依次连接形成封闭图形。最后一个点连第一个点。

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

  。

<caption>

• <table>

  标签的子标签，表格的标题。

API

Web存储

• 保存数据：localStorage.setItem(key,value);
• 读取数据：localStorage.getItem(key);
• 删除单个数据：localStorage.removeItem(key);
• 清除所有数据：localStorage.clear();
• 得到某个索引的key：localStorage.key(index);
• sessionStorage使用的API与localStorage的相同。