本文在不定时的更新中, 关注作者公众号
进二开物
阅读更多好内容分享
为什么要学些基础的内容
因为基础是考核候选者能力的最简单/有效
的方法(本质就是应对八股文考试,实际工作中肯定不会记住所有的,有需要查一查,能记住八股文的内容当然最好)。
那为什么不是算法呢?算法固然重要,但是不是最直观的,并且常规的前端开发对算法的要求并不高。更有可能后面企业对基础知识考查会变少,算法会变多...
学习方法
- 如果是一个前端工程师,时长巩固
- 不是前端工程师,可以大概知道前端 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 | 客户端脚本 |