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

1. Web 标准:

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

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

HTML 标签(一)

1. HTML 语法规范

1.1 基本语法规范
双标签:
单标签:
1.2 标签关系
包含关系:
<head>
    <title>title>
<head>
并列关系:
    <head>head>
    <boday>boday>

2. HTML 基本结构标签

2.1 HTML 网页
标题名 定义 说明
HTML标签 页面中最大的标签,根标签
文档头部
文档标题 网页标题
文档主体 元素包含文档所有内容

3. 开发工具

3.1 VSCode 的使用
  1. 新建文件:Crtl + N

  2. 保存:Ctrl + S 保存为.html文件

  3. 生成页面骨架结构:输入!+ Tab

3.2 文档类型声明标签
 

位于文档中最前面位置,处于 之前,

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

3.3 lang 语言种类
<html lang="en">
  • en 定义语言为英文

  • zh-CN 定义语言为中文

3.4 字符集
 <meta charset="UTF-8">

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

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

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

4. 常用标签

4.1 标签语义

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

4.2 标题标签
<h1>这是一级标题<h1>
	···
<h6>这是六级标题<h6>
  • HTML提供了6个等级网页标签,即

    ~

    (head )
4.3 段落和换行标签
段落标签
<p>这是一个段落标签p>

patagraph )标签用于定义段落,它可以将整个HTML网页分为若干个段落。

  • 文本会根据浏览器窗口大小自动换行

  • 段落之间会有段间距

换行标签
<br /><br>


break)标签用于某段文本强制换行



  • 标签只是简单的开始新的一行,行与行之间没有段间距

练习:


<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-0h1> 
   <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 

你可能感兴趣的:(前端学习笔记,html,html5)