前端入门05-14（Day-002）

最新推荐文章于 2024-06-02 21:27:33 发布

wlwhonest

最新推荐文章于 2024-06-02 21:27:33 发布

阅读量85

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/weixin_73683197/article/details/134225193

版权

Web标准

构成

结构
表现
行为

结构写到HTML文件中，表现写到CSS文件中，行为写到JavaScript文件中。

HTML标签导读

学习目标：

标签书协注意规范
HTML骨架标签
超链接标签
写出图片标签（alt和title的区别）
相对路径的三种形式

HTML语法规范

前端学习之HTML-day001

HTML基本结构标签(骨架标签）

第一个页面

<html> 
   <head>
	<title> 第一个页面</title>
   </head>
   <body>
	键盘敲烂，工资过万
   </body>
</html>

<br />

VSCode工具创建页面（开发工具）

记事本

不方便

VSCode

新建
保存为HTML网页文件
填写基本标签（首行打出！生成基本骨架）
更改body里的内容
利用插件【open in browser】预览：右键之后点击【Open In Default Browser】

细节

Ctrl+‘+’ 放大视图

其他

开发工具

VSCode插件安装以及快捷键

pink老师写的文章：
bilibili.com/read/cv9698270
插件：

【Chinese (Simplified) 】
【Auto Rename Tag】
【One Dark Pro】
【格式化代码】（系统自带）
【open in browser】
【Live Server】
【vscode-icons】
【 Easy LESS 】
【会了吧】

DOCTYPE和lang以及字符集的作用

<!DOCTYPE>标签

告诉浏览器使用哪种HTML版本显示页面

必须写在

lang标签

<html lang="fr">

当前文档显示语言：

en为英语
zh-CN为中文

charset字符集

万国码：

<meta charset="UTF-8">

HTML常用标签

标签语义

合适的标签

标题标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>标题标签</h1>
    <h1>标题一共六级选</h1>
    <h2>文字加粗一行显</h2>
    <h3>由大到小依次减</h3>
    <h4>从重到轻随之变</h4>
    <h5>语法规范书写后</h5>
    <h6>具体效果刷新见</h6>
                -----pink老师
</body>
</html>

段落标签和换行标签（重要）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>被誉为“计算机界奥林匹克”的程序设计竞赛——国际大学生程序设计竞赛（International Collegiate Programming Contest，ICPC）<br />与中国大学生程序设计竞赛（China Collegiate Programming Contest，CCPC）2022-2023赛季各赛站已圆满结束，深技大大数据与互联网学院ACM集训队斩获CCPC银奖1项，ICPC铜奖3项，最高排名位列全国高校第26名。</p>

    <p>在本届竞赛中，包括清华大学、北京大学在内的全国本科高校主力尽出，共同参与。深技大于2021-2022赛季首次派出学生参赛并获得铜奖，本赛季成绩再创新高，成为极少数首年参赛即获奖、次年获银奖的国内高校。</p>

</body>
</html>

体育新闻案例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>女排超级联赛-天津3-0山东开门红 苏沪零封深圳惊险翻盘 </h1>

    <h4>数据统计</h4>
    <p>11月4日，2023-2024赛季全国女排超级联赛正式开启，A组福建安溪铁观音被安排轮空，天津渤海银行与河南双汇同样是以3-0零封山东日照钢铁和四川五粮春，北京汽车激战四局以3-1闯关河北；B组上海光明优倍与辽宁东港草莓也是以3-0送蛋江西上饶奥飞和浙江西塘姚 庄，江苏中天钢铁苦战四局以3-1擒获广东台山和力，深圳中塞龙华鏖战五局以3-2惊险翻盘云南滇池学院.
    </p>
    <p>天津渤海银行第一局通过王艺竹平拉开至5-3，可惜巴尔加斯后二遭王文涵封堵追平好在李盈莹重扣再防反，巴尔加斯后二连得4分后迫使安家杰暂停。在李盈莹打吊结合扩大分差至16-9后被宋立琪突破，山东日照钢铁由于遭王艺竹下球到10-18迫使安家杰再休战，宋立琪强攻但接飞巴尔加斯跳发至13-21，天津女排依靠李盈莹暴扣与王媛媛短平快到24-15，被车文涵和曹婷婷挽救2局点后由王媛媛背飞先胜至25-17。</p>

    <p>山东日照钢铁第二局2-6时由孙杰后二变扣为吊，安家杰在4-10时暂停后宋立琪轻吊遭王媛媛封堵，在6-13时由郭慧珍短平快而车文涵被解盛岩轮换。王艺竹封堵曹婷婷背飞并且李盈莹跑动冲进至17-11，天津渤海银行被孙杰变扣为吊后王媛媛短平快，李盈莹爆头解盛钰后王媛媛背飞再巧打到21-13。安家杰主动休战后被王艺竹和巴尔加斯突破至14-23好在连追3分，天津女排浪费局点后以25-18领先局分到2-0。</p>

    <p>天津渤海银行第三局由于王艺竹强攻被拦再遭解盛岩突破，王宝泉在3-6暂停后由巴尔加斯相继后二连得3分追平，迫使安家杰休战后王艺竹轻吊逆转至14-12。巴尔加斯暴扣可惜被解盛岩平拉开到16-16，天津女排遭王文涵偷袭后李盈莹打手出界，并且利用解盛岩垫球未能过网至20-17迫使安家杰暂停，连丢2分后巴尔加斯连番暴扣和王媛媛封堵到24-19，李盈莹轻吊被拦再遭解盛岩突破浪费2赛点后，巴尔加斯重扣以25-21锁定胜局至3-0开门红。</p>

    <p>A组福建安溪铁观音被安排轮空，天津渤海银行坐镇武清体育中心馆直落三局以3-0（25-17、25-18、25-21）轻取山东日照钢铁，北京汽车移师河北农业大学体育馆客场激战四局以3-1（25-13、25-16、21-25、25-13）闯关河北，四川五粮春坐镇高县文体中心主场力拼三局以0-3（25-27、19-25、21-25）被河南双汇零封。</p>

    <p>B组深圳中塞坐镇龙华文体中心主场鏖战五局以3-2（23-25、22-25、25-13、25-15、15-10）翻盘云南滇池学院，江苏中天钢铁在常州大学体育馆主场苦战四局以3-1（25-16、26-28、25-18、25-20）擒获广东台山和力，上海光明优倍移师上饶体育中心馆直落三局以3-0（25-22、25-20、31-29）送蛋江西上饶奥飞，辽宁东港草莓在东港体育馆同样是以3-0（25-21、25-15、25-11）拿下浙江西塘姚庄。</p><br />（任煜寅）
</body>
</html>