HTML学习（一）- HTML标签上_html标签utf-CSDN博客

本文链接：https://blog.csdn.net/weixin_56656559/article/details/134785729

一、web标准

Web标准是由W3C组织和其他标准化组织制定的一系列标准的集合，W3C（万维网联盟）是国际最著名的标准化组织。

1、Web标准

主要包括结构（最重要）、表现、行为三个部分。

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

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

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

二、HTML标签

1、HTML语法规范

1.1 基本语法

1.HTML标签是由尖括号包围的关键词，例如<html>。

2.HTML标签通常成对出现，如<html>和</html>，称为双标签，标签对中第一个标签是开始标签，第二个是结束标签。

3.有些特殊标签是单个标签（极少），例如<br/>，称为单标签。

1.2标签关系

双标签关系：包含关系和并列关系。

2、HTML基本结构标签

2.1HTML网页

每个网页都会有一个基本的结构标签（也成为骨架标签），页面内容也是在这些基础标签上书写。HTML页面也成为HTML文档。HTML文档后缀名必须是.html或.htm。

浏览器作用是读取HTML文档，并以网页的形式显示他们。

骨架标签：

标签名	定义	说明
<html></html>	HTML标签	根标签，页面中最大的标签
<head></head>	文档的头部	head标签中必须设置的标签是title
<title></title>	文档的标题	页面的网页标题
<body></body>	文档的主体	元素包含文档的所有内容，页面内容基本放在body里面

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

3.vscode运行HTML文件

vscode需要下载插件：Chinese、Auto Rename Tag、Open in Browser、

https://blog.csdn.net/m0_51111980/article/details/115429829

可以查看此文章，详细了解运行HTML文件步骤。

3.1vscode快捷键

（1）快速复制一行：shift+alt+下箭头/上箭头

（2）选定多个相同单词：ctrl+d

（3）添加多个光标：ctrl+alt+上下箭头

（4）全局查找替换：ctrl+h

（5）快速定位到某行：ctrl+g

（6）选择某个区块：shift+alt然后拖动鼠标

（7）放大缩小编辑器界面：ctrl+或ctrl-

3.2vscode工具生成骨架标签新增代码

（1）<!DOCTYPE>文档类型声明标签，告诉浏览器这个页面采用html5版本显示页面。

（2）<html lang="zh-CN"> lang语言种类：用来定义当前文档显示的语言。

en表示英语，zh-CN表示中文。对浏览器和搜索引擎有一定作用。

（3）<meta charset="UTF-8">字符集

采用UTF-8保存文字，不写就会乱码。

4.HTML常用标签

4.1标签语义-让页面结构更清晰

4.2标题标签h1- h6（重要）

使用标题使用，并依据重要性递减。单词head的缩写。

加了标题的文字会加粗变大，独占一行。

<!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>123
    <h2>标题标签</h2>
    <h3>标题标签</h3>
    <h4>标题标签</h4>
    <h5>标题标签</h5>
    <h6>标题标签</h6>
</body>

</html>

4.3段落p和换行标签br（重要）

（1）p标签用于定义段落。

可以把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>标签用于定义段落。</p>
    <p>可以把HTML文档分割为若干段落。</p>
</body>

</html>

（2）换行标签br

强制换行显示。

特点：<br/>是一个单标签。只是简单的开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距。

<!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>标签用于<br />定义段落。</p>
    <p>可以把HTML文档分割为若干段落。</p>

</body>

</html>

4.4文本格式化标签

突出重要性。

语义	标签	说明
加粗	<strong></strong>或<b></b>	推荐使用<strong>标签，语义更强烈
倾斜	<em></em>或<i></i>	推荐使用<em>标签，语义更强烈
删除线	<del></del>或<s></s>	推荐使用<del>标签，语义更强烈
下划线	<ins></ins>或<u></u>	推荐使用<ins>标签，语义更强烈

<!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>
    我<strong>加粗</strong>了
    我<b>加粗</b>了
    我<em>倾斜</em>了
    我<i>倾斜</i>了
    我<del>删除</del>了
    我<s>删除</s>了
    我<ins>下划</ins>了
    我<u>下划</u>了
</body>

</html>

4.5 div和span标签

无语义，放内容

特点：

<div>标签用来布局，一行只能放一个<div>，大盒子。
<span>标签用来布局，一行可以放多个<span>，小盒子。

<!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>
    <div>div标签，一个占一行</div>123
    <div>div标签，一个占一行</div>123
    <span>百度</span>
    <span>新浪</span>
    <span>搜狐</span>
</body>

</html>

4.6图像标签和路径（重要）

（1）图像标签<img>

<img>用于定义HTML页面中的图像。

属性	属性值	说明
src	图片路径	必须属性
alt	文本	替换文本，图像不能显示时出现
title	文本	提示文本，鼠标放在图像上时显示的文本
width	像素	设置图像的宽度
height	像素	设置图像的高度
border	像素	设置图像的边框粗细

<!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>
    <h4>图片标签的使用:</h4>
    <img src="img.jpg" />
    <h4>alt 替换文本:</h4>
    <img src="img1.jpg" alt="名侦探学院第二季" />
    <h4>title 提示文本:</h4>
    <img src="img.jpg" alt="名侦探学院第二季" title="名侦探学院要做就做南波万" />
    <h4>width 设定图像宽度:</h4>
    <img src="img.jpg" alt="名侦探学院第二季" title="名侦探学院要做就做南波万" width="500" />
    <h4>height 设定图像高度:</h4>
    <img src="img.jpg" alt="名侦探学院第二季" title="名侦探学院要做就做南波万" height="200" />
    <h4>设定图像高度、宽度:</h4>
    <img src="img.jpg" alt="名侦探学院第二季" title="名侦探学院要做就做南波万" height="200" width="500" />
    <h4>border 设定图像边框:</h4>
    <img src="img.jpg" alt="名侦探学院第二季" title="名侦探学院要做就做南波万" border="10" />



</body>

</html>

注意点：

图片要和HTML文档放在同一个文件夹中，但可不同级。
图像标签可以有多个属性，必须写在img标签名后。
属性之间不分先后顺序，标签属性属性之间均以空格分开。
属性采取键值对的格式，即key= "value"的格式，属性="属性值"。

（2）路径

目录文件夹：就是普通文件夹，存放做页面所需相关素材，比如HTML文件、图片等。

根目录：打开目录文件夹的第一层就是根目录。

b.路径

相对路径：以引用文件所在位置为参考基础而建立出的目录路径。

简单说即图片相对于HTML页面的位置。

相对路径分类	符号	说明
同一级路径		图像文件位于HTML文件同一级，如<img src="baidu.gif" />
下一级路径	/	图像文件位于HTML文件下一级，如<img src="images/baidu.gif"/>
上一级路径	../	图像文件位于HTML文件上一级，如<img src="../baidu.gif"/>

绝对路径:目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。

例如，"D:\web\img\logo.gif"或完整的网络地址"http://www.itcast.cn/images/logo.gif"

4.7超链接标签<a>（重要）

<a>标签用于定义超链接，作用是从一个页面链接到另一个页面。

（1）链接的语法格式

<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a>

两个属性

属性	作用
href	用于指定链接目标的url地址，（必须属性）当为标签应用href属性时，就具有超链接功能。
target	用于指定链接页面的打开方式，其中_self为默认值（在当前页面打开），_blank为在新窗口中打开方式。

（2）链接分类

外部链接，例如<a href="http://www.baidu.com">百度</a>.
内部链接：网站内部页面之间的相互链接，直接链接内部页面名称即可，例如<a href="index.html">首页</a>.
空链接：如果当时没有确定链接目标时，<a href="#">首页</a>.
下载链接：如果href里面的地址是一个文件.exe或文件.zip等压缩包，会下载这个文件。
网页元素链接：在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接
锚点链接：点击链接，快速定位到页面某个位置。

第一步：在链接文本的href属性中，设置属性值为#名字的形式，如<a href="#two">第2集</a>；

第二步：找到目标位置标签，里面添加一个id属性=刚才的名字，如：<h3 id="two"> 第2集介绍</h3>。

<!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>
    <h4>1.外部链接</h4>
    <a href="http://www.qq.com" target="_blank">腾讯</a>
    <a href="http://www.itcast.cn" target="_blank">传智播客</a>
    <h4>2.内部链接</h4>
    <a href="gongsijianjie.html" target="_blank">公司简介</a>
    <h4>3.空连接</h4>
    <a href="#" ">公司地址</a>
    <h4>4.下载链接</h4>
    <a href=" img.zip" target="_blank">文件下载</a>
    <h4>5.网页元素的链接</h4>
    <a href="https://www.mgtv.com/" target="_blank"><img src="img.jpg" /></a>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>6、锚点定位</title>
</head>

<body>
    <h2 id="目录">目录</h2>
    1.<a href="#节目概述">节目概述</a><br />
    2.<a href="#节目评价">节目评价</a><br />
    3.<a href="#节目原声">节目原声</a><br />
    4.<a href="#播出信息">播出信息</a><br />
    <h3 id="节目概述">节目概述</h3>
    <p>《明星大侦探之名侦探学院第一季》由邵明明担任助教，蒲熠星、唐九洲、齐思钧、周峻纬、郭文韬（文韬）、石凯、潘宥诚、王春彧、郎东哲担任学员。全季每期学员们在棋格上通过掷骰子决定前进步数，进行高能脑力与推理游戏的角逐，率先到达终点且获胜的No.1学员成为《明星大侦探第五季》当期案件的侦探助理。
        [7]</p>
    <p>《明星大侦探之名侦探学院第二季》由蒲熠星、郭文韬（文韬）、唐九洲、齐思钧、石凯、邵明明、周峻纬担任学员。全季分为上下两个学期，学员们进行实景推理“剧本杀”游戏，共度欢乐爆笑的九天合宿生活，上演高能脑力对决。 [19]
        《明星大侦探之名侦探学院第三季》由邵明明担任助教，蒲熠星、郭文韬（文韬）、齐思钧、唐九洲、石凯、曹恩齐、叶逊敏（火树）、何运晨担任学员。全季学员们在四次两天一夜的合宿时光里进行游戏比拼，在学院共度意想不到的欢乐生活。整季节目获胜的NO.1学员成为《名侦探俱乐部》的主持人。
        [20]</p>
    <p>《明星大侦探之名侦探学院第四季》由罗予彤担任调查官，邵明明担任助教，蒲熠星、郭文韬（文韬）、齐思钧、石凯、曹恩齐、何运晨担任学员。全季学员们入住神秘村落，通过线索推理，寻找隐藏在村落中的神秘宝藏。在三个三天两夜的生活中，学长们进行智力、体力的游戏比拼，呈现温馨有趣的合宿生活。
        [6]</p>
    <p>《名侦探学院第五季》由吴昕担任管家，邵明明担任助教，蒲熠星、齐思钧、郭文韬（文韬）、石凯、杨迪、庞博、唐九洲、曹恩齐、何运晨担任学员。全季学员们入住新的神秘村落，围绕六个情节跌宕起伏的主题故事，展开六场前所未有、超乎想象的探索之旅。
        [10]</p>
    <p>《名侦探学院第六季》由郭文韬（文韬）、齐思钧、蒲熠星、何运晨、曹恩齐、唐九洲、石凯、黄子弘凡、周峻纬担任学员。全季学员们前往五个实景场地，体验五个精彩而富有意义的主题故事。每个故事中，每位学员被赋予不同背景身份，归属于不同的阵营，拥有各自的胜利条件。通过益智力、观察力、判断力、决策力、沟通力、协作力等能力的考验和对决，争取属于个人和集体的荣誉。
        [15]</p>
    <p>《名侦探学院第七季》由郭文韬（文韬）、齐思钧、蒲熠星、何运晨、曹恩齐、唐九洲、石凯、黄子弘凡、叶逊敏（火树）担任学员。全季邀请各界优秀青年以剧情故事为背景，结合多变的脑力机制，形成多个主题挑战，嘉宾全力争取胜利。节目以寓教于乐的方式展现新时代青年时刻积极向上的精神面貌。
        [26]</p>
    <a href="#目录">返回目录</a>
    <h3 id="节目评价">节目评价</h3>
    <p>总体评价<br />
        在有限的体量内给予受众耳目一新的审美体验，《名侦探学院》系列通过打造"名学宇宙"，剧情内的人物线与剧情外的嘉宾友情线相辅相成，诞生出"院人"这一群体标签，为节目的核心受众提供持续的追综动力，而嘉宾们呈现出的热血、勇敢、智慧的青年群像，亦印证着节目"要做就做南波万"的初心。用"大而整"的社会观察视角，滋养"小而美"的形式呈现效果，《名侦探学院》始终以敏锐的触角引领青年人辩证地看待世界，满足年轻一代观众的审美新需求。它的创新与突破不仅为综N代提供着长青的秘诀，也在迷综层面提供了剧情先行、社会意义为核心的的内容、情绪价值新解法。
        [28]（《中国日报》评）</p>
    <p>分季评价<br />
        《名侦探学院第五季》首个主题故事紧跟社会热点，聚焦非法捕猎，呼吁大众关注保护野生动物、维护生物多样性。节目精准切中了新一代年轻人兴趣点，采用大众喜闻乐见的沉浸式情景推理作为节目主线；同时放大学员们解答烧脑谜题的高光时刻和逗趣的生活日常，让观众感受到当代青年蓬勃向上的面貌。在日常游戏与解谜中开发脑力，在宝藏背后的故事里思考社会议题，从智力养成到价值观养成，节目让“寓教于乐”有了更丰富的表达。（中国新闻网湖南评）
        [21]
        《名侦探学院第五季》作为一档以年轻人为主要受众的综艺节目，在兼顾娱乐性的同时也肩负起引导青少年受众正向价值观的责任。在主题选取上不仅聚焦社会热点，不同宝藏背后涵盖的是保护野生动物、教育压力、关爱老人、谨防电信诈骗等多个具社会效益的主题。同时也贴近年轻受众的痛点，用写实的故事作为与观众共情的基底，既给人温度又示人方向。《名侦探学院第五季》找到了娱乐性与社会性之间的平衡点，以知识包容性极强的谜题衔接深刻的故事情节，伴随着寻宝进程的逐步深入，进而实现柔化的价值传递和含蓄价值引导，让寓教于乐有了更好的表达方式，亦是网络综艺强化价值引导的意义所在。（上游新闻评）
        [22]
        《名侦探学院第六季》不仅主打各自为战的阵营比拼，也强化故事背景设定。无论是嘉宾之间绝佳的化学反应，还是精彩的脑力比拼，该节目通过一个个承载社会价值的故事，强化节目价值，让观众在观看节目的同时能够获得娱乐以外的思考。（《南方日报》评）
        [23]
        《名侦探学院第六季》带领观众体验了五个精彩而富有意义的主题故事。节目以寓教于乐的方式，通过多样化的剧情切中当下青年人关注的社会焦点话题，在为观众提供脑力挑战的同时，增加了思考价值。《名侦探学院第六季》作为“迷综赛道”节目，因其推理、烧脑的属性，汇聚了一批因热爱而密切关注的“综N代”受众，有了前五季节目作为基础，一方面，节目通过在环节、游戏赛制等方面的创新，不断给予“老粉”在感官和智力上拥有新的体验；另一方面，节目通过自然的视角刻画“院人群像”，无论是借助剧情设定的人物关系，还是在“熟人场”中加入阵营分组，激发不同嘉宾之间的化学反应，最终都指向“集体协作”这一主旨。节目在“小体量”中做出“大情怀”，以剧情为“骨架”，以阵营游戏为皮，以群体成长、友情为血肉，将“名学宇宙”的故事延展出不同色彩，为不断扩大的核心受众，提供更多情绪价值。（《北京青年报》评）
        [24]</p>
    <a href="#目录">返回目录</a>
    <h3 id="节目原声">节目原声</h3>
    <p>《 NO.1——南波万》
        蒲熠星、周峻纬、唐九洲、齐思钧、郭文韬（文韬）、邵明明、石凯
        第二至四季节目主题曲</p>
    <p>《宝藏就是你》
        蒲熠星、齐思钧、郭文韬（文韬）、石凯、杨迪、庞博
        第五季节目主题曲</p>
    <p>《南波万的聚会》
        郭文韬（文韬）、齐思钧、蒲熠星、何运晨、曹恩齐、唐九洲、石凯
        第六季节目主题曲</p>
    <p>《要做就做南波万》
        叶逊敏（火树）、郭文韬（文韬）、齐思钧、蒲熠星、何运晨、曹恩齐、唐九洲、黄子弘凡、石凯
        第七季节目主题曲</p>
    <a href="#目录">返回目录</a>
    <h3 id="播出信息">播出信息</h3>
    <div><span>季数---</span>
        <span>播放平台---</span>
        <span>播出信息</span>
    </div>
    <div>第一季
        芒果TV
        2019年11月3日起每周日12:00
        （第十四期于2020年1月30日播出）</div>
    <div>第二季
        2020年4月23日起每周四12:00
        （先导片于2020年4月9日播出）</div>
    <div>第三季
        2020年11月5日-12月17日每周四12:00
        （第十五、十六期于2021年4月1日、8日播出）
        2020年12月25日-2021年1月29日每周五18:00
        （第七期于2020年12月27日播出；第十三、十四期于2021年2月17-18日播出）</div>
    <div>第四季
        2021年4月15日-4月29日每周四12:00
        2021年5月5日起每周三12:00</div>
    <div>第五季
        2021年12月2日起每周四12:00；2022年1月7日起隔周周五12:00加更播出
        （超前企划于2021年11月11日播出；先导片、第一期于11月25日18:00播出）</div>
    <div>第六季
        2022年12月14日起每周三12:00
        （先导片于2022年12月12日18:00播出）</div>
    <div>第七季
        2023年11月25日起每周六中午12:00</div>
    <a href="#目录">返回目录</a>
</body>

</html>