html 学习

2026-03-312026-03-31

学习网址

入门模块

浏览器是一个接收并显示网页的软件，搜索引擎则是一个帮助用户从其他网站中寻找网页的网站。

高级搜索技巧

搜索ant fish cheese

输入"ant fish cheese" 将仅返回包含该确切短语的结果，搜索词不会被分词
输入"ant cheese" -fish 将返回含 ant和/或 cheese但不包含 fish的结果
输入ant OR cheese将返回质保函一个词的结果，但只在google有效

-intitle:cheese仅返回页面主标题中含"cheese"的结果

文件名用小写，不带空格，使用连字符而非下划线

网站的结构：

index.html：包含主页内容，也就是用户第一次访问网站是看到的文字和图片
images文件夹：包含网站里的所有图片
styles文件夹：包含为内容提供样式的CSS代码
scripts文件夹：包含所有用于向网站添加交互功能的Javascript带阿米

字体

和图片一样，很多字体都受版权保护，也就是说，你不可以在你的网站上随意使用它们。Google Fonts 是 Google 旗下的提供许多字体许可的 Web 服务。

选好字体后，你有两种主要的使用方式：

在你的代码中添加一个从 Google 服务器加载这个字体的引用。
将字体文件下载到你的系统，自行托管这个文件，并在你网站的代码中使用托管的副本文件。

另一个选择是使用安全 Web 字体，如 Arial、Times New Roman、Courier New。

简单语法

<h1>一级标题</h1>
<h2>二级标题</h2>

<p>这是一个段落</p>

<ul>
    <li>有序列表1</li>
    <li>有序列表2</li>
</ul>

<ol>
    <li>无序列表1</li>
    <li>无序列表2</li>
</ol>

<a href="https://jambitx11.github.io">这是一个链接</a>

渲染效果：

一级标题

二级标题

这是一个段落

有序列表1
有序列表2

无序列表1
无序列表2

<a href="https://jambitx11.github.io">这是一个链接 </a>

测试：高级HTML文本

Advanced text semantics

Let's start with a quote:

HTML, Hypertext Markup Language is by default accessible, if used correctly.

CSS, Cascading Style Sheets, can also be used to make web pages more, or less, accessible.

Chemical Formulae: H₂O (Water), C₂H₆O (Ethanol).

Dates: December 25^th 2019 (Christmas Day), November 2^nd 2019 (Día de los Muertos).

html 代码：

<h1>Advanced text semantics</h1>

<p>Let's start with a quote:</p>

<blockquote cite="666">
    <p>
        <abbr title="Hypertext Markup Language">HTML<\abbr>, Hypertext Markup Language is by default accessible, if used correctly.
    </p>
</blockquote>

<p>
    <abbr title="Cascading Style Sheets">CSS</abbr> can also be used to make web pages more, or less, accessible.
</p>

<p>Chemical Formulae: H<sub>2</sub>O (Water), C<sub>2</sub>H<sub>6</sub>O (Ethanol).</p>

<p>
Dates: 
<time datatime="2019-12-25">December 25<sup>th</sup> 2019</time> (Christmas Day), 
November 2<sup>nd</sup> 2019 (Día de los
Muertos).
</p>

HTML 元信息

<head></head>中的信息是不会显示在web浏览器的，他包含了诸如页面的<titla>、指向CSS的连接、指向自定义网页图表的连接和其他的元数据

添加标题

这个标题指整个html文档的标题

``` html
<!DOCTYPE html>
<html lang="en-US">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>&lt;title&gt; element</title>
</head>
<body>
    <h1>&lt;h1&gt; element</h1>
</body>
</html>
```

<: 小于号的转义字符(less than) >: 大于号的转义字符(greater than) &amp: ampersand，就是&

元数据：元素

元数据就是描述数据的数据，有很多不同种类的<meta>元素可以被包含进页面的<head>元素，类型过多，先了解一点点

指定文档中的字符编码

``` html
<meta charset="utf-8" />
```