Web前端学习win11

一、第一部分
- 1.1什么是HTML、CSS
- 1.2VS code
- 1.3深入了解网站开发
二、第二部分
- 2.1初始代码
- 2.2 注释
- 2.3HTML语义化
- 2.4标题与段落
- 2.5文本修饰标签
- 2.6 图片标签与图片属性
- 2.7 引入文件的地址路径
- 2.8 跳转链接
- 2.9 跳转锚点
- 2.10 特殊符号
- 2.11.列表
- 2.12 表格
- 2.13 表单

一、第一部分

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=""属性为框中提示文字，输入时消失