前端入门学习笔记(HTML, CSS, JS)

江北南风

已于 2023-07-07 17:47:37 修改

阅读量184

点赞数 1

分类专栏：前端文章标签：前端 html5 css javascript

于 2023-07-05 17:31:34 首次发布

本文链接：https://blog.csdn.net/qmmctzs/article/details/131555281

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前置芝士

网站&网页

网站是使用HTML等制作的用于展示特定内容相关的网页的集合.
网页通常是HTML文件, 通过浏览器阅读.

HTML简介

HTML指的是超文本标记语言(Hyper Text Markup Language), 是一种用来描述网页的一种标记语言.
标记语言是一套标记标签.

浏览器&内核

五大主流浏览器(IE和edge算一个)

浏览器内核

浏览器内核(渲染引擎):负责读取网页内容, 整理讯息, 计算网页显示方式并显示界面.

浏览器	内核
IE	Trident
firefox	Gecko
Safari	Webkit
chrome/Opera	Blink

国内浏览器一般采用 Webkit/Blink 内核, 如360, UC, 搜狗…

Web标准

网络标准是由W3C组织和其他标准化组织制定的一系列标准的集合.
W3C(万维网联盟)是国际最著名的标准化组织.

为什么需要Web标准

浏览器不同, 显示界面和排版会有一些差异.
遵循Web标准除了可以让不同开发人员写出的界面更让标准, 更统一外还能更易被搜索引擎搜索, 降低流量费用, 是网站更易于维护, 提升浏览速度.

Web标准的构成

主要包括结构(Structure), 表现(Presentation), 行为(Behavior) 三方面.

标准	说明	工具
结构	对网页元素进行整理分类	HTML
表现	设置网页元素的版式, 颜色, 大小等外观样式	CSS
行为	网页模型的定义及交互的编写	Javascript

结构可以当作骨架, 表现可以看作修饰, 行为类比交互动作.

HTML学习

HTML语法规范

基本语法概述

HTML标签是由尖括号包围的关键词, 如<html>
HTML标签通常成对出现, 例如<html>和</html>,称之为双标签, 第一个标签是开始标签, 第二个标签是结束标签.
极少标签必须是单个标签,例如<br />, 称为单标签.

标签关系

标签有两种关系: 包含关系和并列关系. 又称为父子关系和兄弟关系.

包含关系

<head>
	<title></title>
<head>

并列关系

<head></head>
<body></body>

HTML基本结构标签

每个网页都会有一个基本的结构标签(也称为骨架标签), 界面内容也是在这些基本标签上书写.

标签名	定义	说明
`<html><\html>`	HTML标签	界面中最大的标签, 被称为跟标签
`<head><\head>`	文档的头部	注意在head标签中必须要设置title
`<title></title>`	文档的标题	让界面拥有一个属于自己的网页标题
`<body></body>`	文档的主体	元素包含文档的所有内容, 界面内容都是放到body里面的

第一个HTML页面

创建一个.html文件输入以下代码,保存后点开文件就行.

<html>
    <head>
        <title>
            Hello world! 
        </title>
    </head>
    <body>
        Good good study,day day up!
    </body>
</html>

效果如图
Hello world

开发工具

开发工具选择vscode.

快捷键	说明
Alt+B	通过默认浏览器打开html文件
Shift+Alt+B	选择浏览器打开html文件

快捷键	说明
Alt+L+O	打开html文件并实时预览

vscode常用快捷键

快捷键	说明
!+Enter	自动生成html骨架
ctrl+G+输入数字	快速跳转到哪一行
Shift+Alt+向下方向键	复制当前行到下一行
Shift + Alt + F	代码自动对齐
ctrl+/	快速注释

快捷键自动生成的骨架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

<!-- 说明: -->
<!-- 只修改title和补充body部分就行 -->
<!-- 也可以将第二行的en改为zh-CN告诉浏览器写的是中文网页 -->

标签	说明
`<h1></h1>`	一级标题(最大)
`<h2></h2>`	二级标题
`...`	…
`<h6></h6>`	六级标题(最小)

语义	标签	说明
加粗	`<strong></strong>`或`<b></b>`	`<strong>`语义更强
倾斜	`<em></em>`或`<i></i>`	`<em>`语义更强
删除线	`<del></del>`或`<s></bs`	`<del>`语义更强
下划线	`<ins></ins>`或`<u></bu`	`<ins>`语义更强

属性	属性值	说明
src	图片路径	必须属性
alt	文本	替换文本, 如果图片无法正常显示就显示该文本
title	文本	提示文本, 鼠标放到图像上显示的文字
width	像素	设置图像的宽度
height	像素	设置图像的高度
border	像素	设置图像的边框粗细

相对路径分类	符号	说明	栗子
同级路径		图像文件和HTML文件位于同一级	`<img src="a.jpg">`
下一级路径	文件夹名/	图像文件位于HTML文件下一级	`<img src="images/a.jpg">`
上一级路径	../	图像文件位于HTML文件上一级	`<img src="../a.jpg">`

属性	作用
href	必须属性, 指定目标的url地址
target	指定链接页面的打开方式, `_self`为默认值, 在原窗口上打开; `_blank`为在新窗口打开

外部链接: 如上面那个例子
内部链接: 网站内部界面之间的链接,用类似图像文件路径的方式直接链接到本地文件即可.
```
<a href="index.html"> text </a>
```
空链接: 如果没有确定连接目标时这样写.
```
<a href="#"> text </a>
```
下载链接: 如果herf里面链接的是一个压缩包或者文件, 点击即下载.
```
<a href="data.zip"> download </a>
```
网站元素链接: 将<a> <\a>中间改成图像视频等等, 都可以点击跳转.
```
<a href="data.zip"> 
	<img src="img.jpg"/>
</a>
```
锚点链接: 点击后跳转到网页某个确定位置, 比如说点击该博客的目录会跳转到相应的位置.
1.在链接文本的href属性中, 设定属性值为 #名字的形式, 如 <a href="#2">part 2</a>
2.找到目标位置标签,在里面添加id属性=名字, 如<h3 id="2">第二部分</h3>

注释标签

语法格式

<!--注释文本 快捷键 ctrl+/ -->

注释标签的内容便于阅读和理解代码, 网页并不会显示.

特殊字符

HTML页面里有一些特殊字符不方便直接使用, 可以用以下字符代码替代.

特殊字符	描述	字符代码
	空格符	` `
<	小于号	`<`
>	大于号	`>`
=	等于号	`&`
￥	人民币	`¥`
×	乘号	`×`
÷	除号	`÷`
²	二次方(上标2)	`²`

表格标签

表格基本语法

<!-- body部分代码, 后面的例子没有说明均为body部分代码 -->
<table>
    <tr> <td>姓名</td> <td>性别</td> <td>年龄</td> </tr>
    <tr> <td>张三</td> <td>男</td> <td>36</td> </tr>
    <tr> <td>李四</td> <td>男</td> <td>24</td> </tr>
    <tr> <td>翠花</td> <td>女</td> <td>18</td> </tr>
</table>

<table></table>是定义表格的标签.
<tr></tr>标签定义表格的行, 必须嵌套在<table></table>标签中.
<td></td>标签定义表格的单元格, 必须嵌套在<tr></tr>标签中.
td即为table data ,及单元格中的内容.
上面代码的效果:
表格效果

表头单元格标签

<th></th>标签表示HTML表格的表头部分, 常用于第一行, 表头单元格里文本加粗居中显示.

<table>
    <tr> <th>姓名</th> <th>性别</th> <th>年龄</th> </tr>
    <tr> <td>张三</td> <td>男</td> <td>36</td> </tr>
    <tr> <td>李四</td> <td>男</td> <td>24</td> </tr>
    <tr> <td>翠花</td> <td>女</td> <td>18</td> </tr>
</table>

表格属性

实际上HTML不常用, 之后通过CSS设置.

属性名	属性值	说明
align	left center right	规定表格相对周围元素对齐方式
border	数字或""	规定表格是否拥有边框及边框宽度, 默认为"", 表示无边框
cellpadding	像素值	规定单元格边缘与内容之间的空白, 默认为1像素
cellspacing	像素值	规定单元格之间的空白, 默认为2像素
width	像素值	规定表格的宽度

<table align="center" border="2" cellpadding="5" cellspacing="3" width="200">
    <tr> <th>姓名</th> <th>性别</th> <th>年龄</th> </tr>
    <tr> <td>张三</td> <td>男</td> <td>36</td> </tr>
    <tr> <td>李四</td> <td>男</td> <td>24</td> </tr>
    <tr> <td>翠花</td> <td>女</td> <td>18</td> </tr>
</table>

效果:
表格效果

表格结构标签

<thead></thead>表示表头区域, <tbody></tbody>表示表格主题区域. 这样写可以更好分清表格结构.
作用: 增强表格语义, 便于阅读.

<table align="center" border="2" cellpadding="5" cellspacing="3" width="200">
    <thead>
        <tr> <th>姓名</th> <th>性别</th> <th>年龄</th> </tr>
    </thead>
    <tbody>
        <tr> <td>张三</td> <td>男</td> <td>36</td> </tr>
        <tr> <td>李四</td> <td>男</td> <td>24</td> </tr>
        <tr> <td>翠花</td> <td>女</td> <td>18</td> </tr>
    </tbody>
</table>
<!-- 效果同上例,但是源码阅读更方便-->

合并单元格

跨行合并: rowspan="合并单元格个数", 在最上侧单元格写合并标记.
跨列合并: colspan="合并单元格个数", 在最左侧单元格写合并标记.

<table align="center" border="2" cellpadding="5" cellspacing="3" width="500">
    <thead>
        <tr> <th colspan="5">信息登记表</th> </tr>
    </thead>
    <tbody>
        <tr> 
            <td>姓名</td> <td>&emsp;&emsp;</td> 
            <td>性别</td> <td>&emsp;</td> 
            <td rowspan="3" align="center">照片</td> 
        </tr>
        <tr> <td>证件号</td> <td colspan="3"> </td> </tr>
        <tr> <td>住址</td> <td colspan="3"></td> </tr>
    </tbody>
</table>

列表标签

表格可以用于显示数据,列表则可以用来做整齐有序布局.
列表的种类: 无序列表, 有序列表, 自定义列表.

无序列表

<ul></ul>标签表示无序列表, 一般会以项目符号呈现列表项, 而列表项用<li></li>标签定义.
语法格式如下:

<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    <li>列表项4</li>
</ul>

无序列表各个列表项之间没有顺序之分, 是并列关系.
<ul></ul>中只能嵌套<li></li>, 但<li></li>之间可以容纳所有元素.
无序列表会带有自己的样式属性, 但在实际使用时, 一般使用CSS设置.

有序列表

有序列表即为有排列顺序的列表, 其各个列表项按照一定的顺序排列.
<ol></ol>标签表示有序列表, 一般会以项目符号呈现列表项, 而列表项用<li></li>标签.

自定义列表

自定义列表常用于对术语或名词进行解释和描述, 定义列表的列表项前没有任何项目符号.
如下图红框即为自定义列表

<dl></dl>标签用于定义描述列表,该标签会与<dt></dt>(定义项目/名字)和<dd></dd>(描述每一个项目/名字) 一起使用.

<dl>
    <dt>关于华为云</dt>
    <dd><a href="https://www.huaweicloud.com/about/index.html" target="_blank">了解华为云</a> </dd>
    <dd><a href="https://www.huaweicloud.com/cases.html" target="_blank">客户案例</a> </dd>
    <dd><a href="https://www.huaweicloud.com/securecenter/overallsafety.html" target="_blank">信任中心</a> </dd>
    <dd><a href="https://www.huaweicloud.com/declaration/sa_cua_computing.html" target="_blank">法律协议</a> </dd>
</dl>

表单标签

表单目的: 与用户交互, 收集用户信息.
表单由表单域, 表单控件(表单元素), 提示信息 组成

表单域

表单域是一个包含表单元素的区域.
<form>标签用于定义表单域, 以实现用户信息的手机和传递, 它会将它范围内的表单元素信息交给服务器.

<form action="url地址" method="提交方式" name="表单域名称">
    <!-- 各种表单元素控件 -->
</form>

常用属性

属性	属性值	作用
action	url地址	用于指定接收并处理表单数据的服务器程序的url地址
method	get/post	用于设置表单数据的提交方式, 其取值为get或post
name	名称	用于指定表单名称, 以区分同一界面的多个表单域

表单元素

输入表单元素
单标签 <input>用于收集用户信息.

<input type="属性值" name="表单元素名字"/>

type属性值	说明
button	定义可点击按钮
text	定义单行输入字段
password	定义密码输入框
submit	定义提交按钮, 点击后将数据发送到服务器
radio	定义单选按钮, 同一项信息的多个单选name需要取同一个名字
resert	定义重置按钮
checkbox	定义复选框按钮

input标签其他属性	属性值	说明
name	自定义	定义input元素的名称
value	自定义	规定input元素的值
checked	checked	规定此input元素首次加载时就被选中
maxlength	正整数	规定输入字段的最大长度

CSS学习

CSS简介

CSS是层叠样式表(Cascading Style Sheets)的简称,也是一种标记语言.
CSS的主要适用场景: 美化网页, 布局页面, 可以用于设置HTML页面中的文本内容(字体, 大小, 对齐方式等), 图片的外形(宽高, 边框样式, 边距等) 以及版面的布局和外观的显示样式.

CSS语法规范

CSS:由选择器和声明组成.

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* p意为定义选择器选中p标签 */
        /* 选择器后面跟的大括号包含的是若干声明, 定义了选择器选择对象的样式 */
        p {
            color: pink;
            font-size: 24px;
        }
    </style>
</head>
<body>
    <p>Hello world!</p>
</body>
</html>

注意:
1.选择器是用于指定CSS样式的HTML标签, 花括号内是该对象设置的具体格式.
2.属性和属性值以"键值对"的样式出现.
3.属性是对指定的对象设置的样式属性, 例如字体大小, 文本颜色等.
4.属性和属性值之间用 : 分开.

CSS基础选择器

选择器的作用: 根据不同的需求吧不同的标签选出来.
选择器分类: 基础选择器. 复合选择器.

基础选择器

基础选择器由单个选择器组成
基础选择器又包括: 标签选择器, 类选择器, id选择器和通配符选择器.

标签选择器

标签选择器(元素选择器)是指用HTML标签名称作为选择器, 按标签名称分类, 为页面中某一类标签指定统一的CSS样式.

标签名 {
	属性名1: 属性值1;
	属性名2: 属性值2; 
	...
}

优点: 方便把所有同类标签设置同一样式.
缺点: 不能差异化设置.

类选择器 (常用)

单独选一个或几个标签设置样式.

/*类名自己定义*/
.类名 {
	属性名1: 属性值1;
	属性名2: 属性值2; 
	...
}
/*在要设置该种样式的标签里加上 class="类名"*/

例子:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       .name {
            color: pink;
            font-size: 24px;
        }
    </style>
</head>
<body>
    <p class="name">Hello world!</p>
</body>
</html>

类选择器用 .来标识,后面加类名.
不要使用纯数字和中文命名.
class属性里可以写多个类名, 中间必须用空格隔开.

id选择器

id选择器可以为标有特定id的HTML元素指定特定的样式,

/*id名自己定义*/
#id名 {
	属性名1: 属性值1;
	属性名2: 属性值2; 
	...
}
/*在要设置该种样式的标签里加上 id="id名"*/

跟类选择器差不多. 但是id只能被调用一次.
id一般用于页面唯一性元素上.

通配符选择器

通配符选择器用*定义, 会选择页面中所有标签.

* {
	属性名1: 属性值1;
	属性名2: 属性值2; 
	...
}

字体属性

CSS Fonts(字体)属性用于定义字体系列, 大小, 和文字样式.

字体系列

font-family属性定义文本的字体系列.

p { font-family: "微软雅黑";}
div { font-family: Arial, "微软雅黑";}
/*后面跟多个字体时,浏览器会依次查询电脑是否有该种字体,如果有的话就用,如果全都没有的话,使用浏览器默认字体*/

字体粗细

font-weight属性定义字体粗细.

属性值	说明
数字	400=normal, 700=bold
normal	文字正常显示
bold	文字加粗显示

文字样式

font-style属性定义文字样式.

属性值	说明
normal	正常显示
italic	斜体

字体复合属性

可以一行设置多个属性,但是顺序不能换.

/*参数顺序必须跟这一行一样*/
font: font-style font-weight font-size/line-height font-family;
/*举个例子:*/
font: italic 700 16px 'Microsoft yahei';

不能更换顺序, 各个属性之间用空格隔开
不需要设置的可以省略(取默认值), 必须保留 font-size和font-family属性.

文本属性

CSS text(文本)属性可以定义文本的外观, 比如文本的颜色, 对齐文本, 装饰文本, 文本缩进, 行间距等.

文本颜色

color属性用于定义文本的颜色.

属性值	举例说明
预定义的颜色值	red, blue, green
十六进制表示	#000000, #ff0000
RGB代码	rgb(255,0,0)或rgb(100%,0%,0%)

对齐文本

text-align属性用于设置水平对齐方式.

属性值	说明
left	左对齐
right	右对齐
center	居中对齐

装饰文本

test-decoration属性规定添加到文本的装饰.

属性值	说明
none	默认值, 无装饰, 可以去掉`<a>`标签链接的下划线
underline	下划线,
overline	上划线
line-through	删除线

文本缩进

text-inndent属性用于指定文本第一行的缩进, 通常是将段落的首行缩进.

属性值	说明
数字px	缩进的像素值
数字em	缩进多少个文字(font_size)大小

行间距

line-height可以设置行间的距离(行高), 可以控制文字行与行之间的距离.

测量行间距可以用QQ截图, 从一行文字的下沿到第二行文字的下沿即为行间距.

JS学习

JavaScript简介

JS是一种运行在客户端(浏览器)的编程语言, 实现人机交互效果.

作用	说明
网页特效	监听用户的一些行为让网页做出相应的反馈
表单验证	针对表单数据的合法性进行判断
数据交互	获取后台数据, 渲染到前端
服务端编程	node.js