我家自动化

这个屌丝很懒，什么也没留下！

热门标签

Web前端学习笔记（1）_web前端笔记

作者：我家自动化 | 2024-04-10 03:18:34

踩

web前端笔记

文章目录

一、第一部分
- 1.1内容一
- - Web前端导入
二、第二部分
- 2.1内容一
- - HTML和CSS的定义
三、第三部分
- 3.1内容一
- - 宇宙第一编译器Vs Code
- 3.2内容二
- - 快捷键的使用
四、第四部分
- 4.1内容一
- - Chrome浏览器
- 4.2内容一
- - 五大浏览器
  - 五大浏览器的介绍
五、第五部分
- 5.1内容一
- - 深入了解网站开发
- 5.2内容二
- - JV与HTML与CSS的关系
第六部分
- 6.1内容一
- - web的三大核心技术
- 6.2内容二
- - 结构,样式,行为
七、第七部分
- 7.1内容一
- - HTML基本结构与属性
- 7.2内容二
- - 创建标签的快捷键
- 7.3内容三
- - HTML常见标签
  - 标签写法
八、第八部分
- 8.1内容一
- - HTML的初始代码
九、第九部分
- 9.1内容一
- - HTML的注释
- 9.2内容二
- - 注释意义
- 9.3内容三
- - 快捷键注释的添加与删除
十、第十部分
- 10.1内容一
- - HTML语义化
- 10.2内容二
- - 屏幕阅读器
十一、第十一部分
- 11.1内容一
- - 标题与段落
- 11.2内容二
- - 个人简介
十二、第十二部分
- 12.1内容一
- - 文本修饰标签
十三、图片标签与图片属性
- 13.1内容一
- - 图片标签
十四、第十四部分
- 14.1内容一
- - 引入文件的地址路径
十五、第十五部分
- 15.1内容一
- - 跳转链接
- 15.2内容二
- - 跳转链接的练习
十六、第十六部分
- 16.1内容一
- - 跳转锚点（本页内跳转）
十七、第十七部分
- 17.1内容一
- - 特殊笔记
十八、第十八部分
- 18.1内容二
- - 无序列表
- 18.2内容二
- - 小练习
十九、第十九部分
- 19.1内容一
- - 有序列表
- 19.2内容二
- - 小练习
二十、第二十部分
- 20.1内容二
- - 定义列表
- 20.2内容二
- - 创建定义列表

提示：以下是本篇文章正文内容，下面案例可供参考

一、第一部分

1.1内容一

Web前端导入

1.拨云见日
基础入门：HTML、CSS
切图流程：传统切图、智能切图、公司里比较流行的一些切图方式等
实战阶段：PC企业站布局、PC游戏站布局

2.溯本求源
扩展知识点（细致、深入、一些新的内容）：扩展HTML、扩展CSS，
HTML5新语法（在浏览器中十分成熟，情况不错）CSS3新语法、兼容与hack（不同浏览器之间的一些兼容问题和一些解决方案）

3.风生水起
现在流行的布局：弹性布局、网格布局
移动端布局：流式布局、rem布局等
响应式布局 (如何用一套代码适应多种不同的设备）Bookstrap（基于响应式布局的框架，利用它快速搭建网页）

4.巧夺天工
工程方面：预编译CSS（Less和Css）postcss、CSS架构、高级功能、CSS与JS交互

二、第二部分

2.1内容一

HTML和CSS的定义

HTML：中文称为超文本标记语言，从语义上来说，它只是一种是一种标识性的语言，并不是一种编程语言。
CSS：Cascading Style Sheets，中文称为：层叠样式表或者级联样式表。它是一种负责页面样式的语言，也就是来修饰HTML（超文本标记语言）的。简单的来说也就是设定网页是以什么样子来表现的。HTML和它的区别在于，HTML只是用来编写网页的结构和内容，而它可以决定网页的表现样式。

三、第三部分

3.1内容一

宇宙第一编译器Vs Code

主要功能
该编辑器也集成了所有一款现代编辑器所应该具备的特性，包括语法高亮（syntax high lighting），可定制的热键绑定（customizable keyboard bindings），括号匹配（bracket matching）以及代码片段收集（snippets）。Somasegar也告诉笔者这款编辑器也拥有对Git的开箱即用的支持。
Visual Studio Code 提供了丰富的快捷键，用户可通过快捷键[Ctrl]+[K]+[S]（按住Ctrl键不放，再按字母K键和S键）调出快捷键面板，查看全部的快捷键定义。也可在面板中双击任一快捷键，为某项功能指定新的快捷键。一些预定义的常用快捷键包括：格式化文档（整理当前视图中的全部代码），[Shift]+[Alt]+[F]；格式化选定内容（整理当前视图中被选定部分代码），[Ctrl]+[K]+[F]；放大视图，[Ctrl]+[Shift]+[=]；缩小视图，[Ctrl]+[Shift]+[-]；打开新的外部终端（打开新的命令行提示符）：[Ctrl]+[Shift]+[C]。
该编辑器支持多种语言和文件格式的编写，截止2019年9月，已经支持了如下37种语言或文件
相关事件：
Visual Studio Code及其商标均为微软公司所有，并在《微软软件许可协议》下发布，为专有软件。而vscode(Code-OSS)为MIT许可证下的开源软件。前者在后者基础上经一定自定义构建操作得来。

3.2内容二

快捷键的使用

ctrl+s:保存
ctrl+a:全选
ctrl+x·ctrl+c·ctrl+v:剪切·复制·黏贴
ctrl+z·ctrl+y:撤销·前进
shift+end:从头选中一行
shift+home:从尾部选中一行
shift+alt+↓:快速复制一行
alt+↑或↓：快速移动一行
tab:向后缩进
tab+shift:向前缩进
多光标：alt+鼠标左键
ctrl+d:选择相同元素的下一行

四、第四部分

4.1内容一

Chrome浏览器

Google浏览器，Google Chrome，中国大陆官方译名：酷容浏览器（原网上叫做谷歌浏览器，官方给谷歌浏览器定名为酷容浏览器），台湾官方译名：Google Chrome，香港官方译名：Google浏览器，是一个由Google（谷歌）公司开发的开放原始码网页浏览器。该浏览器是基于其他开放原始码软件所撰写，包括WebKit和Mozilla，目标是提升稳定性、速度和安全性，并创造出简单且有效率的使用者界面。

4.2内容一

五大浏览器

什么是五大主流浏览器？
1.IE浏览器，2.Chrome浏览（谷歌浏览器），3.FirFox（火狐浏览器）4.Safari浏览器（苹果浏览器），5.Opera浏览器（欧朋浏览器）。

五大浏览器的介绍

IE浏览器：它是微软公司为对抗网景公司于1994年夏天开始研发的一款浏览器，但微软并没有时间从零开始，而是微软和Spyglass合作，于是IE从早期一款商业性的专利网页浏览器Spyglass Mosaic派生出来的，最好的版本是IE6。目前微软已经放弃IE品牌，在Windows10上用Microsoft Edge取代了IE。并且停止对IE11以前版本的技术支持。
Chrome浏览器：是一款由Google公司开发的网页浏览器，最开始Chrome采用webkit作为浏览器内核，直到2013年，Google宣布不再使用苹果的webkit内核，开始使用webkit的分支内核Blink。它的特点是简洁、快速。它有IOS,Android，Windows、Ponne等多个系统的浏览器。
FirFox浏览器：它由Mozilla基金会与数百个志愿者所开发的，原名“Phoenix”（凤凰），之后改名“Mozilla Firebird”（火鸟）再改为现在的名字Firefox。目前最新的正式版本为Firefox 53.0.2。Firefox采用Gecko作为内核。Gecko是一个开源的项目，代码完全公开，因此受到很多人的青睐。
火狐浏览器是可以自由定制的，一般电脑技术爱好者都喜欢用。它的插件又是世界上最丰富的，这点得到了网友公认。下载来的火狐一般是纯净版，功能比较少，要根据自己的喜好进行定制！最后，Firefox的问世加快了第二次浏览器大战的开始。也自此打破了IE浏览器从98年网景被收购后独步浏览器市场的局面。
Safari浏览器：是苹果计算机的最新操作系统Mac OS X中的浏览器，使用了KDE的KHTML作为浏览器的运算核心。第二次浏览器大战也是从苹果公司发布Safari浏览器开始的，2003年苹果公司在手机上发布Safari浏览器，苹果公司利用其得天独厚的手机市场份额使Safari浏览器成为世界主流浏览器，Saf

五、第五部分

5.1内容一

深入了解网站开发

UI设计师：设计稿
web前端开发工程师（H5开发）
设计稿–>代码
数据库里的数据–>显示到页面
HTML:结构
CSS：样式
web后端开发工程师

5.2内容二

JV与HTML与CSS的关系

HTML用于控制网页的结构，
CSS用于控制网页的外观，
JavaScript控制的是网页的

第六部分

6.1内容一

web的三大核心技术

HTML:结构
CSS:样式
Javescript:行为

6.2内容二

结构,样式,行为

<style></style>
<div></div>
<script></script>
1
2
3

七、第七部分

7.1内容一

HTML基本结构与属性

超文本：文本内容+非文本内容（图片、视频、音频等）
标记：<单词>
单标签：<header>
双标签：<header></header>
语言：编程语言

7.2内容二

创建标签的快捷键

单词+tab–><单词>

7.3内容三

HTML常见标签

标签写法

<标签属性=“值” 属性2=“值”>

八、第八部分

8.1内容一

HTML的初始代码

!+tab创建html原始代码

<!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>
1
2
3
4
5
6
7
8
9
10
11
12

九、第九部分

9.1内容一

HTML的注释

<!--注释的内容-->
1

9.2内容二

注释意义

1.把暂时不用的代码注释起来方便使用
2.对开发人员进行显示

9.3内容三

快捷键注释的添加与删除

1.ctrl+/
2.shift+alt+a
1
2

十、第十部分

10.1内容一

HTML语义化

1.在没有CSS的情况下，页面也能呈现出很好的内容结构。
2.有利于SEO，让搜索引擎爬虫更好的理解网页。
3.方便其他设备解析(如屏幕阅读器、盲人阅读器等)。
4.便于团队开发与维护。

10.2内容二

屏幕阅读器

屏幕阅读器（将H50vo.12.4拖拽网页书签栏，显示网页标题）

十一、第十一部分

11.1内容一

标题与段落

h标题–>双标签：<h1></h1>......<h6></h6>
(在一个网站中，只有一个h1标签,body中标题)
段落–>双标签：<p></p>

11.2内容二

个人简介

<!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>
    <h1>我的简介</h1>
    <h2>个人技能(一）</h2>
    <p> 
熟练html语言,css技术开发；
熟练使用 Ajax,JavaScript,JQuery，easyui等；
熟练使用Javaee主要技术模块(Jsp/Servlet/JavaBean/jdbc等)技术的软件开发；
了解Activiti工作流；
熟悉Spring、SpringMVC、MyBatis等开源框架以及SSM框架的整合开发；
了解PL/SQL，存储过程；
熟练操作MySQL、Oracle数据库，熟悉SQL语句；
熟练使用Eclipse、MyEclipse等开发工具；
熟悉掌握Java编程思想，具有良好的编码设计规范习惯；
    <h2>个人技能（二）</h2>
    <p>
熟练使用PHP脚本语言，LAMP架构，具备后台开发能力熟练使用Laravel、ThinkPHP
等框架，能再此基础上进行开发熟悉掌握MySQL相关操作熟悉掌握Linux系统进行基
本的操作和配置掌握HTML+CSS+JavaScript+Ajax技术设计前台页面了解Git等版本
控制器的基本命令和使用。
        </p>
</body>
</html>
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
26
27
28
29
30

十二、第十二部分

12.1内容一

文本修饰标签

强调–>双标签：<strong></strong>
加粗：<em></em>
下标：<sub><sub>
上标：<sup></sup>
a<sup>2</sup>+b<sup>2</sup>=c<sup></sup> H<sub>2</sub>0
删除：<del></del>
插入：<ins></sub>

<p>促销：原价<del>300</del>,现价<ins>100</ins>
</p>
<p>北京著名的高档百货店——<em>赛特购物中心</em>即将关闭。
<strong>如果手上有购物卡尽快到店里消费</strong>
</p>
1
2
3
4
5

十三、图片标签与图片属性

13.1内容一

图片标签

img–>单标签
src:引入图片的地址
alt:当图片出现问题，可以显示一段友好的提示文字
title:提示信息
width、height:图片大小

<img src=""C:\Users\86198\Desktop\屏幕截图(6).png"">
1

十四、第十四部分

14.1内容一

引入文件的地址路径

相对路径
.在路径中表示当前路径
…在路径中表示上一级路径
绝对路径

十五、第十五部分

15.1内容一

跳转链接

a–>双标签
href属性：链接的地址
target属性:可以改变链接打开方式。默认情况下：在当前页面打开
-self 新窗口打开-blank

给图片附上链接，代码如下（在当前页面）：

<a href="http://www.baidu.com">访问百度</a>
        <a href="http://www.qfedu.com"></a>
        <img src="./img/animal/dog.jpg" alt="">
1
2
3

<a href="http://www.baidu.com"target="_blank">访问百度</a>
1

base–>单标签：作用就是改变链接的默认行为（都可在新页面内打开）

<title>Document</title>
    <base target="_blank">
</head>
<body>
    <a href="http://www.baidu.com">访问百度</a>
    <a href="http://www.baidu.com">访问百度</a>
    <a href="http://www.baidu.com">访问百度</a>
</body>
</html>
1
2
3
4
5
6
7
8
9

15.2内容二

跳转链接的练习

分别建立一个首页、列表页、详情页
并让他们之间实现相互跳转
每个页面至少包含一张图片
图片在images文件内
列表和详情在html文件夹内，首页在根目录下
在这里插入图片描述
代码如下：
链接的综合测试
html
1.list.html
2.detail.html
images
1.png
2.png
3.png
index.html

<a href="./html/list.html">列表页</a>
    <img src="./images/t011a1797c8886af308.jpg" alt="">
 
1
2
3

 <a href="./detail.html">详情页</a>
    <img src="../images/v2-3cac2e5b2a78d25aea7a631cee7306ad
    _r.jpg" alt="">
1
2
3

<a href="../index.html">返回首页</a>
    <img src="../images/屏幕截图(2).png" alt="">
1
2

十六、第十六部分

16.1内容一

跳转锚点（本页内跳转）

在这里插入图片描述
#号
id属性

<a href="#html">HTML</a>
    <a href="#css">CSS</a>
    <a href="#Javascript">Javascript</a>
    <h2  id="html"> HTML超文本标记语言</h2>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <h2 id="css">CSS层叠样式表</h2>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <h2  id="Javascript">JS脚本</h2>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
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
26

#号
name属性

<a href="#html">HTML</a>
    <a href="#css">CSS</a>
    <a href="#Javascript">Javascript</a>

    <a name="html"></a>
    <h2> HTML超文本标记语言</h2>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <a name="css"></a>
    <h2>CSS层叠样式表</h2>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <a name="Javascript"></a>
    <h2>JS脚本</h2>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
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
26
27
28
29
30

十七、第十七部分

17.1内容一

特殊笔记

在这里插入图片描述
&+字符
（避免冲突，加入多个空格）

十八、第十八部分

18.1内容二

无序列表

<ul><li>列表的最外层容器、列表项

type属性：改变前面标记的样式

值	描述
dise	默认值，实心圆
circle	空心圆
square	实心方块

18.2内容二

小练习

<ul>
        <li><a href="#"><strong>啦啦操</strong></a></li>
        <li><a href="#">啦啦操</a></li>
        <li><a href="#">啦啦操</a></li>
        <li><a href="#">奔驰</a></li>
    </ul>
1
2
3
4
5
6

十九、第十九部分

19.1内容一

有序列表

<ol><li>
1

值	描述
1	默认值，数字有序列表（1、2、3、4）
a	按字母顺序排列的有序列表，小写（a、b、c、d）
A	按字母顺序排列有序列表，大写（A、B、C、D）
i	罗马字母，小写（i,ii,iii,iv）
I	罗马字母，大写（I,II,III,IV）

19.2内容二

小练习

 <ol>
    <li><a href="#">都说</a></li>
    <li><a href="#">我的啦啦操</a></li>
    <li><a href="#">夜空中最亮的星</a></li>
   </o<li>

1
2
3
4
5
6

二十、第二十部分

20.1内容二

定义列表

<dl>:定义列表
<dt>:定义专业术语
<dd>：对名词进行解释和描述
1
2
3

20.2内容二

创建定义列表

 <dl>
        <dt>html</dt>
        <dd>超文本标记语言</dd>
        <dt>css</dt>
        <dd>层叠样式表</dd>
        <dt>Javascript</dt>
        <dd>网页脚本语言</dd>
    </dl>
1
2
3
4
5
6
7
8

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家自动化/article/detail/396327