史上最简洁的HTML学习笔记 (一) 基本框架和知识点

最新推荐文章于 2025-03-04 00:07:52 发布

DackSnowden

最新推荐文章于 2025-03-04 00:07:52 发布

阅读量2.8k

点赞数 6

分类专栏： HTML/CSS 文章标签： html html5 css

本文链接：https://blog.csdn.net/qq_26913237/article/details/113739660

版权

HTML/CSS 专栏收录该内容

1 篇文章

订阅专栏

HTML 基本框架和知识点

The Head Section 头部

The Head Section 主要用来给浏览器和搜索引擎提供信息。

在 VSCode 中输入 ! 然后按下 Tab 就可以快速创建 HTML Boilerplate （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>
  
</body>
</html>

lang 页面语言

<html lang="en">

lang用来描述页面语言，中文规范是zh-cmn-Hans，但也常见zh-CN 。

meta 元数据

必要元数据

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

charset，字符编码集是各种文字和符号的总称，包括各国家文字、标点符号、图形符号、数字等。通常使用 UTF-8，这是最全面的字符集。除此之外还有很多，例如ASCII等。
viewport，可视窗口大小，用来显示网页的那部分区域。
viewport 后面的content内容是为了确保获得最佳显示而设定的（目前不做深究）。
以上两点是 HTML 基本框架必须包括的两个元数据。

可选元数据

<meta name="keywords" content="HTML, CSS">
<meta name="desription" content="...">
<!-- 还有更多，用到再查 -->

keywords，过去常用来给搜索引擎提供关键词索引，但现如今好像过时了，不过仍然可用。
description，用来描述网页内容，搜索引擎会根据提供的内容展示在其页面中。例如百度搜索结果页面中，某一个标题下的描述内容。

VSCode 小技巧：

输入 meta:desc 即可快速补全标签

title 网页标题

<title>Document</title>

title，描述页面标题。

Text 文本

p 标签以及不建议使用的标签

I love to teach you HTML!

I love to teach you HTML!

I love to teach you HTML!

<p>I love to teach you HTML!</p>
<p>I love to teach you <em>HTML</em>!</p>
<p>I love to teach you <i>HTML</i>!</p>
<p>I love to teach you <strong>HTML</strong>!</p>
<p>I love to teach you <b>HTML</b>!</p>

p，常规文本标签。
em，强调标签，通常用来强调HTML文档中重要的内容，但是不意味着需要强调就使用该标签。因为这个标签主要是用来给搜索引擎快速索引用的。任何样式都得使用 CSS 完成，这样才是规范的作法！
i，意大利斜体标签，改变字体为意大利斜体。
strong，粗壮标签，通常用来强调非常重要或非常紧急的内容，同理是给搜索引擎使用的。
b，粗体标签，加粗字体。
以上除了 p 都不建议使用。

VSCode 小技巧：

选中要包裹住的文本，按下 ctrl + p，输入>warp，然后输入要用来包裹住文本的标签，最后回车即可。

Heading 标签

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

从 h1 到 h6 相当于是一级标签到六级标签的意思。不同级别的字体样式不一样，但是！不可以为了改变样式来用这些标签，所有样式必须在 CSS 中实现。
为了规范，一个页面只允许有一个 h1 标签。
为了规范，这些标签不允许跳级。
总得来说，像写毕业论文一样使用这些文本标签即可，那绝对不会错。

Entities 实体

实体编码

I love to teach you <HTML>!

<p>I love to teach you &lt;HTML&gt;!</p>

为了让 <HTML> 正常显示，就要用到实体编码，十分类似于转义字符的感觉。
实体编码通常以 & 开头，以 ; 结尾。
代码框中的 lt 本意是 less than 的缩写， gt 是 greater than 的缩写（这样一来就非常好记忆了）。
还有更多实体编码，但不需要记忆，例如 © 是 copy，更多可以百度或谷歌 html entities 。

乱数假文

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate voluptatum vero sapiente, eveniet natus dolorum qui iure voluptatibus maiores at ad nemo odio sunt dolores laboriosam quod, iusto ullam aliquid! Excepturi, recusandae fugit? Est nam delectus unde, sapiente ex minima possimus alias sint architecto eveniet iste aliquid tenetur repellat consectetur.

<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate voluptatum vero sapiente, eveniet natus&nbsp;dolorum qui iure voluptatibus maiores at ad nemo odio sunt dolores laboriosam quod, iusto ullam aliquid! Excepturi, recusandae fugit? Est nam delectus unde, sapiente ex minima possimus alias sint architecto eveniet iste aliquid tenetur repellat consectetur.
</p>

Lorem ipsum，中文又称“乱数假文”，是指一篇常用于排版设计领域的拉丁文文章，主要的目的为测试文章或文字在不同字型、版型下看起来的效果，通常网站还没建设好时会出现这段文字
输入 lorem + 数字（你要生成的词数）然后按下 enter 或 tab ，例如lorem50。
在生成的乱文中，若想要 natus dolorum 出现在同一行上而不是默认边缘换行的话，就使用 nbsp 实体编码。
nbsp ，None-breaking Space，不间断空格，nbsp 连接的两个单词将在同一行上显示，强制不在这俩词中间换行。

总结常用的实体编码

&lt; &gt; &copy; &nbsp;

Hyperlinks 超文本

本小节代码在CSDN中无法展示效果。

<a herf="http://fancyshawn.com/" target="_blank"></a>
<a herf="#section-1"></a>
<h1 id="section-1">
    这是一句很长很长的标题
</h1>

a，Anchor，标签可以是超链接或锚。
herf，Hypertext Reference，意思是指定超链接目标的URL。href 属性的值可以是任何有效文档的相对或绝对URL，包括片段标识符和JavaScript代码段。
相对路径，…/coffee
绝对路径，fancyshawn.com/coffee
target，一般跟在跳转页面的标签中，内容输入 _blank 意思是打开新的标签页。
锚点，用于页面内定点定位（点击就自动滑倒对应位置），首先得创建锚点，选择一个要定位的标签，赋予 id=“section-name”，然后在 a 标签中输入 #section-name 即可。（若留空只有#，则跳回页面顶部）

Images 图像

可收藏素材网站：unsplash.com

<img src="image/coffee.jpg" alt="A coffee mug on a table." style="object-fit: cover"/>

img，Image，图像标签一般使用自关闭 < / >，现如今的语法已经可以不用写自关闭。（但是写React的时候好像还是得写，所以养成习惯）
scr，Scource，图像来源，填入相对或绝对路径都可以。
alt，Alter，文字描述，用于无法正确加载图片的时候显示，同时还可以帮助搜索引擎了解我们放在这里的图片是什么，强烈建议写入有意义的内容。
object-fit，CSS样式之一，填入 cover 可以让图片不被拉伸变形。

Video and Audio 音视频

可收藏素材网站：pexel.com

<video contorls autoplay loop src="video/ocean.mp4">Your browser dosen't support video component.</video>
<audio contorls autoplay loop src="video/大风吹.mp3">Your browser dosen't support audio component.</audio>

video 和 audio 的用法类似，故这里只细讲一个。
controls 、autoplay 、loop 三个选项分别代表了控件、自动播放和循环播放。其都是 Boolean 类型，**但是不可以赋值 true 或 false ！**这里只要写上该选项就是 true ，不写默认是 false 。
在该标签中间可以写内容，当浏览器不支持该组件时就会显示。

Lists 列表

Unordered List 无序列表

About me
Courses

Contact me

<ul>
	<li>About me</li>
    <li>Courses</li>
</ul>
<ul style="list-style-type: square;">
    <li>Subscribe</li>
</ul>
<ul style="list-style-type: none;">
    <li>Contact me</li>
</ul>

ul，Unordered List，无序列表，通常可以做成导航栏或者放图片什么的。
li，List Item，列表元素，装下你的内容。
相关 CSS 样式 list-style-type: square; 列表前的小圆点就会变成方框，改成 none 就没有了。

Ordered List 有序列表

Preheat the oven.
Place the ingridents on the crust.
Put the pizza in the oven for 20 minutes.

<ol>
	<li>Preheat the oven.</li>
    <li>Place the ingridents on the crust.</li>
    <li>Put the pizza in the oven for 20 minutes.</li>
</ol>

ol，Ordered List，有序列表，跟无序类似，只不过每个元素都有序号了。

Description List 描述性列表

HTML

Hypertext Markup Language

CSS

Cascading Stylesheets1

Cascading Stylesheets2

<dl>
    <dt>HTML</dt>
    <dd>Hypertext Markup Language</dd>
    <dt>CSS<dt>
    <dd>Cascading Stylesheets1</dd>
    <dd>Cascading Stylesheets2</dd>
</dl>

dl，Description List，描述列表。
dt，Description Title，描述标题。
dd，Description Detail，描述内容。

VSCode 小技巧：

输入 ul>li*3 然后按下 enter 或 tab 即可快速生成代码，这叫禅意编码 :p

Tables 表格

Expenses
Category	Amount
Marketing	$100
Accounting	$100
Total	$300

<table>
    <thead>
        <tr>
        	<th colspan="2">Expenses</th>
        </tr>
        <tr>
           	<th>Category</th>
       		<th>Amount</th>
        </tr>
    </thead>
	<tbody>
    	<tr>
            <td>Marketing</td>
            <td>$100</td>
        </tr>
        <tr>
            <td>Accounting</td>
            <td>$100</td>
        </tr>
    </tbody>
    <tfoot>
    	<tr>
        	<td>Total</td>
            <td>$300</td>
        </tr>
    </tfoot>
</table>

<style>
    table, 
    td,
    th {
        border: 1px solid grey;
        border-collapse: collapse;
        padding: 5px;
    }
    
    tfoot {
        text-align: left;
    }
</style>

table，表格标签。
tr，Table Row，表行。
th，Table Heading，表格标题列。
td，Table Data Shell，表格数据列。
thead，Table Head，与上面 th 不一样，这个是表的名称（一般是为了方便搜索引擎，结构也更明了）。有了 thead 以后就需要把 tr>th 标签放在 thead 里面。
tbody，Table Body，同 thead 功能类似，规则同理。
tfoot，Table Footer，同 thead 功能类似，规则同理。
相关 CSS 样式：border、border-collapse、padding 分别是指表格外边框、表格空隙以及内间距（应用在文字上，是文字与边框的距离）。其中 th 有个 colspan 是指占列宽，默认是1。tfoot 的 text-align 是指文字对齐方向。

Containers 容器

div 标签

这里是容器装的内容

<div class="product">
    <p>这里是容器装的内容</p>
</div>

<style>
    .product {
        background-color: gold;
    }
</style>

div，容器标签，属于 Block-level Element 块状元素，这类标签总是默认开始于新的一行并填充整个行空间，除非用 CSS 样式改变。
相关 CSS 样式，background-color 意味改变背景颜色。

span 标签

Lorem

ipsum dolor sit amet consectetur adipisicing elit.

Lorem ipsum dolor sit amet consectetur adipisicing elit.

<p><div class="heightlight">Lorem</div> ipsum dolor sit amet consectetur adipisicing elit.</p>
<p><span class="heightlight">Lorem</span> ipsum dolor sit amet consectetur adipisicing elit.</p>

<style>
    .heightlight {
        background-color: gold;
    }
</style>

我们想要给 Lorem 一个强调，但是按照第一行的实现，我们会得到一个换行的强调。这并不是我们预计的结果。因为 div 本身是一个 Block-level Element，每次都开始于新的一行。这时候就引入了 span 标签。
span，容器标签，通常装文本，属于 Inline Element 内行元素，只在行内发生作用，设置宽高不起作用，不会影响文字内容，使其换行等，同时竖直方向和间距也不起作用。

Semantic Elements 语义元素

通常情况下，语义元素能够清楚的描述其意义给浏览器和开发者以及搜索引擎。

Heading

Published January 1 2021 05:00pm

<article class="article">
	<h1> Heading</h1>
    <p>Published <time datetime="2021-01-01 17:00">January 1 2021 05:00pm</time></p>
    <p>
        <mark>Lorem</mark> ipsum dolor sit amet consectetur adipisicing elit. Voluptate voluptatum vero sapiente, eveniet natus&nbsp;dolorum qui iure voluptatibus maiores at ad nemo odio sunt dolores laboriosam quod, iusto ullam aliquid! Excepturi, recusandae fugit? Est nam delectus unde, sapiente ex minima possimus alias sint architecto eveniet iste aliquid tenetur repellat consectetur.
    </p>
    <figure>
    	<img src="" alt="">
        <figcaption>My coffe this morning</figcaption>
    </figure>
</article>

article 文章标签，通常可以装论坛的帖子、评论、产品展示等。
figure 特征标签，标签规定独立的流内容（图像、图表、照片、代码等等）。figure 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。通常还要使用 figcaption 为特征添加标题描述，即上文所示。
mark 高亮标签，自带的高亮效果，不用像上一章那样再添加 CSS 样式了。
time 时间标签，显示效果与常规文字无区别，通常会加上 datetime 选项，其格式为“2021-01-01 17:00”，必须是两位的月份和日期。

Structuring a Web Page 结构化一个页面

<header>
      <nav>
        <ul>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </nav>
    </header>
    <main>
      <section>
        <h2>Products</h2> 
        <article></article>
        <article></article>
        <article></article>
      </section>
      <section>
        <h2>Testimonial</h2>
        <article>
          <section></section>
          <section></section>
        </article>
        <article></article>
      </section>
    </main>
    <aside></aside>
    <footer>
      <nav>
        <ul></ul>
      </nav>
    </footer>