文章目录
跟着大佬学前端之HTML
前言
随着时间的推移、科技的发展、社会的进步，各行业对工人的要求也越来越高。至于我们程序猿，越来越多的厂开始要求咱们具备全栈能力。最近咱大佬 @CaptinKoo 就玩上了嘛，承担起全栈的开发工作；我们单位也对前端有更多的需求，因此我决定今日起跟着@CaptinKoo学前端，一来在单位可以随时用上，二来拓宽技术栈，有空可以自己整点网站应用；拓宽技术栈总有好处滴。
学习目标
- 学习 HTML 基础概念、常用标签
- 学习常用标签的一些属性，用法。留个印象，用到再查，不必强记
工具选用
前端的常用集成工具有：VSCode、Hbuilder、IDEA、WebStorm等，无论是否初学，上述均可选用。
1. HTML 概念
HTML是什么
HTML (Hypertext Markup Language) 是用于创建网页的标记语言，称为超文本标记语言。
HTML基础结构
以下，我们用一个 HelloWorld 的例子来说明 HTML 的基础结构：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello World</title>
</head>
<body>
<!-- This is a comment -->
<p>Hello World!</p>
</body>
</html>
内容解析
我们先来解释一下上述例子的内容：
<!DOCTYPE html>标签告诉浏览器该文档是 HTML 文档。<html>标签是 HTML 文档的根元素。它包含文档中的所有其他元素。<head>标签包含有关文档的信息，例如标题、字符编码和元标签。<meta charset="UTF-8">标签指定文档的字符编码。<meta name="viewport" content="width=device-width, initial-scale=1.0">标签告诉浏览器将文档缩放到适合设备屏幕宽度的大小。<title>标签指定文档的标题。<body>标签包含文档的主要内容。<p>标签定义一个段落。接下来的学习中，我们会接触到更多不同功能的标签。<p>Hello World!</p>标签包含文本“Hello World！”。
一般情况下，我们学习与开发的过程中，主要关注<body>里的内容，及以后将要学习到的<style>、<script>等标签内容即可。关于上面解释的标签、属性等概念是什么，在下面的相关概念介绍：
相关概念
- 标签：HTML由一套标记标签组成，通常就叫标签。一个标签通常由开始标签和结束标签组成。例如，这个示例的
<body>是开始标签，</body>是结束标签，区别在于结束标签在标签名描述之前加了/。在接下来的学习中，我们会接触到自闭标签，意思是省略了结束标签的标签，例如，一个单独的<br>标签表示一个换行，省略了结束标签。有点混淆了？不用慌，常见的自闭标签只有几个，用到再查或者多练即可掌握。 - 注释：HTML 的注释由
<!-- [注释内容] -->表示，和XML的注释格式是一致的，通常我们使用IDE工具快捷键生成即可。 - 元素：元素是指一个标签开始和结束之间的所有代码。例如，上述例子中的
<p>Hello World!</p>，"Hello World!"就是<p>标签的元素。 - 属性：标签内的看似赋值的操作，称为属性。如上述例子的：
<meta name="viewport" content="width=device-width, initial-scale=1.0">，" name=“viewport” " 就是一个属性。“name” 是属性名，“viewport” 是属性值，属性值应该用双引号括起来。
2. HTML 常用标签
这一小节介绍常见标签，篇幅关系，此处选用2个标签一组来学习。
2.1 段落与标题
段落
在上文的 HelloWorld 示例中，我们的“Hello World!”文本是被p标签包裹的。p代表一个段落。段落会自动换行。
标题
标题会自动粗体，大写其中的内容，并且带有换行效果。
一般会使用<h1>到 <h6>分别表示不同大小的标题，其中，数字越小，标题越大。
示例
<body>
<!-- normal text -->
This is a normal text.
This is a normal text.
<!-- bold text -->
<p>This is a p paragraph.</p>
<p>This is a p paragraph.</p>
<!-- h1 tag -->
<h1>This is a h1 tag.</h1>
<!-- h2 tag -->
<h2>This is a h2 tag.</h2>
<!-- h3 tag -->
<h3>This is a h3 tag.</h3>
<!-- h4 tag -->
<h4>This is a h4 tag.</h4>
<!-- h5 tag -->
<h5>This is a h5 tag.</h5>
<!-- h6 tag -->
<h6>This is a h6 tag.</h6>
</body>
2.2 粗体与斜体
粗体
粗体主要由两个标签实现，b与strong标签。
b与strong标签粗体实现效果是一样的，但strong更多的是强调语义上的加重，提醒用户该文本的重要性。 在SEO（搜索引擎优化）的时候，也更加容易帮助用户找到重点的内容。一般情况下推荐使用strong。
斜体
斜体也主要由两个标签实现，i与em标签。
i是italic的缩写，仅仅表示该文本是斜体的，并不暗示这段文字的重要性。
em 是 Emphasized的缩写，虽然也是斜体，但是更多的是强调语义上的加重，提醒用户该文本的重要性。 常常用于引入新的术语的时候使用。
示例
<body>
<!-- b -->
<p><strong>This is a strong tag with strong text</strong></p>
<p><b>This is a b tag with b text</b></p>
<!-- i -->
<p><em>This is an em tag</em></p>
<p><i>This is an i tag</i></p>
<!-- strong and em -->
<p><strong><em>This is a strong and em tag</em></strong></p>
</body>
小补充：若需要复合的效果，如斜体加粗的段落，就可像上述的例子一样进行组合。
2.3 删除线与下划线
删除线
删除线也有两种标签实现，del和s，但一般情况下，由于一些浏览器不支持s标签，因此建议使用del标签。
下划线
下划线也有两种标签实现，ins和u，一般情况下，也是语义侧重的原因，不建议使用u，因此我们掌握ins即可。特别地，由于超链接的形式和下划线也很像，实际开发中，非特殊原因不建议使用下划线。
示例
<body>
<!-- del -->
<del>This text has been deleted.</del>
<br/>
<!-- s -->
<s>This text has been struck through.Not suggest to use this tag.</s>
<br/>
<!-- ins -->
<ins>This text has been inserted.</ins>
<br>
<!-- u -->
<u>This text has been underlined. Not suggest to use this tag.</u>
<br>
</body>
小补充：此处的示例，我用了br自闭标签来换行。是的，br是一个换行，且自闭标签既可以省略/，也可以将/放到标签名之后，如上述例子所示。
2.4 预格式与块
这一小节的预格式实际用到较少，了解一下即可。块是需要重点掌握的。
预格式
预格式使用的是pre标签。预格式包裹的内容，可以根据其内容自动换行，以达到“预先格式化”的效果。
块
块有两种：span 与 div。块通常结合样式进行布局。块包裹一段代码，使用同一的块样式布局即可统一布局，增加代码复用性。
- div ： 块级元素，常见的块元素 h1,table,p等
- span ： 行内元素，也称内联元素，常见的内联元素还有 img,a,strong等
块级与行内元素的直接可见的区别在于，div 自动换行，span 则不会。
示例
- 代码示例：
<body>
<!-- without pre tag -->
This is a normal text without any tag.
It won't have any formatting.
<!-- pre tag -->
<pre>
This is a pre tag.
It is used to display preformatted text.
It preserves the spaces and line breaks.
</pre>
<!-- div tag -->
<div style="background-color: yellow; margin-left:150px">
<p>
This is a div tag.
It is used to group content.
</p>
<p>It can be styled using CSS.</p>
</div>
<!-- span tag -->
<p>This is a paragraph with <span style="background-color: green; margin-left:150px">a green span</span> inside it.</p>
<!-- different of div and span -->
<div>
<p>This is a paragraph inside a div.</p>
</div>
<span>
This is a paragraph inside a span.
</span>
<span>
This is a paragraph inside a span.
</span>
</body>
- 效果示例图：
2.5 图像与超链接
图像
图像的标签是img。具体显示什么图像,图像的大小、布局，替换文字等，均用图像的属性来指定。一般若要显示不同目录的图像，使用相对路径或绝对路径。
超链接
超链接的标签是a。跳转的链接也由属性指定。
示例
<body>
<!-- img -->
<img src="../images/title.png" alt="Image"/>
<p>This is a test image is a test image </p>
<img width="200px" height="200" src="../images/title.png" alt="Image">
<p>This is an image with alt attribute and width and height</p>
<img src="image.png" alt="Image"/>
<p>This is an image ,didn't find, display alt</p>
<!-- a -->
<a href="https://www.baidu.com/">百度一下，你就知道</a>
</body>
2.6 列表与表格
列表
列表分为有序列表和无序列表，用ol和ul标签分别表示。列表标签内用li标签表示每一行。
表格
表格标签为table，由border属性设置边框。表格里th为表头，每一行为td标签，每一列为tr标签。
举例
<body>
<!-- ul -->
<ul>
<li>Java</li>
<li>Python</li>
</ul>
<!-- ol -->
<ol>
<li>Java</li>
<li>Python</li>
</ol>
<!-- table -->
<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
<td>Male</td>
</tr>
<tr>
<td>Mary</td>
<td>30</td>
<td>Female</td>
</tr>
</table>
<!-- table with border -->
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
<td>Male</td>
</tr>
<tr>
<td>Mary</td>
<td>30</td>
<td>Female</td>
</tr>
</table>
</body>
除了可以使用CSS对 table 内的元素进行样式指定，table本身的属性可提供合并单元格、自定义大小等。
<!-- table with attributes -->
<table border="1" width="100%" height="100%">
<tr>
<th colspan="3">Table Title</th>
</tr>
<tr>
<th bgcolor="#FF0000">First Name</th>
<th>Last Name</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>25</td>
</tr>
<tr>
<td rowspan="2">Jane</td>
<td>30</td>
</tr>
<tr>
<td width="50%">Mike</td>
<td>Johnson</td>
<td>40</td>
</tr>
</table>
2.7 字体与内联窗口
这一小节的内容实际用得相比其它标签用得不算太多，现阶段了解一下即可。
字体
字体用font标签描述，一般结合属性和样式使用。
内联窗口
内联窗口是iframe，表示一个独立窗口显示外部网页。
示例
<body>
<!-- font -->
<p style="font-family: Arial, sans-serif; color: blue;">This is a paragraph with Arial font.</p>
<p style="font-family: Verdana, sans-serif; color: red;">This is a paragraph with Verdana font.</p>
<p style="font-family: Georgia, serif;">This is a paragraph with Georgia font.</p>
<!-- iframe -->
<iframe src="https://www.baidu.com" width="500" height="300"></iframe>
</body>
2.8 框
框有文本、密码、单选、复选、时间、邮件等框。框用的是input标签，通过type属性指定类型，可以通过其它属性设置样式。input同时也是一个自闭标签，一般我们不需要写input的结束标签
常见的框 对应的 type：
| 框 | type |
|---|---|
| 文本框 | text |
| 密码框 | password |
| 单选框 | radio |
| 多选框 | checkbox |
| 时间框 | time |
| 邮件框 | |
| 数字框 | number |
举例
<body>
<!-- input type: text -->
<input type="text">
<br>
<!-- input type: text with placeholder -->
<input type="text" placeholder="Enter your name">
<br>
<!-- input type: password -->
<input type="password">
<br>
<!-- input type: email -->
<input type="email">
<br>
<!-- input type: number -->
<input type="number">
<br>
<!-- input type: date -->
<input type="date">
<br>
<!-- input type: time -->
<input type="time">
<br>
<!-- input type: datetime-local -->
<input type="datetime-local">
<br>
<!-- input type: file -->
<input type="file">
<br>
<!-- input type: radio -->
<br>
<input type="radio" name="gender" value="male">Male
<input type="radio" name="gender" value="female">Female
<!-- input type: checkbox -->
<br>
<input type="checkbox" name="interest" value="sports">Sports
<input type="checkbox" name="interest" value="music">Music
<input type="checkbox" name="interest" value="reading">Reading
</body>
2.9 按钮
按钮的标签也可以是 input ，不同的按钮也用不同的 type 表示。
常见的 input 按钮 对应的 type：
| 按钮 | type |
|---|---|
| 普通按钮 | button |
| 提交按钮 | submit |
| 重置按钮 | reset |
除了 input 按钮之外， button 标签也是 按钮。其中，button 标签的功能更加丰富。 input通常用于表单中，button 则用type=“submit”属性也可使其拥有提交能力。
示例
<body>
<!-- input type="button" value="Click Me" οnclick="alert('Hello World!')" -->
<input type="button" value="Click Me" onclick="location.href='https://www.baidu.com'" />
<br>
<input type="button" value="Reset" onclick="location.href='https://www.baidu.com'" />
<br>
<input type="button" value="Submit" onclick="location.href='https://www.baidu.com'" />
<!-- button type="button" οnclick="alert('Hello World!')">Click Me</button> -->
<button type="button" onclick="location.href='https://www.baidu.com'">Click Me</button>
<br>
<button type="submit" onclick="location.href='https://www.baidu.com'">Click Me</button>
</body>
2.10 下拉选择与文本域
下拉选择
下拉选择的标签是 select ，提供选择的元素用 option 标签包裹。
文本域
文本域的标签是 textarea 。
示例
<body>
<!-- select -->
<select>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<br>
<!-- textarea -->
<textarea rows="4" cols="50">Enter your text here</textarea>
</body>
3. 补充与总结
3.1 如何理解“超文本标记语言”？
-
“超文本”（HyperText）指的是文本中包含的链接，可以通过点击链接跳转到其他页面或文档。
-
“标记语言”（Markup Language）指的是用标记（标签）来定义文本的结构和样式。
因此，HTML被称为超文本标记语言，是因为它可以创建包含链接的文本，并使用标记来定义文本的结构和样式。
上述解释来自 ——IT干货网
3.2 总结
本文我们学习了HTML 基础概念、基本结构 以及 常见HTML标签。HTML是网页的骨架，是前端的基础。后续CSS、JavaScript的学习都要基于HTML。
对于标签的学习，我们一是要了解常见的标签及其功能，要留个印象。通常，都是用到再查，查其详细用法，以及常用属性。
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
