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=1.0">
<title>Document</title>
</head>
<body>
<p>
北京著名的高档百货店-<em>塞特购物中心</em>即将闭店，塞特购物中心总台服务人员表示<strong>“如果手中有购物卡，请尽快到店消费”</strong>根据这位工作人员介绍，目前塞特中心正在进行清仓大甩卖。<del>特价电视原价3600元</del>，<ins>现清仓价只需1300元</ins></p>
<p>a<sup>2</sup>+b<sup>2</sup>=c<sup>2</sup>
H<sub>2</sub>O</p>
</body>
</html>
2.6 图片标签与图片属性
图片标签，单标签，img
（快捷键：img+tab-><img src="" alt="">)
src=" ":引入图片地址
alt=" ":当图片出现问题时出现提示，提高用户体验
title=" ":鼠标移动至图片上时显示提示，移开时消失
width=" “、height=” ":单位是像素
练习
<body>
<img src="https://pic4.zhimg.com/v2-e5f2f72671ac1133e307c324d550467b_r.jpg?source=1940ef5c" alt="天官赐福"title="天官赐福百无禁忌"width="300"height="300">
</body>
2.7 引入文件的地址路径
相对路径:
.在路径中表示当前路径（与当前文件在同一级别，在当前文件内部）
…在路径中表示上一级路径（图片所在文件夹与当前文件在同一级别）
/和\都可以用
练习
<!--<img src="./laopo.jpg" alt="">-->
<!-- <img src=".//hhh/laopo.jpg" alt=""> -->
<img src="../hhh/laopo.jpg" alt="">
（相对路径）
<img src="C:/hhh/laopo.jpg" alt="">
（绝对路径，盘名E：可不写）
2.8 跳转链接
链接文字地址图片
标签：<a></a>（快捷键a+herf)
属性：
href:链接地址
target：改变链接打开的方式，默认情况下在当前页面打开_self.在新窗口打开_lank
base,单标签：改变链接的默认行为，写在body当中<base targe="_blank">
练习
<!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>
<base taeget="_blank"> (base标签）
</head>
<body>
<!-- <a href="http://www.baidu.com">访问百度</a> -->
<a href="http://www.baidu.com" alt=""><img src="./hhh/laopo.jpg" alt=""></a>
<a href="http://www.baidu.com"target="_blank">访问百度</a>
<a href="http://www.baidu.com"target="_blank">访问百度</a> <a href="http://www.baidu.com"target="_blank">访问百度</a> <a href="http://www.baidu.com"target="_blank">访问百度</a>
</body>
</html>`
2.9 跳转锚点
快速 在当前页面内进行切换 ，切换位置 。类似书的索引。
实现一<a href="#id名"> </a>
<body>
<a href="#HTML">HTML</a>
<a href="#CSS">CSS</a>
<a href="#Javascrip">Javascrip</a>
<h2 id ="HTML"> HTML </h2>
<p> hhhhhhhh</p>
<p> hhhhhhhh</p>
<p> hhhhhhhh</p>
<p> hhhhhhhh</p>
<p> hhhhhhhh</p>
<h2 id="CSS"> </h2>
<p> hhhhhhhh</p>
<p> hhhhhhhh</p>
<p> hhhhhhhh</p>
<p> hhhhhhhh</p>
<p> hhhhhhhh</p>
<p> hhhhhhhh</p>
<p> hhhhhhhh</p>
<h2 id="Javascrip" >Javascrip </h2>
<p> hhhhhhhh</p>
<p> hhhhhhhh</p>
<p> hhhhhhhh</p>
<p> hhhhhhhh</p>
<p> hhhhhhhh</p>
<p> hhhhhhhh</p>
实现二：
<a name=" "></a>
<body>
<a href="#HTML">HTML</a>
<a href="#CSS">CSS</a>
<a href="#Javascrip">Javascrip</a>
<a name="HTML"></a> 不占空间，用来做映射
<h2> HTML </h2>
<p> hhhhhhhh</p>
<p> hhhhhhhh</p>
<p> hhhhhhhh</p>
<p> hhhhhhhh</p>
<p> hhhhhhhh</p>
<a name="CSS"></a>
<h2> CSS </h2>
<p> hhhhhhhh</p>
<p> hhhhhhhh</p>
<p> hhhhhhhh</p>
<p> hhhhhhhh</p>
<p> hhhhhhhh</p>
<p> hhhhhhhh</p>
<p> hhhhhhhh</p>
<a name="Javascrip"></a>
<h2>Javascrip </h2>
<p> hhhhhhhh</p>
<p> hhhhhhhh</p>
<p> hhhhhhhh</p>
<p> hhhhhhhh</p>
<p> hhhhhhhh</p>
<p> hhhhhhhh</p>
</body>
2.10 特殊符号
编写文本时，会遇到无法输入的特殊符号，且多个空格不会不会被页面解析出来。因此准备了专门的代码。还可以避免产生冲突。
&+字符
如<html> -> <html>
2.11.列表
1.无序列表：ul li必须组合出现，中间不允许有其他标签）li内部可以有其他。
tupe属性：改变前面标记的样式，一般用CSS控制，查
<body>
<ul type="circle">
<li>第一项</li>
<li>第二项</li>
</ul>
</body>
2.有序列表
用的很少，可以用无序列表代替
<ol><li>
默认1.2.3，无序是点
3.定义列表
有标题和标题内容
<dl>:定义列表
<dt>:定义专业术语或名词
<dd>:对名词进行解释和描述
4.嵌套列表
列表之间可以嵌套
有序列表嵌套
<body>
<ul>
<li>辽宁省
<ul>
<li>沈阳</li>
<li>大连</li>
<li>丹东</li>
</ul>
</li>
<li>山东省
<ul>
<li>济南</li>
<li>青岛</li>
<li>烟台</li>
</ul>
</li>
</ul>
</body>
无序列表嵌套
<dl>
<dt>中国</dt>
<dd>
<dl>
<dt>辽宁省</dt>
<dd>沈阳</dd>
<dd>大连</dd>
<dd>丹东</dd>
</dl>
<dl>
<dt>山东省</dt>
<dd>济南</dd>
<dd>青岛</dd>
<dd>烟台</dd>
</dl>
</dd>
<dt>美国</dt>
<dd>洛杉矶</dd>
<dd>纽约</dd>
</dl>
练习
<h1>好美味小吃</h1>
<ul>
<li>小吃类
<ul>
<li>煮粉干</li>
<Li>拌青菜</Li>
<li>蛋炒饭</li>
<li>煎蛋</li>
<li>米饭</li>
</ul>
</li>
<li>卤味类
<ul>
<li>鸭肠</li>
<li>面筋</li>
<li>牛肚</li>
<li>猪耳朵</li>
<li>猪头肉</li>
</ul>
</li>
</ul>
<p><em>亲，20元以上可送餐哦</em></p>
2.12 表格
1.表格标签
<table>:表格的最外层容器
<tr>:定义表格行
<th>:定义表头
<td>:定义表格单元
<caption>:定义表格标题
注：之间有嵌套关系，要符合嵌套规范
2.语义化标签：没有什么效果，要符合嵌套规范
tHead、TBody、tFood
TBody可出现多次，tFood，tHead只能出现一次
（tFood无tab快捷键）
<body>
<table>
<caption>天气预报</caption>
<tHead>
<tr>
<th>日期</th>
<th>天气情况</th>
<th>出行情况</th>
</tr>
</tHead>
<tBody>
<tr>
<td>2019年1月1日</td>
<td>晴</td>
<td>天气晴朗，适合出行</td>
</tr>
<tr>
<td>2019年1月2日</td>
<td>小雨</td>
<td>有小雨，出门请带伞</td>
</tr>
</tBody>
</table>
</body>
表格属性
border:表格边框（table)
cellpadding:单元格内的空间（table)
cellspacing:单元格之间的空间（table)
rowspan:合并行(th)
colspan:合并列(td)
align:左右对齐方式:left、center、right
valign:上下对齐方式:top、middle、bottom
html
<body>
<table border="3" cellpadding="30" >
<caption><strong>天气预报</strong></caption>
<tHead>
<tr align="left"> <!--一行左对齐-->
<th colspan="2">日期</th> <!--（colspan合并下面两列单元格 -->）
<th>天气情况</th>
<th>出行情况</th>
</tr>
</tHead>
<tBody>
<tr>
<td rowspan="2">2019年1月1日</td> <!--（rowspan合并后面两行单元格 -->）
<td>白天</td>
<td>晴</td>
<td>天气晴朗，适合出行</td>
</tr>
<tr>
<td>黑天</td>
<td>晴</td>
<td>天气晴朗，适合出行</td>
</tr>
<tr>
<td rowspan="2">2019年1月2日</td> <!--（rowspan合并后面两行单元格 -->）
<td>白天</td>
<td>小雨</td>
<td>有小雨，出门请带伞</td>
</tr>
<tr>
<td>黑天</td>
<td>小雨</td>
<td>有小雨，出门请带伞</td>
</tr>
</tBody>
</table>
</body>
2.13 表单
1.表单标签：更加自由
form(外面）、input（输入框去）
（快捷键input+tap）
input(单标签）有一个type属性，决定是什么控件
type=“text(默认）输入框、password密码框（输入显示星号）、checkbox复选框 、radio单选框、file（上传文件）、submit（提交）reset（重置）、”
<body>
<form action="所需提交的地址"
<h2>输入框</h2>
<input type="text" placeholder="请输入用户名">
<h2>密码框</h2>
<input type="password"placeholde="请输入密码">
<h2>复选框</h2>
<input type="checkbox"checked>苹果
<input type="checkbox" checked>香蕉
<input type="checkbox"disabled>葡萄
<h2>单选框</h2>
<input type="radio"name="gender">男
<input type="radio"name="gender">女
<h2>上传文件</h2>
<input type="file">
<h2>提交和重置</h2>
<input type="submit">
<input type="reset">
</body>
**checkbox种checked为默认被选中，disabled为默认不能被选中
radio加name属性可实现只选一个
重置：所选清空
上传文件：打开文件管理选择文件
password、text中加placeholder=""属性为框中提示文字，输入时消失
