HTML日记

六月 21, 2021

HTML日记

谨以此来记录自己学习HTML的过程

Day0：HTML 文档

作为一个CS人，最最最重要的就是查阅文档的能力。在这里，给大家推荐一个我自己常用的参考手册：
HTML 5 参考手册

在这里，顺便说一说自己对于那些前端课程之类的东西的看法吧。

课程的主要作用就是给想要去学习的人提供一个教课的环境，有人言传身教的教你肯定是好的。但是在我的角度来说，在CS行业，学习一门新的东西最好的还是实践。当然这东西还是需要看人。视频可以作为辅助，但是一定还是需要自己手动实践，参考文档。

Day1：HTML Basic

第一天，首先需要了解的肯定是HTML的基本框架。
我自己总结如下：

<!DOCTYPE HTML>
<html>
  <head>
    xxx
  </head>
  <body>
    xxx
  </body>
</html>

当然自己总结的不一定是正确的，在日后的学习中，我会根据日后的学习来调整之前的总结。

首先说明一下第一个标签：

在HTML中，这个是注释符。当然在现代ide里，注释都是一键操作了。
其次是这个标签
<!DOCTYPE HTML>
我们需要分开解读。<!DOCTYPE>是用来定义文档类型，而后面的HTML则表明文档类型是HTML文件。
接下来是<html>、<head>、<body>标签
<html>标签可以告知浏览器自身是一个HTML文档。<html>与</html>标签限定了文档的开始点和结束点。文档的头部由<head>定义，主体由<body>定义。

<head>标签，最基本的用法如下：

<head>
  <title>文档的标题</title>
  <!-- 在head标签里，<title>标签是唯一必须的元素 -->
</head>

其他适配于<head>的标签如<base>，<link>，<meta>，<script>，<style>，这些我们日后再说。

<body>标签，包含文档的所有内容，包括但不限于文本、超链接、图片、表格等。

另外需要注意：<html>，<head>，<body>，<title>标签都是需要CloseTag（结束标签）的，也就是说需要对应的</xxx>来与之对应。而<!DOCTYPE>则没有CloseTag，之后也会遇到许多这样的标签。

Day2：Some Element in “body” Element

第二天，今天来学习一些比较简单的标签。
<a>，<br>，<p>，<button>，<em>，<strong>，<h1> to <h6>
按照顺序来说。

<a>是超链接标签，用法如下
<a href="url">超链接的描述</a>
这里要注意的点有两个，一个是<a>内部要使用href，而不是src，另一个是<a>标签是需要结束标签的(</a>)。
<br>是一个标准的换行符。
没有什么可以说的，但是需要注意几个点：
<br>是一个空标签，也就是意味着它不需要结束标签。因此<br></br>是错误的。
<br>只是一个简单的开始新的一行，而当浏览器遇到<p>标签时，通常会在相邻的段落之间插入一些垂直的间距。因此，请使用<br>来输入空行，而不是分割段落。
<p>标签定义段落。
需要注意的是<p>元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定。<p>元素也是需要结束标签的。
exp： <p>这是段落</p>
在该元素中，我们可以使用align属性，用来规定段落中文本的对齐方式。但是不推荐。
<button>标签定义一个按钮。
<button>拥有两个常用的属性，name属性和type属性。
name属性规定按钮的名称，type属性规定按钮的类型，分别有button，submit，reset三种类型。
exp：<button type="button">Login</button>
需要注意的一个点是<button>和<input type="button" value="xxx">的区别。
<em>和<strong>放在一起说。
根据字面意思，<em>表示强调内容，<strong>表示重要内容。
exp：<em>emphasis</em>, <strong>strong</strong>, <em><strong>emphasis-strong</strong></em>

-> emphasis, strong, emphasis-strong

<h1> to <h6>
<h1> - <h6>标签可定义标题。<h1>定义最大的标题。<h6>定义最小的标题。

<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>

Day3：”meta” Element is Important

第三天,介绍一个在第一天忘记说的东西。<meta>标签。也是一个我认为的HTML的一个非常重要的点，也是一个难点。

<meta>标签可提供有关页面的元信息（meta-information），<meta>标签的属性定义了与文档相关联的键值对。

注意：1. <meta>标签永远位于<head>内部，且没有结束标签。2. 元数据总以键值对的形式被传递。

<meta>标签必需的属性有content，可选的属性有http-equiv,name,scheme。
下面我就来分别解释。
name属性提供了键值对中的名称。通常情况下，您可以自由使用对自己和源文档的读者来说富有意义的名称。keywords是一个经常被用到的名称。它为文档定义了一组关键字。某些搜索引擎在遇到这些关键字时，会用这些关键字对文档进行分类。
类似这样的 meta 标签可能对于进入搜索引擎的索引有帮助：<meta name="keywords" content="HTML,ASP,PHP,SQL">
http-equiv属性为键值对提供了名称。并指示服务器在发送实际的文档之前先在要传送给浏览器的MIME文档头部包含键值对。
当服务器向浏览器发送文档时，会先发送许多键值对。虽然有些服务器会发送许多这种键值对，但是所有服务器都至少要发送一个：content-type:text/html。这将告诉浏览器准备接受一个HTML文档。
使用带有http-equiv属性的<meta>标签时，服务器将把键值对添加到发送给浏览器的内容头部。例如，添加：
1
2
<meta http-equiv="charset" content="iso-8859-1">
<meta http-equiv="expires" content="31 Dec 2008">
这样发送到浏览器的头部就应该包含：
1
2
3
content-type: text/html
charset:iso-8859-1
expires:31 Dec 2008
当然，只有浏览器可以接受这些附加的头部字段，并能以适当的方式使用它们时，这些字段才有意义。
content属性
content 属性提供了名称/值对中的值。该值可以是任何有效的字符串。
content 属性始终要和 name 属性或 http-equiv 属性一起使用

Day4：Some the most commonly used Element in “body” Element

见我的博客

HTML5常用的元素和属性

查看评论

1. HTML日记