HTML 基础知识点总结

1,950 阅读6分钟

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

为什么要学些基础的内容

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

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

学习方法

  • 如果是一个前端工程师,时长巩固
  • 不是前端工程师,可以大概知道前端 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 的语义化指的是合理正确的使用语义化的标签来创建页面结构。【正确的标签做正确的事】

  1. 语义化的优点:
  • 更好的展示展示效果
  • 代码结构清晰,易于阅读与维护,
  • 有利于搜索引擎优化(SEO)

1. 语义化标签

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

2. 媒体标签

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

HTML 注释

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

HTML 字符实体

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

字符实体

显示结果描述实体名称实体编号
空格&nbsp;&#160;
<小于号&lt;&#60;
大于号&gt;&#62;
&和号&amp;&#38;
"引号&quot;&#34;
'撇号&apos; (IE 不支持)&#39;
分(cent)&cent;&#162;
£镑(pound)&pound;&#163;
¥元(yen)&yen;&#165;
欧元(euro)&euro;&#8364;
§小节&sect;&#167;
©版权(copyright)&copy;&#169;
®注册商标&reg;&#174;
商标&trade;&#8482;
×乘号&times;&#215;
÷除号&divide;&#247;

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水平分割线
isindexinput 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锚点

可变元素

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

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

参考