web前端开发入门笔记（更新中）

桃扇骨 2023-07-23 14:59 162阅读 0赞

## 前言 ##

假期曾上过6节HTML与微信小程序开发基础课，对前端开发有所了解，今天上完大英就开始看了下课程，出乎意料的易于接受，也许是之前打下的基础，但还是系统地学习比较好，毕竟作为一门知识。

此外，有兴趣的小伙伴也可以看一下不久前发布的总结笔记：  
[c++入门学习笔记（详细到泪目）][c]  
[c语言难点综合][c 1]  
[Linux学习笔记][Linux]  
还有尚未整理完成的python笔记，这些都是耗尽本耗子王心血的积累笔记，耗子王名言：如果命运不公，为何不与它斗争到底？

## 开篇 ##

HTML使用了各种标签，来改变屏幕中的内容与排版，例如：

1.  <!doctype html> 声明是HTML格式的超文本文件。
2.  head 是头部，是双标签（有结束标签），里面存放头部相关的代码，例如编码类型，标题等。要在后面用/head结束。
3.  body是身体部分，里面存放的是主体执行的代码，主要功能都集中在这里。要在后面用/body结束。
4.  meta charset="utf-8"表示转为utf-8格式，不转码有时会出现乱码现象。

## 令人崇拜的hello world ##

示例代码：

<!doctype html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title> 耗子的专属网页</title>
    </head>
    <body>
    <h1>我的第一个网页</h1>
    <p>hello world/p>
    </body>
    </html>

## 插入图片与超链接 ##

插入图片使用的是img标签(没有结束标签，为空标签)。超链接则是用a这个双标签。标签里面还包含有各种属性，属性值用引号包起来。不同属性中间用空格隔开。例如:

1.  arc可以以一个文本来命名图片。
2.  而src则可以添加图片路径或网址，以显示图片。
3.  width="125px height="125px"长、宽为125像素。
4.  href后面接链接网址。
5.  target=“blank”打开新窗口
6.  h标签是是标题级别的标签，可以分为6级。

示例代码：

<!doctype html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title> 耗子的专属网页</title>
    </head>
    <body>
    <h1>我的第一个网页</h1>
    <img alt="风景图" src="E:\大学\学习\其他\工具包\fengjing.jpg" width="125px" height="125px">
    <a href="https://editor.csdn.net/md/?articleId=105383500" target="blank">我爱看耗子的资料</a>
    <p>hello world</p>
    </body>
    </html>

## meta标签的妙用 ##

meta空标签的使用，可以更为清晰地向浏览者展示本网页的关键词，让浏览者明白网页的主要功能。

1.  name="keywords"属性用来显示关键词。
2.  name="description"属性用来显示内容描述。
3.  name="author"属性用来显示作者。
4.  http-equiv="refresh"属性用来刷新网页，content后面的值是时间+网址。

即是在头部插入这么一段代码：

## 特立独行的style ##

style标签可以对内容的格式（style）进行更改，如颜色等。  
例如：在头部加入

就可以更换h1标签、p标签、a标签中内容的格式。  
如果想要更换背景图，可以使用一下代码实现：

body{ 
      background-image: url("E:/大学/学习/其他/工具包/fengjing.jpg")
     }

如果需要将文本放在中心，可以使用一下代码实现

text-align: center;

如果需要行首缩进60%，可以使用一下代码实现

margin-left: 60%;

如果需要行首缩进32像素，改变字体大小、行高，可以使用一下代码实现

text-indent: 32px;
    font-size: 16px;
    line-height: 32px;

如果想将图片改为正中央显示，可以使用以下代码实现

position: absolute;
    left: 50%;
    margin-left: -181px;

如果想要改变在打印时的格式，则需要

若是要随页面大小而改变背景图，则需

## 来个css的串烧 ##

css也能够改变格式，但需要另外在同级目录创一个css格式的文件，在里面放入相关的格式代码，与HTML的一样。然后再在HTML文件的头部加上:

其中print.css、style.css都是创建的css文件。效果与上面一致。  
![在这里插入图片描述][20200408204336608.png]  
如果想为自己的网页添加一个很卡哇伊的小猪佩奇的小logo，可以运行这段代码

是不是很神奇？  
我们还可以使用base标签，进行批量对a这个超链接标签进行处理。

<head>
    <base href="http://baidu.com" target="_blank">
    </head>
    <body>
    <a href="http://baidu.com">第一个例子</a>
    <a href="http://taobao.com">第二个例子</a>
    </body>

点击便可以跳转到不同的网页或者目录。

## 路径那点事儿 ##

单个标点（.）表示当前目录。
    2个标点（..）表示父目录。

## Java的小舅Javascript ##

JavaScript是个很好的web插件，能够给前端开发带来不少强大的功能。js，css，html三剑客称雄前端不是没有原因的。  
先来用一个js文件试水。  
第一步先在js文件里写入内容：

document.write("我tmd爱你");

然后用src属性调用js文件。

## 高级程序猿的自我养成 ##

代码的规范，缩进是为了美观，提高可读性，方便修改。而注释的作用是易于自己与他人快速了解每个代码模块的作用。

1. HTML的注释是使用<--! 内容-->，若是多行，则用“<--! ”开头，在末尾加上“-->”即可。
    2. css的则是使用/*内容*/来注释。
    3. JavaScript的则与c语言的一样，是//（单行）与/**/（多行）。

## 行内元素与块级元素 ##

块级元素总是在新的行上开始，并尽可能地占据本行全部可用的宽度。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjAyMDc4OA_size_16_color_FFFFFF_t_70]  
span元素是一个与p元素对应的能够组合文档行内元素。例如：可以在一行内用它的标签对包起一部分文本，再用style进行格式转换。  
br元素是一个简易的行内换行符。

1. 行内元素只能包括数据和其他行内元素。
    2. 而块级元素能包含行内元素与其他块级元素。
    3. 相比之下，块级元素能够创造更为大型的结构。

## 预格式化与字符实体 ##

预格式化就是保留文本在源代码中的格式，使得页面显示的和源代码中的效果完全一致。可以使用pre标签进行表明。

字符实体是由于在显示内容时，浏览器会误把我们的一些特定符号判定而显示出错。可以使用一些特定的编码进行输出，例如＆nbsp;就是换为空格。  
var是变量，kbd是一个一个接收用户输入的变量，samp是一个表示打印出来的变量。

## 引用 ##

对于一些名人名言之类的，需要用到引用，这就需要使用引用了。

1. 使用p这个双标签可以产生双引号包裹的效果。
    2. 使用blockquote元素可以进行大量段落的缩进，以分明段落。
    3. cite元素可以标注为标题。
    4. abbr可以进行简称或缩写，拥有title属性，鼠标放上去可以显示该title。
    5. dnf可以设置为专业术语格式。
    6. addre元素能够对大量段落造成斜体形式。

## 文本的排版处理 ##

对于一些文本的处理，可以使用一下的元素。

1.  b和strong能够加粗文本。
2.  ul可以制作无序列表，li可以制作有序列表。
3.  bod能够制作倒序。
4.  em，i能够制作斜体样式。
5.  del与s可以制作删除线，ins可以制作下划线。
6.  mark荧光笔效果。
7.  sup字符上标效果如平方，sub字符下标如二氧化碳的化学式。
8.  small缩小字体。![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjAyMDc4OA_size_16_color_FFFFFF_t_70 1]

## 表单的处理 ##

通常使用table元素制作表格，th是表头，tr定义表格的行，td数据单元格。表头默认加粗且居中。

1.  添加上表格线，需要加上以下代码：

style table，th，td{ border：1px solid black；}

1.  其中border：1px是粗度为1像素，solid是实线，border-collapse：collapse将原先的两条行线合并。
2.  caption能够设置表格的名称。
3.  padding可以调表格内边距。
4.  如果想要分开对表格格式更改，可以使用，thead，tbody，tfoot进行分割。
5.  td与th有个横跨多少单元格的属性，就是colspan。rowspan则是纵跨。
6.  col内联模式，colgroup标签将其数据表格结合为一组包起来。col span可以选择跨度。

栗子图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjAyMDc4OA_size_16_color_FFFFFF_t_70 2]  
thead之流：![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjAyMDc4OA_size_16_color_FFFFFF_t_70 3] col的玩法：  
![在这里插入图片描述][20200411225741655.png]

## 个人信息框的制作 ##

通常用于在登录或注册时，填写账号用的信息表。

1.  按钮可以使用reset（刷新按钮）、button（普通按钮）、submit。

1.  制作一个文本输入框：

名字<input type="text" name="name"><br>
    密码<input type="password" name="name"><br>

1.  使用form元素调用php发送给服务器，post是发送，get是接收。

1.  autocomplete可以控制浏览器的历史参考，用on与off控制。是form的属性。如果要设置特例，可以先off再在特例申明一次on。  
    ![在这里插入图片描述][20200411234057613.png]
2.  打开新标签页也可以使用之前那个targe，form属性。
3.  value可以设置为默认值。
4.  autofocus自动聚焦。
5.  添加属性disable，可以禁用元素，不能修改。
6.  readonly只读属性。
7.  使用label，可以自动聚焦。label的for属性，显性关联，能够和后面的id属性关联。  
    ![在这里插入图片描述][20200411234219176.png]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjAyMDc4OA_size_16_color_FFFFFF_t_70 4]
8.  fieldset标签能够分成多个区域。legend是给fieldset当标题的。
9.  select标签加上option标签，可以制作单选项。
10. optgroup又能够对单选进行分组，命名用label属性。
11. input中typle属性带time后显示时间，datetime-local是本地时间。
12. readonly只读属性。
13. 单选项制作可以使用radio标签（圆点式），如：

1.  range数值滚动条，max，min，step属性设置。
2.  直接在input元素里面使用type属性，选择为color，可以制作调色盘。
3.  input元素type属性选择image，src对应相关图片路径，可以制作图片按钮。
4.  hidden属性隐藏按键。
5.  input元素使用type的file可以上传文件，如需要规定文件大小，可以使用：

<input type="hiden" name="MAX_FILE_SIZE"value="1024"

1.  number属性，可以制作数值选择器，max，min，step属性设置。
2.  基本联系方式，使用tel、url、email属性。更为准确的约束是使用正则表达式，详细讲解会另开博文，敬请关注。
3.  input中request属性保证用户必须填写完成才能提交。
4.  size属性可以改变填写表格的大小。
5.  maxlength属性是最大容纳字符个数。
6.  textarea属性可以制作一个可以拖拽的文本框，rows和cols属性可以调节其大小。
7.  div是曾经使用的旧技术，可以划分为多个分区。
8.  output元素制作计算器  
    ![在这里插入图片描述][20200412100806924.png]
9.  map与area元素，利用映射，将网络图片进行粘接。  
    ![在这里插入图片描述][20200412101248833.png]
10. picture元素的source属性，可以制作由动态拉长缩短网页而改变的图片。其中srcset属性是连接图片的，media属性可以设置其最小限制（min-width：1024px），可以保存一个底片，在限制条件下不匹配的时候显示。
11. 插入视频，可以使用video元素，src进行引用，width与height属性规定大小。中间加入报错提示语。加入contorls autoplay muted，可以加入播放控件。poster属性可以制作视频封面。
12. iframe元素可以嵌入网页，src进行引用，width与height属性规定大小。例如可以嵌入百度地图的定位。
13. progress元素，可以制作进度条。有max，value属性。

## 抠门的魔泥 ##

由于大多数人没有购买服务器的需求，所以可以考虑使用xampp这个软件作为模拟服务器以供学习使用。

## 更为高级的东西–css ##

HTML与css的结合，可以制作出很多漂亮的画面。结合方式有三种：内联样式、内联样式表、外联样式表，在使用多种样式时，按照的执行先后顺序也是这个顺序。下面是三种的示例代码。（按上述顺序）  
![在这里插入图片描述][20200412115050932.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjAyMDc4OA_size_16_color_FFFFFF_t_70 5]  
![在这里插入图片描述][20200412115353920.png]  
以上便是代码示例。（来源于小甲鱼老师的代码）

## css选择器们 ##

css的选择器就像老太婆的裹脚布，又长又难理，可分为：基本选择器、复合选择器、伪类选择器、伪元素选择器与属性选择器。

基础选择器：

1.  通用选择器带的符号是星号，能够匹配所有的元素。
2.  元素选择器则是对body之类的元素进行匹配。
3.  类选择器，采用全局属性HTML中的class，在名字前加一个点号代表。可以在html中加入class属性（带属性名），然后再用css的类选择器。
4.  id选择器，使用的符号是\#，其选定的值必须是唯一的。

交集选择器：

格式为元素选择器.类选择器或者元素选择器#id选择器

并集选择器：

格式为：选择器1，选择器2，选择器3...共同部分一起添加

后代选择器：

格式为：选择器1  选择器2  选择器3...，依次进行

子元素选择器：

格式为：选择器1>选择器2>选择器3...，只作用于下一级

相邻兄弟选择器:

格式为：选择器1+选择器2+选择器3...，只作用于相邻的

通用兄弟选择器:

格式为：选择器1~选择器2~选择器3...，相邻的都是

*lorem ipsum具有乱述假文的作用，能够产生自动添加乱文效果。*

：：first-line选择器

对块级元素第一行起作用，还能自动随着窗口缩进，始终保持在第一行的位置。
    对行内元素不能约束。

：：first-letter选择器

对块级元素第一个元素起作用。

a::before以及a::after选择器

可以对a元素前后添加。

：：setection选择器

右键拉动鼠标可以有标红处理效果。

如图所示，对链接进行各类样式处理，其顺序按照“love&&hate”即是“l、v、h、a”的顺序。

![在这里插入图片描述][20200507195140850.png]  
：active选择器

鼠标时，点击都会发生改变。

input\#boy：focus（boy是id）这类的可以在输入框输入时变色。代码实况如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjAyMDc4OA_size_16_color_FFFFFF_t_70 6]  
：enable选择器与：disable选择器可用与禁用，样式有所不同。

：check选择器的话，能够在框中单选，并对选中的东西进行选择，以及改变样式。

：require是必填项，outline是选填项的。

：default是对选择器的样式选择。

input：valid与input：invalid是对合法与非法奏效的，例如邮箱方面的，需要有@符号。

尾类选择器，input：in-range和input：out-of-range，超出与在范围内的样式显示。

只读属性使用input：read-only，读写是input：read-write。input：-moz-read-only则考虑到了浏览器兼容问题。

temple就是显示空白区域。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjAyMDc4OA_size_16_color_FFFFFF_t_70 7]  
如上图所示：  
nth-child（3）是指改变第3个的样式，nth-of-type（3）则是正数第3个，nth-last-of-type（3）则是倒数第3个。

targe可以对超链接进行修饰，lang（en）是针对中英文语系的，not（）是条件之外的。

## 正则表达式 ##

别的不说，正则表达式在各个区域展现的魅力在编程界有目共睹，给广大程序员处理数据带来了福音，在web这里同样有异曲同工之妙。  
例如：  
![在这里插入图片描述][20200507201433134.png]  
其中，=是对“Wood”条件进行筛选，具备有此条件的框架都会受到影响，而美元符$则是否的意思，就是不包括有此“Wood”条件的class类。li在中括号外面，是增加了“li”这一约束条件。

## 一些乱七八糟的东西 ##

在设置背景图片方面，可以使用如下代码

body{ 
    	background-image:url("cover.png"),url("bg.jpg");
    /*为body元素指定背景图案 */
    	background-repeat:no-repeat;
    /*设置为不重复*/
    	padding:80px 0px 50px 360px;
    /*设置边框*/
    }

background-image:url("cover.png");
    /*为body元素指定背景图案 */
    	background-repeat:no-repeat;
    /*设置为不重复*/
    	background-size:50%;
    /*设置边框*/
    	background-attachment:scroll;
    /*设置为滚动条*/

边框的各种样式设置图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjAyMDc4OA_size_16_color_FFFFFF_t_70 8]  
可以这样设置：

p{ 
    	border-style:solid;
    	border-width:30px;
    	border-color:Lime;
    	font-size:45px;
    }

也可以这样，效果一致。

p{ 
    	border-style:dotted solid double;
    	/* 设置为双边*/
    }

[c]: https://editor.csdn.net/md/?articleId=105053441
[c 1]: https://editor.csdn.net/md/?articleId=105065459
[Linux]: https://editor.csdn.net/md/?articleId=105065691
[20200408204336608.png]: /images/20230528/46d834978da24e10a3779b706fdbf0f0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjAyMDc4OA_size_16_color_FFFFFF_t_70]: /images/20230528/6403ccb74158405cb90bf2e4c44963d7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjAyMDc4OA_size_16_color_FFFFFF_t_70 1]: /images/20230528/9988b3d5f43e4423bc212ea572afa211.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjAyMDc4OA_size_16_color_FFFFFF_t_70 2]: /images/20230528/752cb746e8704b7d99eb30ca3015c4b7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjAyMDc4OA_size_16_color_FFFFFF_t_70 3]: /images/20230528/03e0d4ca66a44c6abf4a21f82b4afadc.png
[20200411225741655.png]: /images/20230528/9d058b43e2f646f692c9ccaba338a0d6.png
[20200411234057613.png]: /images/20230528/daa788b48f194d30bb9197440c171209.png
[20200411234219176.png]: /images/20230528/021768c2b0c44dff9daf64b22d8e234e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjAyMDc4OA_size_16_color_FFFFFF_t_70 4]: /images/20230528/5bde174f0b5c449a963dc6b4ffaba867.png
[20200412100806924.png]: /images/20230528/a62616661d7741a1ae7ab26f98c6abac.png
[20200412101248833.png]: /images/20230528/31df05c5ce614ba4a6611e3c7bd0e214.png
[20200412115050932.png]: /images/20230528/37c16e437e9f4d6092e2e183a3941538.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjAyMDc4OA_size_16_color_FFFFFF_t_70 5]: /images/20230528/9397f73614784340abf490df4469e413.png
[20200412115353920.png]: /images/20230528/22055f15cb024d18860c27cf0450a8f6.png
[20200507195140850.png]: /images/20230528/b13805092eb8422eaa6b4754f03540fe.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjAyMDc4OA_size_16_color_FFFFFF_t_70 6]: /images/20230528/72cf2d409c1d4b7e816c478f5b2254a8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjAyMDc4OA_size_16_color_FFFFFF_t_70 7]: /images/20230528/ce86c427db7e4dd1816f1444e761d46e.png
[20200507201433134.png]: /images/20230528/b1ed4ecd46064ee48de746081aa1770a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjAyMDc4OA_size_16_color_FFFFFF_t_70 8]: /images/20230528/28c8bc09bf30443c91989f9c8e75bcb9.png