web前端笔试题库之HTML篇-猿码集

1. HTML概述

HTML（Hyper Text Markup Language）是一种用于创建web页面的标记语言。它包含一系列的标签（tag），通过不同的标签表示不同的页面内容。HTML页面由多个标签组合而成，浏览器在读取HTML文件时，将标签转化为可视化的内容，显示在网页上。HTML有很多版本，随着新技术的推广，HTML也不断更新升级，目前最新的版本是HTML5。

1.1 常用HTML标签

下面列举一些常用的HTML标签及其用途：

<html> 标记文档的开始和结束。

<head> 包含元数据，例如 <title>、<link>、<meta> 等。

<title> 定义文档的标题，显示在浏览器的标题栏上。

<body> 包含可见的页面内容。

<h1> 到<h6> 标签表示标题，大小依次递减。

<p> 表示段落，将文本分组。

<a> 定义一个超链接，可以让用户点击进入到其他页面或位置。

<img> 插入图片，通过src属性指定图片的路径。

<!DOCTYPE html>  
<html>  
<head>  
<title>Welcome to my Home</title>  
</head>  
<body>  
<h1>Welcome to my website</h1>  
<p>My name is Jessy. </p>  
<p>Please visit my <a href="https://www.github.com/jessy"<strong>GitHub</a></p>  
<img src="jessy.jpg">  
</body>  
</html>

上面的代码用了一些常用HTML标签，定义了一个简单的网页，包含了标题、段落、超链接、图片等内容。

1.2 HTML文档结构

HTML文件通常包括两个部分：head和body。head部分包括一些元信息，例如页面标题（title）、引用的CSS文件、引用的JS文件等。body部分包括页面的可见内容，例如文字、图片、表格等。

<!DOCTYPE html>  
<html>  
<head>  
<title>Welcome to my Home</title>  
</head>  
<body>  
<h1>Welcome to my website</h1>  
<p>My name is Jessy. </p>  
<p>Please visit my <a href="https://www.github.com/jessy">GitHub</a></p>  
<img src="jessy.jpg">  
</body>  
</html>

上面的代码所组成的HTML文档结构如下：

<!DOCTYPE html>    
<html>    
    <head>    
        <title>Welcome to my Home</title>    
    </head>    
    <body>    
        <h1>Welcome to my website</h1>    
        <p>My name is Jessy. </p>    
        <p>Please visit my <a href="https://www.github.com/jessy">GitHub</a></p>    
        <img src="jessy.jpg">    
    </body>    
</html>

2. HTML标签属性

HTML标签通常包含一个或多个属性，属性是用来提供更多信息的，例如图片路径、超链接地址、样式等等。属性用来修改一个标签的行为或外观。

2.1 常用HTML属性

下面是一些常用的HTML属性：

class 用来指定一组元素的样式类，可以以命名的方式来管理样式。（与CSS搭配使用，文本只看不用）。

id 定义元素的唯一标识符（针对某个元素）。（与CSS搭配使用，文本只看不用）。

href 指定超链接目标URL。

src 指定图片/媒体的路径。

alt 描述图片/媒体的文本。

width/height 指定图片/媒体的宽度/高度。

style 可以定义元素的样式，例如字体、颜色等。

<!DOCTYPE html>  
<html>  
    <head>  
        <title>Welcome to my Home</title>  
        <style>  
            .header {  
                font-size: 24px;  
                color: blue;  
            }  
            .description {  
                font-size: 16px;  
                color: black;  
            }  
        </style>  
    </head>  
    <body>  
        <h1 class="header">Welcome to my website</h1>  
        <p class="description">My name is Jessy. </p>  
        <p class="description">Please visit my <a href="https://www.github.com/jessy">GitHub</a></p>  
        <img src="jessy.jpg" alt="My profile photo" width="200" height="200">    
    </body>  
</html>

上面的代码中，使用了class属性实现了特定元素的样式定义。

2.2 链接

超链接是HTML中最常用的元素之一。超链接用于在页面中链接到另一个页面或文件。在HTML中，超链接通过a标签来创建。

<a href="https://www.github.com/jessy">GitHub</a>

上面的代码创建了一个指向GitHub的超链接，用户单击该链接时，浏览器会自动跳转到该页面。

对于本地页面，可以使用相对路径来指定链接目标。如果一个页面与目标页面在同一目录下，则只需提供目标页面的文件名。例如：

<a href="about.html">About me</a>

上面的代码在当前目录下查找about.html文件，并创建一个链接。

3. 表单

表单是向服务器提交用户输入数据的主要途径之一。用户可以在表单中输入文本、选择选项等数据，通过提交表单向服务器发送这些数据。在HTML中，表单通过form标签来定义。

3.1 常用表单元素

下面是一些常用的表单元素：

<input> 用于输入文本、选择、文件上传、单选框等。（type属性指定类型）

<textarea> 用于多行文本输入。

<select> 用于下拉菜单。

<button> 表示按钮。

<form action="" method="post">  
    <label>Name:</label>  
    <input type="text" name="name">  
    <br><br>  
    <label>Email:</label>  
    <input type="email" name="email">  
    <br><br>   
    <label>Gender:</label>  
    <select name="gender">  
        <option value="male">Male</option>  
        <option value="female">Female</option>  
        <option value="unknown">Not sure</option>  
    </select>  
    <br><br>  
    <button type="submit">Submit</button>  
</form>

上面的代码创建了一个表单，包含了名字、邮箱、性别等选项。当用户单击提交按钮，表单会将数据传递到服务器。

3.2 表单验证

表单验证是指在用户提交表单之前，检查表单数据是否符合要求。在HTML中，可以通过required属性指定表单字段是否必填，也可以通过type属性指定数据类型，例如email、number等。除此之外，我们也可以使用JavaScript来自定义表单验证。

<form action="" method="post" onsubmit="return validate()">  
    <label>Name:</label>  
    <input type="text" name="name" required>  
    <br><br>  
    <label>Email:</label>  
    <input type="email" name="email" required>  
    <br><br>   
    <label>Age:</label>  
    <input type="number" name="age" min="18" max="99" required>  
    <br><br>  
    <button type="submit">Submit</button>  
</form> 
<script>
  function validate() {
    var form = document.forms[0];
    var name = form.name.value;
    var email = form.email.value;
    var age = form.age.value;
    if (name == "") {
      alert("Name cannot be empty");
      return false;
    }
    if (email == "") {
      alert("Email cannot be empty");
      return false;
    }
    if (age < 18 || age > 99) {
      alert("Age must be between 18 and 99");
      return false;
    }
    return true;
  }
</script>

上面的代码创建了一个表单，并使用JavaScript实现表单验证。validate()函数用来检查表单数据是否符合要求，如果不符合，将弹出提示框提示用户。在表单标签中的onsubmit属性中调用该函数。

4. 总结

本文介绍了HTML的基础知识，包括HTML的概述、常用HTML标签及其属性、表单等内容。HTML是创建web页面的基础，在web前端开发中扮演着重要的角色。掌握HTML基础知识后，可以更好的理解和操作HTML页面，为更好的开发web应用奠定良好的基础。

web前端笔试题库之HTML篇