【前端】HTML

跟着大佬学前端之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
邮件框	email
数字框	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。

对于标签的学习，我们一是要了解常见的标签及其功能，要留个印象。通常，都是用到再查，查其详细用法，以及常用属性。

参考教程

• 菜鸟教程
• how2j-优秀全栈教程
• IT干货网
• 微软教程