Web前端学习win11

VIP文章 i不加糖ba

已于 2022-10-23 10:32:33 修改

阅读量913

点赞数 2

文章标签：前端学习 css

于 2022-10-20 19:52:53 首次发布

本文链接：https://blog.csdn.net/bujiatangba/article/details/127342331

版权

Web前端学习win11

一、第一部分

1.1什么是HTML、CSS

介绍HTML、CSS

HTML、CSS是制作网站的两种编程语言，一般配合使用，是网站开发的基础语言

补充：HTML的英文全称是 Hyper Text Markup Language，即超文本标记语言。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台。使用HTML，将所需要表达的信息按某种规则写成HTML文件，通过标记式的指令(Tag)，将影像、声音、图片、文字动画、影视等内容显示出来。，并将这些HTML文件“翻译”成可以识别的信息，即我们所见到的网页。
CSS:层叠样式表,是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

网站是所写代码经过浏览器解析之后的效果
（在某一网页右击选择“查看页面源代码”便可查看该网页的源代码）
网站由很多网页构成,一个网页为一个“.html文件”
如何写一个"html"文件
简单的：记事本：在指定目录下新建一个文本文档
将后缀“.txt”改为”“.html”
（若看不到扩展名可在上方查看中的显示中点击文件扩展名后重命名）

用记事本打开刚才的".html"文件进行编辑。
在这里插入图片描述
再用浏览器将其打开就可以显示自己刚才编辑的内容了。

1.2VS code

记事本编写效率低，容易出问题，所以应采用代码编辑器因此我们使用VS code代码编辑器。了解VScode的基本应用。

介绍：全称为Visual Studio Code，来自微软，是一款开源（免费）的轻量代码编辑器。
安装插件
语言包：Chinese:将界面中文字变为中文
open in browser,和view in browser:可直接在浏览器中打开网页。
编辑器的基本使用
保存：ctrl+s
全选：ctrl+a
剪切：ctrl+x
复制：ctrl+c
粘贴：ctrl+v
撤销：ctrl+z
前进：ctrl+y
从头选中一行：shift+end
从后选中一行：shift+home
向后缩进：tab
向前缩进：tab+shift

在这里插入图片描述
多光标：alt+鼠标左键
选择相同元素的下一个：ctrl+d
搜索栏：快速搜索到所有所搜内容

创建文件、文件夹、重命名、删除
设置：文件->首选项->设置（大小，是否换行 word wrap)

1.3深入了解网站开发

开发人员：
UI设计师：设计网页，制作设计稿

web前端开发工程师（H5开发）：将设计稿写成代码，数据里的数据显示到页面，HTML+CSS

web后端开发工程师：处理数据

前端核心技术
HTML：结构
CSS:样式（美化）
JavaScript:与用户的交互行为
补充：JavaScript是用来做交互的，是一种脚本语言，即可以运行在客户端也能运行在服务器端。JavaScript的解释器就是JS引擎，JS引擎是浏览器的一部分。而JavaScript主要是用来扩展文档交互能力的，使静态的HTML具有一定的交互行为（比如表单提交、动画特效、弹窗等）。

二、第二部分

2.1初始代码

每一个“html"文件都需要添加初始代码。介绍VS code的基础使用。

<!DOCTYPE html>   文档申明：告诉浏览器这是一个html文件
<html lang="en">     html文件的最外层标签：包裹着所有html标签代码，lang="en"表示是一个英文网站。lang="zh-CN"表示是一个中文网站。
<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>

2.2 注释

1.写法： 在浏览器中看不到，只能在代码中看到注释的内容。

2.意义：把暂时不用的代码注释起来，方便以后使用。对开发人员进行提示。

3.快捷键添加删除注释: ctrl+/（光标移到起始位置，不要选中）或者shift+alt+a（要选中再按）

 <!-- <div>    hello world</div> -->

2.3HTML语义化

根据网页中内容的结构，选择合适的HTML标签进行编写。（什么结构采用1什么样的标签）

屏幕阅读器（H5v0.12.4）：提炼出当前网页的标题

2.4标题与段落

1.h标签：标题，双标签：<h1></h1>.....<h6></h6>。网页中，h1标题最重要，h1最大，并且一个.html文件中只能出现一次，其他的都可以有多个。
h5h6标签不经常使用

2.p标题：段落，双标签<p></p>

3.练习

<!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>  涉强奸罪加拿大籍男艺人,吴亦凡（Kris），1990年11月6日出生于广东省广州市，加拿大籍华语流行乐男歌手、影视演员、音乐制作人。</p>

   <p>2021年7月31日，经警方调查，吴亦凡因涉嫌强奸罪被朝阳公安分局依法刑事拘留；8月10日，律师证实吴亦凡涉嫌在洛杉矶强奸未成年女粉丝 ；8月16日，北京市朝阳区人民检察院经依法审查，对犯罪嫌疑人吴某凡以涉嫌强奸罪批准逮捕。</p>
<h2>早年经历</h2>
<p>  吴亦凡出生于广东省广州市，父母离异后随母亲生活，10岁时和家人移民加拿大温哥华。2005年，吴亦凡在广州市第七中学读初三，在这期间，他还担任篮球队队长，参加少年NBA中国初中篮球联赛。随后，他回到加拿大，在加拿大温斯顿爵士丘吉尔中学就读；2007年，读高二的吴亦凡参加了韩国SM娱乐有限公司的全球选秀，成为练习生。 </p>  


<h2>人物评价</h2>

<p>做艺先做人，做人德为先。这句话到什么时候都不过时。艺人们应该始终以此为从业的基本准则，让自己成为一个具有真善美内核的倡导者、践行者和示范者。（央视网评论员）</p>
    <p>法律面前没有顶流。人气越高越要检点自律，越当红越要遵纪守法。（《人民日报》评） </p>
    <p>法律面前人人平等，正义面前没有“顶流”！（《法治日报》评）</p>
    <p> 光环再耀眼，名气再大，均无特权。（《中国妇女报》评） </p>
    <p> 千里之堤，溃于蚁穴。失去了慎微慎独、自警自省之心，便是滋生贪婪欲望的开始；从不守规矩，到违反法律，往往也不过是一步之遥。一旦置职业道德等规矩于不顾，做人做事出格走偏就在眼前，不仅毁了个人的立身之本，而且最终会遭大众唾弃、遭市场抛弃。吴某凡被依法刑事拘留，是一声响亮警钟，“演艺圈”不容藏污纳垢，“明星”要将守规矩作为基本责任和义务，远离非法之路。（中央纪委国家监委网评）  </p>
</body>
</html>

2.5文本修饰标签

强调:
对文本进行加粗,双标签<strong></strong>
斜体，双标签，<em></em>

下标，双标签<sub></sub>

上标，双标签，<sup></sup>

删除文本，双标签，(加删除线）

插入文本，双标签，(加下划线）
（删除，插入文本一般配合使用）

练习

<!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