01.前端与HTML
文章目录
1.HTML(HyperText Markup Language)
- **HyperText：**超文本，个人理解为超越文本的表达形式(?)，即图片、标题、链接、表格等表现形式。
- **Markup Language：**标记语言，用标签来表示格式，可以在标签上设置属性。
<img src="photo.jpg" />
<!-- 这是注释，个人习惯把注释写在对应内容的正下方 -->
比如上面这个就是一个简例，其中src就是一个属性的名字，而后面被双引号括起来的photo.jpg就是对应的属性值。
下面来看一个完整的例子：
<!DOCTYPE html>
<!-- doctype不分大小写，这里是VSCode默认生成的大写 -->
<html lang="zh-CN">
<!-- html标签是根标签，其它的标签都写在html里面 -->
<!-- lang表示当前页面所使用的语言，可以被谷歌翻译识别到 -->
<head>
<!-- head标签里面存放的都是不需要直接提供给用户的元数据，比如页面标题、编码 -->
<meta charset="UTF-8">
<!-- charset后面的是文件编码，UTF-8是通用编码，也是最常用的 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 这是VSCode默认生成的标签，作用是通过meta标签禁用缩放 -->
<title>页面标题</title>
<!-- title标签的内容会显示在浏览器的标签页一栏里，一般在浏览器的最上方 -->
</head>
<body>
<!-- body标签就是写网页主要内容的地方了 -->
<h1>一级标题</h1>
<!-- h1标签：与之类似的还有h2、h3、h4...表示标题的大小 -->
<p>段落内容</p>
<!-- p标签：顾名思义，就是用来写段落的 -->
</body>
</html>
这是一个在VSCode中生成的基本格式(我修改了部分内容)，可以通过代码的颜色来类比上面的简例。
※关于标签：
HTML标记包含标签（及其属性）、基于字符的数据类型、字符引用和实体引用等几个关键部分。HTML标签是最常见的，通常成对出现，比如
<h1>与</h1>。这些成对出现的标签中，第一个标签是开始标签，第二个标签是结束标签。两个标签之间为元素的内容，有些标签没有内容，为空元素，如<img>。——节选自Wiki
HTML 元素通过“标签”（tag）将文本从文档中引出，标签由在“
<”和“>”中包裹的元素名组成，HTML 标签里的元素名不区分大小写。也就是说，它们可以用大写，小写或混合形式书写。例如，<title>标签可以写成<Title>，<TITLE>或以任何其他方式。然而，习惯上与实践上都推荐将标签名全部小写。——节选自MDN
※关于元数据：
网页通常包含元标签形式的元数据。元标签（
<meta ……>）中的叙述和关键字一般用于描述网页的内容。标记元素也指示页面描述、关键字、文件作者以及最后修改的时间。网页元数据可帮助搜索引擎和用户，查找他们需求的网页类型。——节选自Wiki百科
Metadata——元数据，简单的来说就是描述数据的数据。例如，一个 HTML 文件是一种数据，但 HTML 文件也能在 `` 元素中包含描述该文档的元数据，比如该文件的作者和概要。
——节选自MDN
2.DOM树
※关于DOM：
文档对象模型（英语：Document Object Model，缩写DOM），是W3C组织推荐的处理可扩展置标语言和超文本标记语言的标准编程接口。
——节选自Wiki百科
DOM（Document Object Model——文档对象模型）是用来呈现以及与任意 HTML 或 XML 文档交互的 API。DOM 是载入到浏览器中的文档模型，以节点树的形式来表现文档，每个节点代表文档的构成部分（例如：页面元素、字符串或注释等等）。
——节选自MDN
DOM树是由文档转换成的一种树结构，树中的每一个结点叫做DOM结点。如下图所示：
3.HTML语法
- 标签和属性不分大小写，但推荐小写(大写一般用来命名自己写的组件)；
- 空标签可以不闭合，如
input、meta； - 属性值推荐使用双引号括起来；
- 某些属性值可以省略，比如
required、readonly。
4.HTML标签
1.标题标签：h1~h6
<h1>01.前端与HTML</h1>
<h2>·HTML(HyperText Markup Language)</h2>
<p>超文本标记语言</p>
<h2>·DOM树</h2>
<p>文档对象模型</p>
<h2>·HTML语法</h2>
<h2>·HTML标签</h2>
<h3>标题标签</h3>
<p>h1~h6</p>
<h3>...</h3>
到现在你应该已经注意到了，这篇文章就使用了很多类似于标题标签的表现形式，只不过我是用Markdown格式写的文档，里面的语法会有些许不同。
2.列表标签：ol、ul、dl
<h2>2023年5月二次元手游“全球总收入”排行榜</h2>
<ol>
<!-- ol标签为有序列表 -->
<li>《崩坏：星穹铁道》 458148万元</li>
<li>《原神》 206703万元</li>
<li>《明日方舟》 44561万元</li>
<li>《火影忍者疾风传》 33084万元</li>
<li>《命运-冠位指定》 32706万元</li>
</ol>
<h2>米哈游旗下有哪些游戏？(截至2023年7月)</h2>
<ul>
<!-- ul标签为无序列表 -->
<li>《崩坏学园2》</li>
<li>《崩坏3》</li>
<li>《原神》</li>
<li>《未定事件簿》</li>
<li>《崩坏：星穹铁道》</li>
<li>《绝区零》(未上线)</li>
</ul>
<h2>艾尔海森面板推荐</h2>
<dl>
<!-- dl标签为键-值对列表(key-value) -->
<dt>基础属性：</dt>
<!-- dt标签和dd标签是可以有多对多的关系的，多个dt也是可以对应一个dd的 -->
<dd>等级：90级</dd>
<dd>暴击率：80%+</dd>
<dd>爆击伤害：200%+</dd>
<dd>元素精通：500左右</dd>
<dt>武器：</dt>
<dd>裁叶萃光(90级)：88%爆击伤害</dd>
<dt>圣遗物：</dt>
<dd>1.饰金之梦(4件套)</dd>
<dd>2.深林的记忆(2件套)+饰金之梦(2件套)</dd>
<dd>3.深林的记忆(4件套)</dd>
</dl>
3.链接标签：a
<a href="https://www.mihoyo.com/">
<!-- href为超链接的引用地址 -->
<!-- 作用：直接跳转到米哈游官网 -->
米哈游官网
</a>
<a href="https://www.mihoyo.com/" target="_blank">
<!-- target="_blank"表示在新窗口打开 -->
<!-- 作用：在新标签页中打开米哈游官网 -->
米哈游官网
</a>
※关于**target**：
target属性使用说明：
值 说明 _self默认值，在与当前 SVG 图像相同的浏览上下文中，当前 SVG 图像被链接的内容替换。 _parentSVG 图像的直接父浏览上下文将被链接的内容替换（如果存在），并且可以从此文档中安全地访问它。 _top完整活动窗口或选项卡的内容将由链接的内容替换（如果存在），并且可以从此文档中安全地访问。 _blank如果此文档可以安全地显示，则需要一个新的未命名窗口或标签来显示链接的内容。如果用户代理不支持多个窗口/选项卡，则结果与_top 相同。 _<XML-Name>指定用于显示链接内容的浏览上下文的名称（选项卡，内联框架，对象等）。如果具有该名称的上下文已经存在，并且可以从此文档中安全地访问，则可以重新使用该上下文，替换现有内容。如果不存在，则创建它（与’_blank’相同，但现在有了一个名称）。该名称必须是有效的 XML 名称 [XML11]，并且不能以下划线（U + 005F LOW LINE 字符）开头，以满足来自 HTML 的有效浏览上下文名称的要求。 _replace(快被废弃)使用 _self以取代目前的 SVG 文件。——节选自MDN
4.多媒体标签：img、audio、video
<img src="https://upload-bbs.miyoushe.com/upload/2022/11/06/332601446/fc98510a350a4dabe2acf01bd0f60f45_789173623961398745.jpg?x-oss-process=image/auto-orient,0/interlace,1/format,jpg"
alt="这是爱莉希雅，她很可爱♡"
width="885"
height="664"
/>
<!-- img标签为图片标签，可以通过url或者本地路径显示图片 -->
<!-- alt是图片没能成功加载时出现的文字，是图片的描述信息 -->
<!-- width：顾名思义，是宽度 -->
<!-- height：顾名思义，是高度 -->
<audio
src="http://music.163.com/song/media/outer/url?id=1971144922.mp3"
controls
></audio>
<!-- audio标签为音频标签，简而言之，就是听歌(bushi) -->
<!-- controls：使用浏览器默认的音频播放器 -->
<video
src="https://因为实在找不到合适的视频所以就用这个代替吧~.mp4"
controls
></video>
<!-- video标签为视频标签，顾名思义，就是视频 -->
5.输入标签：input
<input placeholder="请输入用户名">
<!-- 这里input后面是有一个type属性的，但type默认值为text，就直接省略了 -->
<!-- placeholder为占位符，即输入框中没有输入任何内容时显示的文字 -->
<input type="range">
<!-- type：输入的类型 -->
<!-- range会显示为一个滑块-->
<input type="number" min="1" max="10">
<!-- number：顾名思义，数字 -->
<input type="date" min="2023-07-21">
<!-- date：顾名思义，日期 -->
<textarea>我永远喜欢爱莉希雅！！！爱门！！！(双手合十)</textarea>
<!-- textarea标签：一个多行纯文本编辑控件，当你希望用户输入一段相当长的、不限格式的文本，例如评论或反馈表单中的一段意见时，这很有用。 -->
<p>
<label>
<!-- label标签：表示用户界面中某个元素的说明。 -->
<input type="checkbox" />爱莉希雅
<!-- checkbox：复选框 -->
</label>
<label>
<input type="checkbox" />往世的飞花
</label>
</p>
<p>
<lable>
<input type="radio" name="sport" />粉色妖精小姐♪
<!-- radio：单选框 -->
<!-- name：表单的控件名称，作为键值对的一部分与表单一同提交 -->
</lable>
<lable>
<input type="radio" name="sport" />真我·人之律者
</lable>
</p>
<p>
<select>
<!-- select标签表示一个提供选项菜单的控件 -->
<option>爱莉希雅(上)</option>
<!-- option标签就是选项 -->
<option>爱莉希雅(中)</option>
<option>爱莉希雅(下)</option>
</select>
</p>
※关于**placeholder**：
对
text、search、url、tel、password和number有效。placeholder属性可向用户提供有关该字段中需要什么样的信息的简短提示。它应该是一个单词或短语来说明预期的数据类型，而不是说明性消息。文本中不得包含回车符或换行符。例如，某个字段需要收集用户的姓氏，其标签为“First Name”，一个适合的占位文字可能是“如 Mustafa”。——节选自MDN
※关于**range**：
range类型的 `` 元素允许用户指定一个数值，该数值必须不小于给定值，并且不得大于另一个给定值。但是，其精确值并不重要。通常使用滑块或拨号控件而不是像 number 输入类型这样的文本输入框来表示。 如果用户的浏览器不支持
range类型，它将回退并将其视为text输入。——节选自MDN
input的type属性值有很多，这里只提一些常用的：
| type值 | 效果 | 额外标签 |
|---|---|---|
range | 滑块条 | —— |
number | 数字输入框 | min设置最小值，max设置最大值(但还是可以输入范围外的数) |
date | 日期输入框 | min设置最早日期 |
checkbox | 复选框 | —— |
radio | 单选框 | name用于标记，不同name的选项只能选一个 |
6.文本表示标签：
1>引用标签：blockquote、cite、q
| 标签 | 作用 | 属性 |
|---|---|---|
blockquote | 长引用 | cite：标注引用的信息的来源文档或者相关信息的 URL |
cite | 短引用 | —— |
q | 加双引号 | —— |
<blockquote cite="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/blockquote">
<p>通常在渲染时，这部分的内容会有一定的缩进</p>
</blockquote>
<p>
这篇文章也用到了很多<q>引用</q>，它们大多来自<cite>MDN</cite>和<cite>Wiki</cite>
</p>
2>代码标签：code
这个标签的效果已经在本文中充分体现了，本文中出现的代码除了在代码块中的部分，全都是用了和code标签一样的效果来展示，包括这句话里面的“code”，code标签中的字与正常字体会有一些区别，也就是等宽字体。如果要展示多行代码，可以在code外面套个pre标签，就像下面这样：
<pre><code>
int main()
{
cout<<"Hello World!"<<endl;
return 0;
}
</code></pre>
3>强调标签：strong、em
这两个标签都是对文本进行强调，strong主要用于强调内容的重要性，而em主要用于强调语气的重读。不过实际上，它们具体的体现形式其实就是粗体字和斜体字。
<p>
这是一句话，其中<strong>粗体字</strong>会用strong标签强调，而<em>斜体字</em>会用em标签强调。
</p>
5.内容划分
这里直接放图比较直观(好吧其实是我懒~)：
6.语义化
其实这个总结起来很简单：开发者写的代码要做到**“见文知意”**。(这个概念是原来我学C++的时候老师要求的，现在看来应该是在编程语言的范围内都适用)
代码语义化的好处：
- 提高代码可读性
- 提高可维护性
- 搜索引擎优化
- 提升无障碍性
(如果可以遵循同一个书写规范，共同开发的效率会高不少~)
HTML要传达的不是样式(这是CSS的工作)，而是内容！
如何做到语义化？
- 了解每个标签和属性的含义
- 思考什么标签最适合描述这个内容
- 不使用可视化工具生成代码(有一说一，这东西的效率说不定还不如你~)
7.总结
HTML只是基础中的基础，没什么好总结的(其实是因为我懒~)
化
其实这个总结起来很简单：开发者写的代码要做到**“见文知意”**。(这个概念是原来我学C++的时候老师要求的，现在看来应该是在编程语言的范围内都适用)
代码语义化的好处：
- 提高代码可读性
- 提高可维护性
- 搜索引擎优化
- 提升无障碍性
(如果可以遵循同一个书写规范，共同开发的效率会高不少~)
HTML要传达的不是样式(这是CSS的工作)，而是内容！
如何做到语义化？
- 了解每个标签和属性的含义
- 思考什么标签最适合描述这个内容
- 不使用可视化工具生成代码(有一说一，这东西的效率说不定还不如你~)
7.总结
HTML只是基础中的基础，没什么好总结的(其实是因为我懒~)
扫一扫
3408
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
