B站黑马程序员pink老师前端课程学习笔记_01 HTML5

最新推荐文章于 2022-07-20 20:26:09 发布

长城上的守夜人

最新推荐文章于 2022-07-20 20:26:09 发布

阅读量3.7k

点赞数 13

分类专栏：前端学习笔记文章标签： html html5

本文链接：https://blog.csdn.net/PancrasG/article/details/112286096

版权

本文是B站黑马程序员pink老师的前端课程笔记，主要涵盖HTML5的基础内容，包括Web标准、HTML标签规范、开发工具的使用、基本结构标签、常用标签如标题、段落、换行、图像和超链接的使用，以及表格、列表和表单的介绍。文章还介绍了VSCode快捷键、字符集和超链接分类。

摘要由CSDN通过智能技术生成

1. Web 标准：

标准	说明
结构	结构用于对网页元素进行整理和分类，现阶段主要为HTML
表现	表现用于设置网页元素的版式、颜色、大小等外观样式，主要指CSS
行为	行为是指网页模型的定义及交互的编写，现阶段主要为Javascript

Web标准最佳体验方案：结构、样式、行为相分离

HTML 标签（一）

1. HTML 语法规范

1.1 基本语法规范

双标签：`<html> </html>`

单标签：`<br />`

1.2 标签关系

包含关系：

<head>
    <title></title>
<head>

并列关系：

    <head></head>
    <boday></boday>

2. HTML 基本结构标签

2.1 HTML 网页

标题名	定义	说明
`<html></html>`	HTML标签	页面中最大的标签，根标签
`<head></head>`	文档头部
`<title></title>`	文档标题	网页标题
`<body></body>`	文档主体	元素包含文档所有内容

3. 开发工具

3.1 VSCode 的使用

新建文件：Crtl + N
保存：Ctrl + S 保存为.html文件
生成页面骨架结构：输入！+ Tab

3.2 文档类型声明标签

<!DOCTYPE html>

位于文档中最前面位置，处于 <html> 之前，

表示：当前页面采用HTML5版本显示网页

3.3 lang 语言种类

<html lang="en">

en 定义语言为英文
zh-CN 定义语言为中文

3.4 字符集

 <meta charset="UTF-8">

字符集（Characher set）是多个字符的集合。以便计算机能够死别和存储各种文字。

在 <head> 标签内，可以通过 <meta> 标签的 charest 属性来规定HTMAL文档应该使用那种字符编码。

charset 常用值有：GB2312、BIG5、和 UTF-8，其中 UTF-8 也被称为万国码，基本包含了全世界所有国家长要用到的字符。

4. 常用标签

4.1 标签语义

标签含义，让页面结构更清晰

4.2 标题标签

<h1>这是一级标题<h1>
	···
<h6>这是六级标题<h6>

HTML提供了6个等级网页标签，即 <h1> ~ <h6> (head )

4.3 段落和换行标签

段落标签

<p>这是一个段落标签</p>

<p>（ patagraph ）标签用于定义段落，它可以将整个HTML网页分为若干个段落。

文本会根据浏览器窗口大小自动换行
段落之间会有段间距

换行标签

<br /> 或 <br>

<br />（break）标签用于某段文本强制换行

<br /是单标签>
<br /> 标签只是简单的开始新的一行，行与行之间没有段间距

练习：

<!DOCTYPE html>
<html lang="en">
<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次，超过哈登排名现役第3位，仅次于詹姆斯
        和杜兰特。汤普森22投8中，三分8投4中得到24分3篮板2助攻，德拉蒙德-格林得到16分10篮板7助攻5盖帽，凯文-鲁尼
        得到14分7篮板2助攻，今天勇士有7名替补出场。</p>
<h4>兄弟对决升级：小库里给哥哥造成压力</h4>
<p>库里兄弟是NBA历史上第一对在分区决赛相遇的兄弟。在西决第1场中，小库里没有给哥哥造成压力，他出场19分钟，7投1中只得到3分3篮板2助攻
    在场期间输掉10分。但在西决第2场中，小库里攻防两端都打出杰出的表现，全场送出4次抢断，包括直接抢断自己的哥
    哥库里，在防守端给库里造成了极大的困扰。</p>
<p>作者：pink老师<br