① 前端知识体系的核心:HTML + CSS + JavaScript
② 《JavaScript高级程序设计》的作者Nicholas.C.Zakas:“想要完全掌握JavaScript,关键在于弄清楚它的历史、局限性和本质。
③ (官网:)
W3CThe World Wide Web Consortium (W3C) develops standards and guidelines to help everyone build a web based on the principles of accessibility, internationalization, privacy and security.https://www.w3.org/MDN Web DocsThe MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps.
https://developer.mozilla.org/zh-CN/④ 学技术是为了解决问题的:
将知识进行分类。
⑤ 历史性
上世纪90年代,Berners-Lee上线了世界上第一个网站 HTML
The World Wide Web projecthttp://info.cern.ch/hypertext/WWW/TheProject.html⑥ 前端的三大核心
HTML 网页的结构
CSS 网页的视觉体验
JavaScrpit 网页的交互处理
⑦ 常见的浏览器内核:
Trident(三叉戟):IE、360浏览器、UC浏览器、搜狗浏览器
Gecko(壁虎):Mozilla Firefox
Presto(急板乐曲)->Blink(眨眼):Opera
Webkit:Safari、360极速浏览器、搜狗高速浏览器、移动端(Android、IOS)
Webkit->Blink:Google Chrome、Edge
不同的浏览器内核有不同的解析、渲染规则,所以同一网页在不同内核的浏览器中的渲染效果也可能不同。
⑧ 开发工具:
元素的组成
前端最流行的缩进是两个空格
shift+tab 往前缩进
一、 了解
超文本标记语言(Hyper Text Markup Language)一种用来创建网页的标记语言
二、 补充
2.1 URL
统一资源定位符
① URL标准格式:
[协议类型] :// [服务器地址] : [端口号] / [文件路径] [文件名] ? [查询] # [片段ID]
http ://123.123.123.222:8000 / abc/why /mi.png ? page=1&passward=0 #heading-3
特定资源要找路径 相当于给服务器传递额外的参数 小标题定位
② URL和URI区分:
2.2 HTML 元素
① 元素的组成
② 元素也可以拥有属性 (空格 属性名称 "属性值")
③ HTML 元素不区分大小写,但建议小写
④ 总结图:
2.3 字符实体
①如果你使用小于号(<),这个时候就需要使用字符实体;
②HTML 实体是一段以连字号(&)开头、以分号(;)结尾的文本(字符串):
实体常常用于显示保留字符(这些字符会被解析为 HTML 代码)和不可见的字符(如“不换行空格”);
你也可以用实体来代替其他难以用标准键盘键入的字符;
<!-- 打印<好好学习>,天天 向上 -->
<p><好好学习>,天天 向上</p>
2.4 元素语义化
用正确的元素做正确的事情。
2.5 SEO
搜索引擎优化(英语:search engine optimization,缩写为SEO)是通过了解搜索引擎的运作规则来调整网站,以及提高网站在有关搜索引擎内排名的方式。
2.6 emmet语法
① Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个工具.
② 在前端开发的过程中,一大部分的工作是写 HTML、CSS 代码, 如果手动来编写效果会非常低.
③ VsCode内置了Emmet语法,在后缀为.html/.css中输入缩写后按Tab/Enter键即会自动生成.
④ !和html:5可以快速生成完整结构的html5代码.
w20+h30+m40+p50
div[class="item"]*5
三、 HTML结构
3.1 文档声明
① HTML最上方的一段文本我们称之为文档类型声明,用于声明文档类型
(DOCTYPE:document文档type类型)
<!DOCTYPE html>
② HTML文档声明,告诉浏览器当前页面是HTML5页面;让浏览器用HTML5的标准去解析识别内容;
③ 必须放在HTML文档的最前面,不能省略,省略了会出现兼容性问题
3.2 html元素
① 表示一个 HTML 文档的根(顶级元素),所以它也被称为根元素。
所有其他元素必须是此元素的后代
② W3C标准建议为html元素增加一个lang属性,作用是
帮助语音合成工具确定要使用的发音;
帮助翻译工具确定要使用的翻译规则;
③ 比如常用的规则:
lang=“en”表示这个HTML文档的语言是英文;(lang=language语言 )
lang=“zh-CN”表示这个HTML文档的语言是中文;
<!DOCTYPE html>
<html lang="en">
</html>
3.3 head元素
① HTML head 元素 规定文档相关的配置信息(也称之为元数据),包括文档的标题,引用的文档样式和脚本等。
元数据(meta data),是描述数据的数据;
这里我们可以理解成对整个页面的配置:
② 网页的标题:title元素
③ 网页的编码:meta元素
可以用于设置网页的字符编码,让浏览器更精准地显示每一个文字,不设置或者设置错误会导致乱码;
一般都使用utf-8编码,涵盖了世界上几乎所有的文字;
<head>
<meta charset="UTF-8">
<!--网页的标题-->
<title>head元素的学习</title>
</head>
3.4 body元素
① HTML元素本身很多,但是常用的元素就是那么几个。
HTML 元素参考 - HTML(超文本标记语言) | MDN此页面列出了所有使用标签创建的 HTML 元素。https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element② 常用的元素(90%时间都在写这几个):
p元素、h元素;
img元素、a元素、iframe元素;
div元素、span元素;
③ 下阶段学习的元素:
ul、ol、li元素;
button元素、input元素;
table、thead、tbody、thead、th、tr、td;
四、常见元素
h 元素
① 文字作为标题
② <h1> 级别最高,而 <h6> 级别最低。
③ 注意:h元素通常和SEO优化有关系
<h1>标题标签</h1>
p元素
① 表示文本的一个段落。
img 元素
① 将一份图像嵌入文档。
② img是一个可替换元素( replaced element )
③ img有两个常见的属性:
src属性:source单词的缩写,表示源
是必须的,它包含了你想嵌入的图片的文件路径。
alt属性:不是强制性的
作用一:当图片加载不成功,会显示这段文本;
作用二:辅助给阅读器的使用者听。
④ 设置img的src时,需要给图片设置路径:
网络图片:一个URL地址;
本地图片:本地电脑上的图片,后续会和html一起部署到服务;
⑤ 本地图片的路径有两种方式:
绝对路径(几乎不用)从电脑的根目录开始一直找到资源的路径;
相对路径(常用); 相当于当前文件的一个路径;
. 代表当前文件夹,可以省略
.. 代表上级文件夹
<!--网络路径-->
<img src="https://blog.csdn.net/XXXX">
<!--绝对路径(摁住Shift再点击右上浏览器图标使用本地打开的方式)-->
<img src="/home/wolf/Web_learning/templates/IMG.jpg">
<!--相对路径-->
<img src="../templates/IMG.jpg" alt="这是一个狐狸">
a元素
① 定义超链接,用于打开新的URL
② a元素有两个常见的属性:
href:Hypertext(超文本)Reference(引用(指针))
指定要打开的URL地址;
也可以是一个本地地址;
target:该属性指定在何处显示链接的资源。
_self:默认值,在当前窗口打开URL;
_blank:在一个新的窗口中打开URL;
<!-- 属性 内容-->
<a href="https://www.baidu.com">百度一下</a>
<!--target="_self"在本网页打开(默认)-->
<!--target="_self"在新网页打开-->
<a href="https://www.baidu.com" target="_blank">百度一下</a>
<a href="./回顾.html" target="_self">百度一下</a>
③ 锚点链接可以实现:跳转到网页中的具体位置。步骤:
1、在跳转的元素上添加id
2、定义a元素,并且a元素的href属性指向id
<a href="#theme01">跳转到主题一</a>
<a href="#theme02">跳转到主题二</a>
<a href="#theme03">跳转到主题三</a>
<h2 id="theme01">主题一</h2>
<p>这里是主题一</p> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<h2 id="theme02">主题二</h2>
<p>这里是主题二</p> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<h2 id="theme03">主题三</h2>
<p>这里是主题三</p> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
④ a 元素和 img 元素结合(点击图片跳转链接)
<a href="http://www.baidu.com">
<img src="../templates/IMG.jpg" alt="这是一个狐狸">
</a>
⑤总结:超链接可以是网站、zip(下载)、发邮件、锚点
iframe 元素
① 利用iframe元素可以实现:在一个HTML文档中嵌入其他HTML文档② frameborder属性 用于规定是否显示边框 1:显示 0:不显示
③ a元素target的其他值:
_parent:在父窗口中打开URL
_top:在顶层窗口中打开UR
_self:在当前窗口打开URL;
<iframe src="http.//taobao.com" frameborder="0"></iframe>
div和span
① 历史性
② 区别:
都是容器
div元素:多个div元素包裹的内容会在不同的行显示;
span元素:多个span元素包裹的内容会在同一行显示;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.area {
border: 1px solid red;
}
.keywords {
font-size: 30px;
font-weight: 700;
color: blue;
}
</style>
</head>
<body>
<h1>学习前端</h1>area
<div class="area">
<h2>1.学习HTML+CSS</h2>
<p>
先学习HTML,再学习CSS,了解一些历史/本质等等
</p>
</div>
<div class="area">
<h2>2.学习JavaScript</h2>
<p>
学习<span class="keywords">JavaScript的基本语法</span>,BOM/DOM,学网络请求,学ES6,学习一些高级语法,原理
</p>
</div>
<div class="area">
<h2>3.学习工具</h2>
<p>
npm/node/webpack/git
</p>
</div>
</body>
</html>
列表
(注:此元素和下面的元素都是在学过CSS基础后再进行学习)
① 方案一: 使用div元素来实现(比如汽车之家, 知乎上的很多列表)
② 方案二: 使用列表元素, 使用元素语义化的方式实现;
③ HTML提供了3组常用的用来展示列表的元素
有序列表:ol、li
无序列表:ul、li
定义列表:dl、dt、dd
ol li 有序列表
ol(ordered list) 有序列表,直接子元素只能是li
li(list item) 列表中的每一项
ul li 无序列表
ul(unordered list) 无序列表,直接子元素只能是li
li(list item) 列表中的每一项
dl dt dd 定义列表
dl(definition list) 定义列表,直接子元素只能是dt、dd
dt(definition term) term是项的意思, 列表中每一项的项目名
dd(definition description) 列表中每一项的具体描述,是对 dt 的描述、解释、补充
列表的练习—热搜
css:
body,p,h3 {
margin: 0;
padding: 0;
}
body {
background: #f5f5f5;
}
a {
text-decoration: none;
color: #333;
font-size: 12px;
}
h3 {
font-weight: 400;
}
dl, dt, dd {
padding: 0;
margin: 0;
}
ol, li, ul {
padding: 0;
margin: 0;
list-style: none;
}
HTML:
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../css/reset.css">
<style>
ul >li { /* 通用设置 子元素会继承的 */
font-family: Arial, sans-serif;
font-size: 14px;
margin-bottom: 5px;
font-weight: 400;
}
ul > li > .ranking {
font-size: 15px;
color: rgb(145, 149, 163);
margin-right: 5px;
text-align: center;
}
ul > li > a .content {
color: #2440b3;
}
ul > li > a .content:hover { /* 选中时候 */
color: #315efb;
text-decoration: underline;
}
/* 伪类 */ /* 1 2 3比较特殊 */
ul > li:nth-child(1) .ranking {
color: #FE2D46;
}
ul > li:nth-child(2) .ranking {
color: #F60;
}
ul > li:nth-child(3) .ranking {
color: #FAA90E;
}
/* 图标 */
ul > li .icon {
position: relative; /* 相对位置 */
top: 2px;
left: 4px;
display: inline-block;
width: 16px;
height: 16px;
}
ul > li .hot { /* 只有hot匹配时候才加图标 */
background-image: url("../../images/hot.svg");
}
</style>
</head>
<body>
<ul>
<li class="item">
<span class="ranking">1</span>
<a href="#">
<span class="content">草木蔓发 春山在望</span>
<i class="icon hot"></i>
</a>
</li>
<li class="item">
<span class="ranking">2</span>
<a href="#">
<span class="content">草木蔓发 春山在望</span>
<i class="icon hot"></i>
</a>
</li>
<li class="item">
<span class="ranking">3</span>
<a href="#">
<span class="content">草木蔓发 春山在望</span>
<i class="icon"></i>
</a>
</li>
</li>
<li class="item">
<span class="ranking">4</span>
<a href="#">
<span class="content">草木蔓发 春山在望</span>
<i class="icon"></i>
</a>
</li>
</li>
<li class="item">
<span class="ranking">5</span>
<a href="#">
<span class="content">草木蔓发 春山在望</span>
<i class="icon hot"></i>
</a>
</li>
</li>
</ul>
</body>
</html>
表格
table :
tr(table row) 表格中的行
td(table data) 行中的单元格
thead 表格的表头
tbody 表格的主体
tfoot 表格的页脚
caption 表格的标题
th 表格的表头单元格
css属性:
border-collapse: collapse 边框合并
跨列合并: 使用colspan
在最左边的单元格写上colspan属性, 并且省略掉合并的td;
跨行合并: 使用rowspan
在最上面的单元格协商rowspan属性, 并且省略掉后面tr中的td;
表格的练习
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
table {
text-align: center;
border-collapse: collapse; /* 边框合并 */
}
th, td {
border: 1px solid #333;
padding: 8px 16px;
}
table >
</style>
</head>
<body>
<table>
<caption>股票</caption>
<thead>
<tr>
<th>排名</th>
<th>股票名称</th>
<th>股票代码</th>
<th>股票价格</th>
<th>股票涨跌</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>贵州茅台</td>
<td>600519</td>
<td>1800</td>
<td>5%</td>
</tr>
</tbody>
<tbody>
<tr>
<td>2</td>
<td>五粮液</td>
<td>000858</td>
<td>160</td>
<td>8%</td>
</tr>
</tbody>
</table>
</body>
</html>
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
table {
text-align: center;
border-collapse: collapse; /* 边框合并 */
}
caption, th, td {
border: 1px solid #333;
padding: 8px 16px;
}
td[rowspan], caption{ /* 属性选择器 包括rowspan的td*/
font-weight: 700;
}
</style>
</head>
<body>
<table>
<caption>课程表</caption>
<thead>
<tr>
<th> </th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="4">上午</td>
<td>英语</td>
<td>英语</td>
<td>英语</td>
<td>英语</td>
<td>英语</td>
</tr>
<tr>
<td>英语</td>
<td>英语</td>
<td>英语</td>
<td>英语</td>
<td>英语</td>
</tr>
<tr>
<td>英语</td>
<td>英语</td>
<td>英语</td>
<td>英语</td>
<td>英语</td>
</tr>
<tr>
<td>英语</td>
<td>英语</td>
<td>英语</td>
<td>英语</td>
<td>英语</td>
</tr>
<tr>
<td colspan="6">午休</td>
</tr>
<tr>
<td rowspan="3">下午</td>
<td>英语</td>
<td>英语</td>
<td>英语</td>
<td>英语</td>
<td>英语</td>
</tr>
<tr>
<td>英语</td>
<td>英语</td>
<td>英语</td>
<td>英语</td>
<td>英语</td>
</tr>
<tr>
<td>英语</td>
<td>英语</td>
<td>英语</td>
<td>英语</td>
<td>英语</td>
</tr>
</tbody>
</table>
</body>
</html>
表单
HTML表单元素是和用户交互的重要方式之一, 在很多网站都需要使用表单:
input
① 表单元素使用最多的是input元素
② input元素有如下常见的属性:
text:文本输入框(明文输入)
password:文本输入框(密文输入)
radio:单选框
button:按钮
reset:重置
submit:提交表单数据给服务器
file:文件上传
◼ readonly:只读
◼ disabled:禁用
◼ checked:默认被选中
◼ checkbox:复选框
只有当type为radio或checkbox时可用
◼ autofocus:当页面加载时,自动聚焦
◼ name:名字
在提交数据给服务器时,可用于区分数据类型
◼ value:取值
:输入(表单输入)元素 - HTML(超文本标记语言) | MDNHTML 元素用于为基于 Web 的表单创建交互式控件,以便接受来自用户的数据。取决于设备和用户代理不同,表单可以使用各种类型的输入数据和控件。 元素是目前是 HTML 中最强大、最复杂的元素之一,因为它有大量的输入类型和属性组合。https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input
布尔属性
常见的布尔属性有disabled、checked、readonly、multiple、autofocus、selected
布尔属性可以没有属性值,写上属性名就代表使用这个属性
<input type="text" disabled autofocus readonly>
重置/提交按钮
普通按钮(type=button):使用value属性设置按钮文字
重置按钮(type=reset):重置它所属form的所有表单元素(包括input、textarea、select)
提交按钮(type=submit):提交它所属form的表单数据给服务器(包括input、textarea、select)
<input type="button" value="普通按钮">
<input type="reset" value="重置按钮">
<input type="submit" value="提交按钮">
<button type="button">普通按钮</button>
<button type="reset">重置按钮</button>
<button type="submit">提交按钮</button>
input和label
当相互配合使用时候,点击用户也能选到
<div>
<label for="username">用户:
<input id="username" type="text" name="username">
</label>
<label for="password">密码:
<input id="password" type="text" name="password">
</label>
</div>
radio 单选
type类型设置为radio变成单选框:
name值相同的radio才具备单选功能
<div>
性别:
<label for="male">
<input id="male" type="radio" name="sex"> 男
</label>
<label for="female">
<input id="female" type="radio" name="sex"> 女
</label>
</div>
checkbox 多选框
<div>
爱好:
<label for="backetball">
<input id="backetball" type="checkbox" name="hobby" value="backetball"> 篮球
</label>
<label for="fotball">
<input id="fotball" type="checkbox" name="hobby" value="fotball"> 足球
</label>
<label for="run">
<input id="run" type="checkbox" name="hobby" value="run"> 跑步
</label>
</div>
textarea 简介框
cols:列数
rows:行数
缩放的CSS设置
禁止缩放:resize: none;
水平缩放:resize: horizontal;
垂直缩放:resize: vertical;
水平垂直缩放:resize: both;
<style>
textarea {
resize: horizontal;
}
</style>
<form action="">
<label for="info">
个人描述:
<textarea name="info" id="info" cols="10" rows="6"></textarea>
</label>
</form>
select和option 选择框
① option是select的子元素,一个option代表一个选项
② select常用属性
multiple:可以多选
size:显示多少项
③ option常用属性
selected:默认被选中
<select name="fruits" id="" multiple size="3">
<option value="apple" selected>苹果</option> <!--默认被选中-->
<option value="banana">香蕉</option>
<option value="orange">橘子</option>
</select>
form常见的属性
action
用于提交表单数据的请求URL
method
请求方法(get和post),默认是get
target
在什么地方打开URL(参考a元素的target)
<form action="https://wolf27115.com/abc/" method="post" target="_blank">
<!--默认是get请求 新页面打开-->
<div>
<label for="username">用户:
<input id="username" type="text" name="username" >
</label>
<label for="password">密码:
<input id="password" type="password" name="password">
</label>
</div>
<div>
性别:
<label for="male">
<input id="male" type="radio" name="sex" value="male"> 男
</label>
<label for="female">
<input id="female" type="radio" name="sex" value="female"> 女
</label>
</div>
<div>
<button type="submit">提交按钮</button>
<button type="reset">重置按钮</button>
</div>
</form>
get请求:
post请求:
五、 不常用元素
① strong元素:内容加粗、强调;
通常加粗会使用css样式来完成;
开发中很偶尔会使用一下;
② i元素:内容倾斜;
通常斜体会使用css样式来完成;
开发中偶尔会用它来做字体图标(因为看起来像是icon的缩写);
③ code元素:用于显示代码
偶尔会使用用来显示等宽字体;
④ br元素:换行元素
开发中已经不使用;
<p>好好<strong>学习</strong>,<i>天天向上</i></p>
⑤ 更多元素详解,查看MDN文档:
HTML 元素参考 - HTML(超文本标记语言) | MDN此页面列出了所有使用标签创建的 HTML 元素。https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element
六、 HTML全局属性
① 某些属性只能设置在特定的元素中:
比如img元素的src、a元素的href;
② 也有一些属性是所有HTML都可以设置和拥有的,这样的属性我们称之为 “全局属性(Global Attributes)。” 全局属性有很多:
全局属性 - HTML(超文本标记语言) | MDN全局属性是所有 HTML 元素共有的属性;它们可以用于所有元素,即使属性可能对某些元素不起作用。https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes④ 常见的全局属性如下:
id 元素
定义唯一标识符(ID),该标识符在整个文档中必须是唯一的。
class 元素
类名(classes )列表,它允许 CSS 和 Javascript 通过类选择器或者DOM方法来选择和访问特定的元素;
style 元素
给元素添加内联样式;
title 元素
包含表示与其所属元素相关信息的文本。 这些信息通常可以作为提示呈现给用户,但不是必须的。
<a href="#theme01">跳转到主题一</a>
<h2 id="theme01">主题一</h2>
<div class="area"><div>
.area {}