前端学习笔记，HTML,CSS,JavaScript三者协同构成网页
动态弱类型，解释型语言，前端核心
首先解释一个误区
Java 与 JavaScript 的关系：没有任何直接的技术继承关系
命名历史：JavaScript 最初由 Netscape（网景）公司开发，原名为LiveScript。当时 Java 语言非常火爆，Netscape 为了市场营销蹭热度，与 Sun 公司（Java 的开发商）达成协议，将其改名为 JavaScript。
爬虫,脚本
看懂网页，才能分析网页，不至于像本蒟蒻一样在github上找到脚本之后还要摸索半天找cookie 😭
HTML学习
工具
使用vsc学习过程中推荐插件Live Server Preview，按下F1输入live之后将在右侧实时显示，不用反复跳转浏览器
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Study HTML</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落</p>
<p>我的第二个段落</p>
</body>
</html>
<!-- <!DOCTYPE html> 声明为 HTML5 文档
<html> 元素是 HTML 页面的根元素
<head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容
<h1> 元素定义一个大标题
<p> 元素定义一个段落 -->
|
html标签通常是成对出现的，第一个是开始，第二个是结束
“HTML 标签” 和 “HTML 元素” 通常都是描述同样的意思.
但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签
html文件的读取
Web浏览器可以直接渲染，我们定义的标签决定了HTML页面如何呈现内容给用户
<!DOCTYPE>声明
<!DOCTYPE>声明有助于浏览器中正确显示网页.网络上有很多不同的文件，如果能够正确声明HTML的版本，浏览器就能正确显示网页内容。
1
2
3
4
5
6
7
| <!DOCTYPE html>
<!DOCTYPE HTML>
<!doctype html>
<!Doctype Html>
|
HTML基础
标题
通过h1-h6,六级标签来定义，相当于word几级标题
段落
1
2
| 通过标签<p>来定义
<p>这是一个段落</p>
|
链接
1
2
3
4
| <a href="https://inmostfly.github.io/">这是一个链接</a>
在href属性中指定链接的地址
os:这里踩过几个坑，在.styl里面定义的时候链接通常需要特殊的指定才能生效，如.menu-item a{ }
查询到是：>>链接自带默认强制色，继承被阻断 在 CSS 规范中，任何直接作用于元素的样式，其优先级都高于继承的样式，即使继承的样式带有 !important。
|
图像
1
2
| <img src="/images/logo.png" width="258" height="39" />
通过<img>来定义，名称和尺寸是以属性的形式提供的，src传递位置，后面两个同理
|
元素
开始<>与结尾<>放在一起，与中间的主体一起构成元素
1
| <br/>无结束符，换行 是空元素的一种 空元素以/更稳妥
|
嵌套的元素
1
2
3
4
5
6
7
8
| <!DOCTYPE html>
<html>
<body>
<p>这是第一个段落。</p>
</body>
</html>
包含了三个元素
|
属性
属性是 HTML 元素提供的附加信息。
属性通常出现在 HTML 标签的开始标签中，用于定义元素的行为、样式、内容或其他特性。属性总是以 name=”value” 的形式写在标签内，name 是属性的名称，value 是属性的值。属性一般描述于开始标签
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| <a href="https://inmostfly.github.io/">这是一个链接</a>
href是属性名称，后面是值
在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号
HTML 提示：使用小写属性
属性名 适用元素 说明
id 所有元素 为元素指定唯一的标识符。
class 所有元素 为元素指定一个或多个类名，用于 CSS 或 JavaScript 选择。
style 所有元素 直接在元素上应用 CSS 样式。
title 所有元素 为元素提供额外的提示信息，通常在鼠标悬停时显示。
data-* 所有元素 用于存储自定义数据，通常通过 JavaScript 访问。
href <a>, <link> 指定链接的目标 URL。
src <img>, <script>, <iframe> 指定外部资源（如图片、脚本、框架）的 URL。
alt <img> 为图像提供替代文本，当图像无法显示时显示。
type <input>, <button> 指定输入控件的类型（如 text, password, checkbox 等）。
value <input>, <button>, <option> 指定元素的初始值。
disabled 表单元素 禁用元素，使其不可交互。
checked <input type="checkbox">, <input type="radio"> 指定复选框或单选按钮是否被选中。
placeholder <input>, <textarea> 在输入框中显示提示文本。
target <a>, <form> 指定链接或表单提交的目标窗口或框架（如 _blank 表示新标签页）。
readonly 表单元素 使输入框只读。
required 表单元素 指定输入字段为必填项。
autoplay <audio>, <video> 自动播放媒体。
onclick 所有元素 当用户点击元素时触发 JavaScript 事件。
onmouseover 所有元素 当用户将鼠标悬停在元素上时触发 JavaScript 事件。
onchange 表单元素 当元素的值发生变化时触发 JavaScript 事件。
|
更多属性请移步至Runoob.
更新到标题，稍后继续更新