Web前端 One Day

最新推荐文章于 2024-09-30 21:15:00 发布

Brain_Destroyer

最新推荐文章于 2024-09-30 21:15:00 发布

阅读量241

点赞数 1

文章标签： html5

本文链接：https://blog.csdn.net/Brain_Destroyer/article/details/109303456

版权

One Day

网页总结

网页是图片、文本、视频、声音等多元素的组成，其实就是一个html文件。
网页的生成制作：是由前端开发人员书写html文件，然后通过浏览器呈现给用户。
什么是HTML：超文本标记语言，用来制作网页的语言，由各种标签组成。

常用浏览器

1.谷歌（市场份额最大）IE EDGE 火狐，优先使用谷歌浏览器。

Web标准（重点）

主要包括：结构表现行为三个方面

结构：网页元素，现阶段主要学习的是HTML
表现：外观样式，主要指CSS
行为：交互，现阶段主要学习的是Javascript

Web标准最佳体验方案：结构、表现、行为相分离
简单的理解：结构写到HTML文件表现写到CSS文件行为写到Javascript文件中。

HTML基本结构标签

<html>"根标签"
  <head>
    <head>"头部标签"
      <title>我的第一个项目</title>"标题标签"
    </head>
    <body>"主体标签"
      键盘敲烂，月薪过万
    </body>
</html>

常用网页开发工具

VsCode

VsCode常用快捷键

！+ Tab 快速生成页面骨架
ALT + B 使用默认浏览器打开
Ctrl + S 保存
ALT + Z 自动换行

VsCode实用插件安装

名称：Chinese (Simplified) Language Pack for Visual Studio Code
功能：把开发工具简中化
名称：open in browser
功能：在浏览器中打开
注：Open in Default Browser 为默认浏览器
Open in Other Browser 为手动选择浏览器
名称：Auto Rename Tag
功能：自动重新命名配对HTML/XML标签

VsCode标签

标题标签（常用）
标题标签等级分6级，根据标题的重要性从重到轻
特点：一个标题独占一行，字体加粗字号加大
使用方式：通常用在文档内容的标题部分

<h1>我是头标题</h1>
<h2>1.1</h2>
<h3>1.1.1</h3>
<h4>1.1.1.1</h4>
<h5>1.1.1.1.1</h5>
<h6>1.1.1.1.1.1</h6>

段落和换行标签（常用）
P 表示段落，通常用在文本内容需要分段的情况

单标签: /br 表示换行，通常用在文本内容需要换行的情况

第一次练习题目如下：

在这里插入图片描述
完成案例效果：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>常用文本标记的使用</title>
</head>
<body>
    <h1>水花61分伊戈达拉制胜抢断 西决勇士再胜开拓者总分2-0</h1>
    <h4>数据统计：水花兄弟合砍61分</h4>
    <p>库里22投11中，三分14投4中，罚球11罚全中得到37分8篮板8助攻，职业生涯季候赛得分30+次数来到35次，超过哈登<br />排名现役第3位，仅次于詹姆斯和杜兰特。</p>
    <p>汤普森22投8中，三分8投4中得到24分3篮板2助攻，德拉蒙德-格林得到16分10篮板7助攻5盖帽，凯文-鲁尼得到14分7<br />篮板2助攻，今天勇士有7名替补出场。</p>
    <h3>兄弟对决升级：小库里给哥哥造成压力</h3>
    <p>库里兄弟是NBA历史上第一对在分区决赛相遇的兄弟。在西决第1场中，小库里没有给哥哥造成压力，他出场19分钟，7<br />投1中只得到3分3篮板2助攻，在场期间输掉10分。</p>
    <p>但在西决第2场中，小库里攻防两端都打出杰出的表现，全场送出4次抢断，包括直接抢断自己的哥哥库里，在防守端给<br />库里造成了极大的困扰。</p>
    <p>作者：Mr.Wei<br/>2020-10-27</p>
</body>
</html>