HTML基础知识要点锦集

最新推荐文章于 2022-07-27 18:33:48 发布

我最犀利蛮鬼

最新推荐文章于 2022-07-27 18:33:48 发布

阅读量345

点赞数

CC 4.0 BY-SA版权

分类专栏： html 文章标签： html 前端编程

本文链接：https://blog.youkuaiyun.com/qq_37943295/article/details/79669756

html 专栏收录该内容

1 篇文章

订阅专栏

HTML基础知识要点锦集

本文通过对w3schoolHTML基础教程，整理出比较常见的却又容易遗忘或者忽略的HTML相关知识点。本文的标题顺序与w3school中的HTML基础教程标题顺序保持一致。适合翻阅和复习。

1.HTML 基础

(1) 图像的名称和尺寸是以属性的形式提供的
一般我们以为要用样式去操作宽高，但是图片是有直接可用的属性去指定的。

<img src="w3school.jpg" width="104" height="142" />

2.HTML 元素

(1) 空的 HTML 元素
估计很多新手根本不知道什么叫做空的HTML元素，它的定义是：没有内容的 HTML 元素被称为空元素。特征：空元素是在开始标签中关闭的。例如：

<br>

3.HTML 属性

(1) 更多 HTML 属性实例
因为我们通常用CSS去控制样式，所以容易忽略一些也可以控制样式的属性(被废弃的，建议避免使用，知道即可，建议用style)，如下：

<!-- 拥有关于对齐方式的附加信息 -->
<h1 align="center"> 

<!-- 拥有关于背景颜色的附加信息 --> 
<body bgcolor="yellow">

<!-- 拥有关于表格边框的附加信息 --> 
<table border="1">

(2) 始终为属性值加引号
这里的一个需要注意的地方是，在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：

name='Bill "HelloWorld" Gates'

4.HTML 标题

(1) 标题很重要
标题本来没啥好说，但是因为搜索问题和规范问题等原因，一般建议一个文件只出现一次h1。

5.HTML 段落

(1) HTML 输出 - 有用的提示
需要注意一个叫“空白折叠”的问题。对于HTML，您无法通过在HTML代码中添加额外的空格或换行来改变输出的效果。当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。

6.HTML 格式化

有很多可以格式化文字的标签，建议需要时查阅。

7.HTML 引用

有如下引用：
HTML 引文、引用和定义元素

8.HTML 注释

(1) 条件注释
条件注释定义只有 Internet Explorer 执行的 HTML 标签。

<!--[if IE 8]>
    .... some HTML here ....
<![endif]-->

9.HTML CSS

样式引用优先级：
内联样式 > 内部样式表 > 外部样式表

10.HTML 链接

(1) 基本的注意事项 - 有用的提示
请始终将正斜杠添加到子文件夹。假如这样书写链接：href=”http://www.w3school.com.cn/html”，就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址，然后创建一个新的请求，就像这样：href=”http://www.w3school.com.cn/html/”。
提示：命名锚经常用于在大型文档开始位置上创建目录。可以为每个章节赋予一个命名锚，然后把链接到这些锚的链接放到文档的上部。如果您经常访问百度百科，您会发现其中几乎每个词条都采用这样的导航方式。

11.HTML 布局

(1) HTML5 语义元素(常用)
HTML5语义元素

12.HTML 框架

(1) 框架结构标签(少用)

框架结构标签（<frameset>）定义如何将窗口分割为框架
每个 frameset 定义了一系列行或列
rows/columns 的值规定了每行或每列占据屏幕的面积

13.HTML 头部元素

(1) HTML 元素
元数据（metadata）是关于数据的信息。

标签提供关于 HTML 文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。

典型的情况是，meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。

标签始终位于 head 元素中。

元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。
一些搜索引擎会利用 meta 元素的 name 和 content 属性来索引您的页面。
下面的 meta 元素定义页面的描述：

<meta name="description" content="Free Web tutorials on HTML, CSS, XML" />

下面的 meta 元素定义页面的关键词：

<meta name="keywords" content="HTML, CSS, XML" />

14.HTML 字符实体

HTML 字符实体

15.HTML 统一资源定位器

scheme://host.domain:port/path/filename

scheme - 定义因特网服务的类型。最常见的类型是 http
host - 定义域主机（http 的默认主机是 www）
domain - 定义因特网域名，比如 w3school.com.cn
:port - 定义主机上的端口号（http 的默认端口号是 80
path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
filename - 定义文档/资源的名称

16.HTML 表单元素

(1) 元素（下拉列表）

<select name="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
</select>

(2) 元素

<textarea name="message" rows="10" cols="30">
    The cat was playing in the garden.
</textarea>

(3) HTML5 元素

<form action="action_page.php">
    <input list="browsers">
    <datalist id="browsers">
       <option value="Internet Explorer">
       <option value="Firefox">
       <option value="Chrome">
       <option value="Opera">
       <option value="Safari">
    </datalist> 
</form>

17.HTML 输入类型

(1) <input type="text"> 
(2) <input type="password">  
(3) <input type="submit">   
(4) <input type="radio">  
(5) <input type="checkbox">  
(6) <input type="button">  
(7) <input type="number">  
(8) <input type="date">  
(9) <input type="color">  
(10) <input type="range">  
(11) <input type="month">  
(12) <input type="week">  
(13) <input type="time">  
(14) <input type="datetime">  
(15) <input type="datetime-local">  
(16) <input type="email">  
(17) <input type="search">  
(18) <input type="tel">   
(19) <input type="url">

18.HTML Input 属性

(1) size 属性
size属性规定输入字段的尺寸(显示出来可见的宽度)

(2) maxlength 属性
maxlength 属性规定输入字段允许的最大长度(能输入的数量)

(3) autocomplete 属性
autocomplete 属性规定表单或输入字段是否应该自动完成

(4) novalidate 属性
novalidate 属性属于属性,如果设置，则 novalidate 规定在提交表单时不对表单数据进行验证。

(5) autofocus 属性
如果设置，则规定当页面加载时元素应该自动获得焦点。

(6) formaction 属性
formaction 属性覆盖元素的 action 属性。

(7) formenctype 属性
formenctype 属性规定当把表单数据（form-data）提交至服务器时如何对其进行编码（仅针对 method=”post” 的表单）。

<form action="demo_post_enctype.asp" method="post">
   First name: <input type="text" name="fname"><br>
   <input type="submit" value="Submit">
   <input type="submit" formenctype="multipart/form-data"
   value="Submit as Multipart/form-data">
</form>

(8) formmethod 属性
formmethod 属性定义用以向 action URL 发送表单数据（form-data）的 HTTP 方法。formmethod 属性覆盖元素的 method 属性。formmethod 属性适用于 type=”submit” 以及 type=”image”。

(9) formnovalidate 属性
如果设置，则规定在提交表单时不对元素进行验证。formnovalidate 属性覆盖元素的 novalidate 属性。formnovalidate 属性可用于 type=”submit”。

(10) formtarget 属性
formtarget 属性规定的名称或关键词指示提交表单后在何处显示接收到的响应。formtarget 属性会覆盖元素的 target 属性。formtarget 属性可与 type=”submit” 和 type=”image” 使用。

(11) list 属性
list 属性引用的元素中包含了元素的预定义选项。

<input list="browsers">

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

(12) min 和 max 属性
min 和 max 属性适用于如需输入类型：number、range、date、datetime、datetime-local、month、time 以及 week。

Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31">

 Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02">

 Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">

(13) multiple 属性
multiple 属性是布尔属性。如果设置，则规定允许用户在元素中输入一个以上的值。multiple 属性适用于以下输入类型：email 和 file。

(14) pattern 属性
pattern 属性规定用于检查元素值的正则表达式。

(15) placeholder 属性
placeholder 属性规定用以描述输入字段预期值的提示（样本值或有关格式的简短描述）。

(16) required 属性
如果设置，则规定在提交表单之前必须填写输入字段。

(17) step 属性
step 属性规定元素的合法数字间隔。

19.HTML5 浏览器支持

(1) Internet Explorer 的问题
注意：Internet Explorer 8 以及更早的版本，不允许对未知元素添加样式。
幸运的是，Sjoerd Visscher 创造了 “HTML5 Enabling JavaScript”, “the shiv”：

<!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

20.HTML 5 Canvas vs. SVG

Canvas 与 SVG 的比较

Canvas
- 依赖分辨率
- 不支持事件处理器
- 弱的文本渲染能力
- 能够以 .png 或 .jpg 格式保存结果图像
- 最适合图像密集型的游戏，其中的许多对象会被频繁重绘

SVG
- 不依赖分辨率
- 支持事件处理器
- 最适合带有大型渲染区域的应用程序（比如谷歌地图）
- 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
- 不适合游戏应用

参考文献：
[1]http://www.w3school.com.cn/html/index.asp