01.前端与HTML

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结点。如下图所示：
image

3.HTML语法

  1. 标签和属性不分大小写，但推荐小写(大写一般用来命名自己写的组件)；
  2. 空标签可以不闭合，如input、meta；
  3. 属性值推荐使用双引号括起来；
  4. 某些属性值可以省略，比如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 图像被链接的内容替换。
_parent SVG 图像的直接父浏览上下文将被链接的内容替换（如果存在），并且可以从此文档中安全地访问它。
_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、email、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.内容划分

​ 这里直接放图比较直观(好吧其实是我懒~)：
image

6.语义化

​ 其实这个总结起来很简单：开发者写的代码要做到“见文知意”。(这个概念是原来我学C++的时候老师要求的，现在看来应该是在编程语言的范围内都适用)

​ 代码语义化的好处：

  • 提高代码可读性
  • 提高可维护性
  • 搜索引擎优化
  • 提升无障碍性

​ (如果可以遵循同一个书写规范，共同开发的效率会高不少~)

​ HTML要传达的不是样式(这是CSS的工作)，而是内容！

​ 如何做到语义化？

  • 了解每个标签和属性的含义
  • 思考什么标签最适合描述这个内容
  • 不使用可视化工具生成代码(有一说一，这东西的效率说不定还不如你~)

7.总结

​ HTML只是基础中的基础，没什么好总结的(其实是因为我懒~)

posted @ 2023-08-13 20:17  杨与S8  阅读(4)  评论(0)  编辑  收藏  举报