本文章是作者在学习 Web 开发过程中积累的笔记。如果这些笔记对你的学习有帮助，欢迎通过以下方式支持一下，你的支持是我持续的动力 👇👇
- 关注公众号 无聊才读书呀
- Star 关注 Github 仓库
- 博客地址 无聊才读书的个人网站
文章地址： 前端开发学习路线
WEB基础
web基础
常见浏览器
- IE浏览器
- Edge浏览器
- 火狐浏览器（Firefox）
- 谷歌浏览器（google Chrome）
- Safari浏览器
- Opera浏览器
浏览器内核
浏览器内核有可以分成两部分：渲染引擎（layout engineer 或者 Rendering Engine）和JS引擎。
(1). Trident（IE内核）
(2). Gecko（Firefox）
(3). webkit(Safari)
(4). Chromium/Blink(chrome)
(5). Presto(Opera) blink
web标准
结构标准：结构用于对网页元素进行整理和分类，主要包括XML和XHTML两个部分。
样式标准：表现用于设置网页元素的板式、颜色、大小等外观样式，主要指CSS。
行为标准：行为是指网页模型的定义及交互的编写，主要包括DOM和ECMAScript两个部分。
HTML入门
HTML初识
HTML(Hyper Text Markup Language的缩写)中文译为“超文本标签语言”，主要是通过HTML标签对网页中的文本、图片、声音等内容进行描述。
HTML骨架
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
标签
在HTML页面中，带有<>符号的元素被称为HTML标签，如<html> 、<head> 、<body>等。
- 双标签
<标签名>内容</标签名>
<body></body> - 单标签
<标签名 />
<br />
HTML标签：作用所有HTML中标签的一个根节点。
head标签：用于存放title，meta，base，style，script，link 注意在head标签中我们必须要设置的标签是title
body标签：页面的主体部分。
title标签：让页面拥有一个属于自己的标题.
排版标签
-
标题标签：
<h1><h2><h3><h4><h5><h6> -
段落标签
<p>段落标签</p> -
水平线标签
<hr /> -
换行标签
<br /> -
div span 布局标签 没有语义
<div></div>
<span></span>
文本格式化标签
| 标签 | 显示效果 |
|---|---|
<b></b><strong></strong> |
文字以粗体方式显示（XHTML推荐使用strong） |
<i></i>和<em></em>
|
文字以斜体方式显示（XHTML推荐使用em） |
<s></s>和<del></del>
|
文字以加删除线方式显示（XHTML推荐使用del） |
<u></u>和<ins></ins>
|
文字以加下划线方式显示（XHTML不赞成使用u） |
图片标签
<img src="图像URL" />
属性：
src：图像URL
alt：图像不能显示时的替换文本
title：鼠标悬停时显示的内容
width：设置图像的宽度
height：设置图像的高度
border：设置图像边框的宽度
链接标签
<a href="跳转目标" target="目标窗口的弹出方式"></a>
href：用于指定链接目标的URL地址
target: 用于打开指定链接页面的打开方式，其值有self和black两种
self为默认值，black为在新窗口中打开。
base标签
<base target="_black_" />
base 可以设置整体链接的打开状态
特殊字符标签
| 特殊字符 | 描述 | 字符代码 |
|---|---|---|
|
空格符 | |
< |
小于号 | < |
> |
大于号 | > |
& |
和号 | & |
￥ |
人民币 | ¥ |
© |
版权 | © |
® |
商标 | ® |
℃ |
摄氏度 | ° |
± |
正负号 | ± |
× |
乘号 | × |
÷ |
除号 | ÷ |
² |
平方（上标2） | ² |
³ |
立方（上标3） | ³ |
注释标签
``
文档类型
<!DOCTYPE html>
这句话告诉我们使用的是html5的版本。
字符集
<meta charset="UTF-8">
utf-8是目前最常用的字符集编码方式。包含去世界所有国家需要用到的字符。
GB231 简单中文 ，包含6763个汉字。
BIG5 繁体中文
GBK 包含全部中文字符，是GB2312的扩展，加入对繁体字的支持，兼容GB2312。
属性
使用HTML制作网页时，可以使用HTML标签属性加以设置，语法格式：
<标签名 属性1="属性值" 属性2="属性值2" ...> 内容</标签>
1.标签可以拥有多个属性，必须写在开始标签中，位于标签名后面。
2.属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
3.任何标签的属性都有默认值，省略该属性则取默认值。
采取 键值对 的格式 key=”value“ 的格式。
比如：<hr width="400px">
锚定定位
1.使用<a href="#id名"></a>创建链接文本。
2.使用相应的id名标注跳转目标的位置。id="live"
相对路径
1.图像文件和HTML文件位于同一文件夹，只需输入图像文件名称即可，如<img src="logo.gif" />
2.图像文件位于Html文件的下一级文件夹：输入文件夹名和文件名，之间用“/”隔开，如<img src="img/img01/logo.gif" />
3.图像文件位于HTML文件的上一级文件夹；在文件名之前加入“../”,如果是上两级，则需要使用“../../” 以此类推，如<img src="../logo.gif" />
无序列表ul
无序列表的各个列表项之间没有顺序级别之分，是并列的。其基本语法格式如下：
<ul>
<li> 列表项</li>
<li> 列表项</li>
<li> 列表项</li>
......
</ul>
注意：
-
<ul></ul>中只能嵌套<li></li>,直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。 -
<li>与</li>之间相当于一个容器，可以容纳所有元素。 - 无序列表会有自己样式属性，放下那个样式，让css来！
有序列表ol
<ol>
<li> 中国</li>
<li> 中国</li>
</ol>
网友评论