HTML 基础知识点总结为什么要学些基础的内容因为基础是考核候选者能力的最简单/有效的方法(本质就是应对八股文考试,实

本文在不定时的更新中, 关注作者公众号 进二开物 阅读更多好内容分享

为什么要学些基础的内容

因为基础是考核候选者能力的最简单/有效的方法(本质就是应对八股文考试,实际工作中肯定不会记住所有的，有需要查一查，能记住八股文的内容当然最好)。

那为什么不是算法呢？算法固然重要，但是不是最直观的，并且常规的前端开发对算法的要求并不高。更有可能后面企业对基础知识考查会变少，算法会变多...

学习方法

如果是一个前端工程师，时长巩固
不是前端工程师，可以大概知道前端 HTML 构成

HTML 概念

HyperText Markup Language 超文本标记语言。

HTML 作用

HTML 就是负责描述页面的语义

一个 demo 认识 html

<!DOCTYPE html>
<html>
      
  <head>
            
    <meta charset="utf-8" />
            
    <title>页面标题</title>
        
  </head>
      
  <body>
            
    <h1>标题</h1>
            
    <p>段落</p>
        
  </body>
</html>

标签	说明
`<!DOCTYPE html>`	声明为 HTML5 文档
`<html>`	元素是 HTML 页面的根元素
`<head>`	元素包含了文档的元（meta）数据，如 <`meta charset="utf-8">` 定义网页编码格式为 `utf-8`。
`<title>`	元素描述了文档的标题，浏览器标签名
`<body>`	元素包含了可见的页面内容
`<h1>`	元素定义一个大标题
`<p>`	元素定义一个段落
`<!-- 内容 -->`	注释内容

字符集

字符集	说明
UTF-8	字多，有各种国家的语言，但是保存尺寸大，文件臃肿；
gb2312	字少，只用中文和少数外语和符号，但是尺寸小，文件小巧

关键字和描述

head 和 meta

head meta	说明
meta name="Description"	定义 html 页面描述有助于 seo 优化
meta name="Keywords"	定义关键，告诉搜索引擎网页的内容

head 和 title

名字	说明
title	是网页的标题，也是有助于 SEO 搜索引擎优化的。

HTML 基本语法特点

不敏感形式

换行不敏感
tab 不敏感

html 标签种类

容器级别（能容纳任何 html 元素）
文本级别（能容纳文字、图片、表单元素）

html 表现形式

双标签 <div></div>
单标签 <img />
标签中的元素属性 <div id="ab"></div>

全局属性

更多的全局属性查看 MDN 总结的全局属性。

html 语义化标签

HTML5 新特性、语义化

1.概念

HTML5 的语义化指的是合理正确的使用语义化的标签来创建页面结构。【正确的标签做正确的事】

语义化的优点:

更好的展示展示效果
代码结构清晰，易于阅读与维护，
有利于搜索引擎优化（SEO）

1. 语义化标签

header：定义文档的页眉（头部）；
nav：定义导航链接的部分；
footer：定义文档或节的页脚（底部）；
article：定义文章内容；
section：定义文档中的节（section、区段）；
aside：定义其所处内容之外的内容（侧边）；

2. 媒体标签

audio：音频
video 视频
form: 表单
progress：进度条
meter 度量器

HTML 注释

<!--注释的内容-->

HTML 字符实体

HTML 中的预留字符必须被替换为字符实体。

字符实体

显示结果	描述	实体名称	实体编号
	空格	` `	` `
<	小于号	`<`	`<`
大于号		`>`	`>`
&	和号	`&`	`&`
"	引号	`"`	`"`
'	撇号	`'` (IE 不支持)	`'`
￠	分（cent）	`¢`	`¢`
£	镑（pound）	`£`	`£`
¥	元（yen）	`¥`	`¥`
€	欧元（euro）	`€`	`€`
§	小节	`§`	`§`
©	版权（copyright）	`©`	`©`
®	注册商标	`®`	`®`
™	商标	`™`	`™`
×	乘号	`×`	`×`
÷	除号	`÷`	`÷`

html 图片

插入图片的方法：

<img **src="baby.jpg" ** alt="提示" />

img 属性	属性说明
src	地址属性名
alt	不能正常显示的备用显示文字

超链接

<a href="1.html">结婚照</a>

a 属性	属性说明
href	表示 a 指向的链接
title	悬停显示文本
target	`_blank`新建一个窗口，另外还支持：`_self/_parent/_top`

列表

有序

有序列表使用 ol > li 方式进行书写，注意 li(容器标签) 元素不能单独存在。

<ul>
  <li>A Cat</li>
  <li>A Dog</li>
</ul>

无序

无序列表使用 ul > li 方式进行书写，注意 li(容器标签) 元素不能单独存在。

<ul>
  <li>A Cat</li>
  <li>A Dog</li>
</ul>

自定义


dl	定义列表
dt	定义标题（容器标签）
dd	定义描述（容器标签）

使用什么标签根据语义来做是做好，这样最大程度的满足了机器和人的阅读。

div

使用广泛的元素（本意是 division），如上面元素所示，是一个容器元素任何元素都能用。

span 的却别

与 div 有很多的相似之后， span 表示一个区域标签，一般用于放置文本。

表格

表格相关元素	说明
table	包裹元素
th	定义表格的表头
tr	定义表格的行
td	定义表格单元

几个核心元素

<table border="1">
  <tr>
    <td>1111</td>
    <td>1122</td>
  </tr>
  <tr>
    <td>2211</td>
    <td>2222</td>
  </tr>
</table>

表单

form 元素

文本框

input type=text

密码框

input type=password

单选按钮

input type=radio

复选框

input type=checkbox

下拉列表

<select>
  <option>A</option>
  <option>B</option>
  <option>C</option>
  <option>D</option>
  <option>E</option>
  <option>F</option>
  <option>G</option>
</select>

多行文本框（文本域）

<textarea cols="30" rows="10"></textarea>

常见属性：

cols 属性列
rows 属性行

查看更多 textarea 属性

三种按钮

1）普通按钮：

<input type="**button**" value="I'm a button" />

2）提交按钮：

<input type="**submit**" />

3）重置按钮：

<input type="**reset**" />

HTML 元素

块元素

块级（block）元素的特点：

总是在新行上开始；
高度，行高以及外边距和内边距都可控制；
宽度缺省是它的容器的 100%，除非设定一个宽度；
它可以容纳内联元素和其他块元素

块元素	说明
p	段落
table	表格
blockquote	引用
center	居中对齐
dir	目录列表
div	常用块级标签
form	表单
h1	标题（6 个级别）
hr	水平分割线
isindex	input prompt
menu	菜单列表
ol	排序列表
pre	格式化文本
ul	无序列表

内联元素

内联（inline）元素的特点：

和其他元素都在一行上；
高，行高及外边距和内边距不可改变；
宽度就是它的文字或图片的宽度，不可改变；
内联元素只能容纳文本或者其他内联元素。

块状元素	说明
abbr	缩写
acronym	首字
b	粗体
big	大字体
br	换行
cite	引用
code	引用代码
dfn	定义字段
em	强调
i	斜体
img	图片
input	输入框
label	表格标签
q	行内引用
s	中划线
select	项目选择
small	小字体
span	常用内联容器，定义文本内区块
strike	中划线
strong	粗体强调
sub	下标
sup	上标
a	锚点

可变元素

根据上下文确定块状元素和内联元素：

可变元素	说明
`applet`	java applet
`button`	按钮
`del`	删除文本
`frame`	inline frame
`ins`	插入的文本
`map`	图片区块(map)
`object`	object 对象
`script`	客户端脚本

参考

全局属性

显示结果	描述	实体名称	实体编号
	空格	` `	` `
<	小于号	`<`	`<`
大于号		`>`	`>`
&	和号	`&`	`&`
"	引号	`"`	`"`
'	撇号	`'` (IE 不支持)	`'`
￠	分（cent）	`¢`	`¢`
£	镑（pound）	`£`	`£`
¥	元（yen）	`¥`	`¥`
€	欧元（euro）	`€`	`€`
§	小节	`§`	`§`
©	版权（copyright）	`©`	`©`
®	注册商标	`®`	`®`
™	商标	`™`	`™`
×	乘号	`×`	`×`
÷	除号	`÷`	`÷`

显示结果	描述	实体名称	实体编号
	空格	` `	` `
<	小于号	`<`	`<`
大于号		`>`	`>`
&	和号	`&`	`&`
"	引号	`"`	`"`
'	撇号	`'` (IE 不支持)	`'`
￠	分（cent）	`¢`	`¢`
£	镑（pound）	`£`	`£`
¥	元（yen）	`¥`	`¥`
€	欧元（euro）	`€`	`€`
§	小节	`§`	`§`
©	版权（copyright）	`©`	`©`
®	注册商标	`®`	`®`
™	商标	`™`	`™`
×	乘号	`×`	`×`
÷	除号	`÷`	`÷`

显示结果	描述	实体名称	实体编号
	空格	` `	` `
<	小于号	`<`	`<`
大于号		`>`	`>`
&	和号	`&`	`&`
"	引号	`"`	`"`
'	撇号	`'` (IE 不支持)	`'`
￠	分（cent）	`¢`	`¢`
£	镑（pound）	`£`	`£`
¥	元（yen）	`¥`	`¥`
€	欧元（euro）	`€`	`€`
§	小节	`§`	`§`
©	版权（copyright）	`©`	`©`
®	注册商标	`®`	`®`
™	商标	`™`	`™`
×	乘号	`×`	`×`
÷	除号	`÷`	`÷`