HTML基础

2019-08-25 HTML HTML 0 评论字数统计: 3k(字) 阅读时长: 12(分)

HTML 基础

HTML 文档元信息 `<meta/>` 的重要性

<meta/> 可分为两大部分：[ http-equiv ] 和 [ name ] 变量

[ http-equiv ]

http-equiv相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助浏览器正确地显示网页内容。

值	描述
content-type	设定页面使用的字符集 `<meta http-equiv="content-Type" content="text/html; charset="utf-8">` UTF-8：世界通用的语言编码 GB2312：编码是简体中文 ISO-8859-1：编码是英文
X-UA-Compatible	IE8的专用标记，用来指定IE8浏览器去模拟某个特定版本的IE浏览器的渲染方式，以此来解决部分兼容问题 `<meta http-equiv="X-UA-Compatible" content="IE=7">` 以上代码告诉IE浏览器，无论是否用DTD声明文档标准，IE8/9都会以IE7引擎来渲染页面 `<meta http-equiv="X-UA-Compatible" content="IE=8">` 以上代码告诉IE浏览器，IE8/9都会以IE8引擎来渲染页面 `<meta http-equiv="X-UA-Compatible" content="IE=edge">` 以上代码告诉IE浏览器，IE8/9及以后的版本都会以最高版本IE来渲染页面 `<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">` 以上代码IE=edge告诉IE使用最新的引擎渲染网页，chrome=1则可以激活Chrome Frame
expires	设定网页的过期时间 `<meta http-equiv="expires"content="Fri,12Jan200118:18:18GMT">` 必须使用GMT的时间格式
refresh	自动刷新并指向新页面 `<meta http-equiv="Refresh" content="2;URL=https://www.baidu.com">`
set-cookie	如果网页过期，那么自动删除本地cookie `<meta http-equiv="Set-Cookie"content="cookie value=xxx;expires=Friday,12-Jan-200118:18:18GMT；path=/">` 必须使用GMT的时间格式
windows-target	强制页面在当前窗口中以独立页面显示，可以防止自己的网页被别人当作一个frame页调用 `<meta http-equiv="Window-target" content="_top">`
cache-control	缓存机制 `<meta http-equiv="cache-control" content="no-cache">` Public：指示响应可被任何缓存区缓存。 Private：指示对于单个用户的整个或部分响应消息，不能被共享缓存处理。这允许服务器仅仅描述当用户的部分响应消息，此响应消息对于其他用户的请求无效。 no-cache：指示请求或响应消息不能缓存。 no-store：用于防止重要的信息被无意的发布。在请求消息中发送将使得请求和响应消息都不使用缓存。 max-age：指示客户机可以接收生存期不大于指定时间（以秒为单位）的响应。 min-fresh：指示客户机可以接收响应时间小于当前时间加上指定时间的响应。 max-stale：指示客户机可以接收超出超时期间的响应消息。如果指定max-stale消息的值，那么客户机可以接收超出超时期指定值之内的响应消息。

[ name ]

name属性主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

值	描述
author	标注网页的作者 `<meta name="author" content="value" />`
keywords	页面关键词，用于被搜索引擎收录 `<meta name="keywords" content="value1,value2">`
description	页面描述，用于搜索引擎收录 `<meta name="description" content="value">`
viewport	用于控制页面缩放 `<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">`
renderer	指定双核浏览器默认以何种方式渲染页面 `<meta name="renderer" content="webkit">` webkit：默认webkit内核 ie-comp：默认IE兼容模式 ie-stand：默认IE标准模式
generator	说明网站的采用的什么软件制作 `<meta name="generator" content="Microsoft"/>`
revised	网页文档的修改时间 `<meta name="revised" content="WebName, MM/DD/YYYY"/>`
robots	用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引 `<meta name="robots" content="all"/>` all：文件将被检索，且页面上的链接可以被查询 none：文件将不被检索，且页面上的链接不可以被查询 index：文件将被检索 noindex：页面上的链接可以被查询 follow：文件将不被检索，但页面上的链接可以被查询 nofollow：文件将不被检索，页面上的链接可以被查询
copyright	网站版权信息 `<meta name="copyright" content="本页版权XXX所有。All Rights Reserved" />`

HTML 块级元素 & 内联元素 & 置换元素

类型	描述
块级元素	div、header、nav、article、aside、section、footer、p、h1~h6、ul、ol…

块级元素特点：

独占一行
行高和边距可变
可以容纳块级元素和内联元素
display: block / table;

类型	描述
内联元素	span、img、label、input、button….

内联元素特点：

与其他元素在同一行上
行高和边距不可变
只可容纳内联元素
display: inline / inline-block;

置换元素

一个内容不受 CSS 视觉格式化模型控制，CSS 渲染模型并不考虑对此内容的渲染，且元素本身一般拥有固有尺寸（宽度，高度，宽高比）的元素，浏览器会根据置换元素的标签和属性，来决定元素的具体显示内容。

置换元素与一般行内元素的区别在于：置换元素拥有内在尺寸，可以设置宽高，其性质等同于设置了 display: inline-block; 的元素。

常见的有 <img>、<input>、<textarea>、<select>、<object>等

HTML 语义化

易于用户阅读，样式丢失的时候能让页面呈现清晰的结构。
有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重。
方便其他设备解析，如盲人阅读器根据语义渲染网页
有利于开发和维护，语义化更具可读性，代码更好维护，与CSS3关系更和谐。

标签	语义
`<article>`	定义文档内的文章
`<aside>`	定义页面内容之外的内容
`<details>`	定义用户可查看或隐藏的额外细节
`<figcaption>`	定义 `<figure>` 元素的标题
`<figure>`	定义自包含内容，比如图示、图表、照片、代码清单等等
`<footer>`	定义文档或节的页脚
`<header>`	定义文档或节的页眉
`<main>`	定义文档的主内容
`<mark>`	定义重要或强调的内容
`<nav>`	定义文档内的导航链接
`<section>`	定义文档中的节
`<summary>`	定义 `<details>`元素的可见标题
`<time>`	定义日期/时间

例如下面这段代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <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>Document</title>
</head>
<body>
  <!--页眉-->
  <header></header>
  <!--导航-->
  <nav></nav>
  <!--主内容-->
  <main>
    <!--文章-->
    <article>
      <!--节-->
      <section>
        <!-- 表单 -->
        <form>
          <!-- 围绕表单的边框 -->
         <fieldset>
          <!-- fieldset 元素的标题 -->
          <legend>Personalia:</legend>
            <!-- input标注 -->
            <label for="male">Male</label>
            <input type="radio" name="sex" id="male" value="male">
            <!-- 重置按钮 -->
            <input type="reset" value="重置">
            <!-- 提交按钮 -->
            <input type="submit" value="提交">
         </fieldset>>
        </form>
      </section>
    </article>
    <!-- 页面内容之外的内容 -->
    <aside></aside>
  </main>
  <!--页脚-->
  <footer></footer>
</body>
</html>

Canvas 图形绘制

<script>
  var c = document.getElementById('myCanvas');
  var ctx = c.getContext('2d')
</script>

绘制基本图形

图形	方法
直线	moveTo(x,y) lineTo(x,y)
闭环	closePath()
矩形	rect(x,y,w,h)
曲线	二次贝塞尔曲线：context.quadraticCurveTo(cpx,cpy,x,y) 三次方贝塞尔曲线：bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)
圆形	arc(x,y,r,sAngle,eAngle,counterclockwise)
线性渐变	createLinearGradient(x0,y0,x1,y1) addColorStop(stop,color)
平移图形	translate(x,y)
缩放效果	scale(scalewidth,scaleheight)
旋转效果	rotate(angle)

颜色 & 阴影

属性	描述
fillStyle	设置或返回用于填充绘画的颜色、渐变或模式
strokeStyle	设置或返回用于笔触的颜色、渐变或模式
shadowColor	设置或返回用于阴影的颜色
shadowBlur	设置或返回用于阴影的模糊级别
shadowOffsetX	设置或返回阴影距形状的水平距离
shadowOffsetY	设置或返回阴影距形状的垂直距离

图像的应用

复制图像：drawImage(img,sx,sy,swidth,sheight,x,y,width,height)
裁剪图像：clip()
平铺图像：createPattern(image,”repeat|repeat-x|repeat-y|no-repeat”)

属性	描述
img	规定要使用的图像、画布或视频。
sx	可选。开始剪切的 x 坐标位置。
sy	可选。开始剪切的 y 坐标位置。
swidth	可选。被剪切图像的宽度。
sheight	可选。被剪切图像的高度。
x	在画布上放置图像的 x 坐标位置。
y	在画布上放置图像的 y 坐标位置。
width	可选。要使用的图像的宽度。（伸展或缩小图像）
height	可选。要使用的图像的高度。（伸展或缩小图像）

文字的应用

“被填充的”文本：fillText(text,x,y,maxWidth)
绘制文本（无填充）：strokeText(text,x,y,maxWidth)

HTML5 代码规范

请使用正确的文档类型<!DOCTYPE html>
使用小写元素名
混合大小写名称并不好
开发者习惯使用小写名（比如在 XHTML 中）
小写更起来更纯净
小写更易书写
关闭所有HTML元素
关闭空的HTML元素
使用小写属性名
混合属性名并不好
开发者习惯于使用小写属性名（比如在 XHTML 中）
小写属性名看情况更纯净
小写属性名更易书写
属性值加引号
如果属性值包含值，则必须使用引号
混合样式绝对不好
加引号的值更易阅读
必要的属性
请始终对图像使用 alt 属性。当图像无法显示时该属性很重要。
空格和等号，精简空格更易阅读。
避免长代码行(80个字符以内)
空格和缩进，请勿毫无理由地增加空行。
不能省略<html></html>和<body></body>、<head></head>
元数据，文档中对语言和字符编码的定义越早越好。
HTML注释
短注释应该在单行中书写，并在 <!-- 之后增加一个空格，在 <!--之前增加一个空格
样式表
开括号与选择器位于同一行
在开括号之前用一个空格
使用两个字符的缩进
在每个属性与其值之间使用冒号加一个空格
在每个逗号或分号之后使用空格
在每个属性值对（包括最后一个）之后使用分号
只在值包含空格时使用引号来包围值
把闭括号放在新的一行，之前不用空格
避免每行超过 80 个字符
注释：在逗号或分号之后添加空格，是所有书写类型的通用规则。
在HTML中加载JavaScript
通过JavaScript访问HTML元素
使用小写文件名
文件扩展名.html

本文链接： https://liushuai97.github.io/2019/08/25/HTML基础/
版权声明： 本博客所有文章除特别声明外，均采用 CC BY 4.0 CN协议许可协议。转载请注明出处！

Anily前端 & Web Developer

任何值得做的事就值得把它做好。- Whatever is worth doing is worth doing well.