面试宝典之HTML

最新推荐文章于 2024-07-06 09:55:36 发布

慕钦。

最新推荐文章于 2024-07-06 09:55:36 发布

阅读量1.1k

点赞数 36

文章标签： html 前端面试

本文链接：https://blog.csdn.net/muqin6610/article/details/137978439

版权

本文详细介绍了HTML的基础结构，包括DOCTYPE声明、HTML元素、head元素、文本标记、列表、链接、图像、表格、表单，以及HTML5的语义化标签和面试中常考知识点，如HTML和XHTML的区别、HTML语义化的重要性以及data-属性的使用。

摘要由CSDN通过智能技术生成

HTML（Hypertext Markup Language）是Web开发中最基础的语言之一，对于前端开发者来说，深厚的HTML知识是不可或缺的。在面试中，HTML的问题常常涵盖从基础标记到HTML5新特性的方方面面。以下是一份更为详细的HTML知识点总结，助你在面试中更加从容自信。

1. HTML基础结构

DOCTYPE声明

<!DOCTYPE html>

<!DOCTYPE html>声明用于告知浏览器使用哪个HTML版本渲染页面。

html元素

<html lang="en">

<html>元素是HTML文档的根元素，其中lang属性用于指定页面的语言。

head元素

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Web Page</title>
</head>

<head>元素包含了文档的元信息，包括字符集、视口设置以及页面标题。

常用文本标记

标题

<h1>Heading 1</h1>
<!-- ... -->
<h6>Heading 6</h6>

段落

<p>This is a paragraph.</p>

强调和重要性

<strong>Strong Text</strong>
<em>Emphasized Text</em>

换行和水平线

<br>
<hr>

2. 列表

无序列表

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

有序列表

<ol>
    <li>First Item</li>
    <li>Second Item</li>
    <li>Third Item</li>
</ol>

3. 链接和图像

链接

<a href="https://leviqin.top" target="_blank">levi 笔迹</a>

图像

<img src="image.jpg" alt="Description">

4. 表格

<table>
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>Row 1, Cell 1</td>
        <td>Row 1, Cell 2</td>
    </tr>
    <tr>
        <td>Row 2, Cell 1</td>
        <td>Row 2, Cell 2</td>
    </tr>
</table>

5. 表单

HTML表单是用户与网页之间进行交互的主要方式之一。通过表单，用户可以向服务器发送数据，例如登录信息、搜索请求等。以下是HTML表单的基本结构和一些常用的表单元素。

表单基本结构

<form action="/submit" method="post">
    <!-- 表单内容 -->
</form>

<form>：表单元素的容器，action属性指定了数据提交的目标URL，method属性定义了提交数据的HTTP方法，常见的有get和post。

输入框

文本输入框

<label for="username">Username:</label>
<input type="text" id="username" name="username" required>

<label>：标签用于定义表单元素的标签，通过for属性与相应的输入框关联。
<input>：输入框元素，type="text"表示文本输入框，id和name属性分别定义了元素的标识符和表单名称，required表示此项为必填项。

密码输入框

<label for="password">Password:</label>
<input type="password" id="password" name="password" required>

<input>：type="password"表示密码输入框，输入的内容会被隐藏。

单选框和复选框

单选框

<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>

<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>

<input>：type="radio"表示单选框，name属性相同的单选框会成为一组，用户只能选择其中的一个。

复选框

<input type="checkbox" id="subscribe" name="subscribe" value="yes">
<label for="subscribe">Subscribe to newsletter</label>

<input>：type="checkbox"表示复选框，用户可以选择多个复选框。

下拉框

<label for="country">Choose a country:</label>
<select id="country" name="country">
    <option value="us">United States</option>
    <option value="ca">Canada</option>
    <option value="uk">United Kingdom</option>
</select>

<select>：下拉框元素，name属性定义了表单中此元素的名称。
<option>：下拉框中的选项，value属性定义了提交表单时发送给服务器的值。

文本域

<label for="message">Message:</label>
<textarea id="message" name="message" rows="4" cols="50" required></textarea>

<textarea>：文本域元素，rows和cols属性定义了文本域的行数和列数，required表示此项为必填项。

提交按钮

<input type="submit" value="Submit">

<input>：type="submit"表示提交按钮，用户点击后将表单数据发送到服务器。

6. HTML5语义化标签

HTML5引入了一系列的语义化标签，这些标签使得文档结构更加清晰，对搜索引擎和开发者都更加友好。以下是一些常用的HTML5语义化标签及其用法。

header

<header>标签用于定义文档的头部区域，通常包含网站的标题、导航栏、标语等内容。

<header>
    <h1>My Website</h1>
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
</header>

nav

<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Products</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>

article

<article>标签用于定义独立的、完整的内容单元，如一篇博客文章或新闻报道。

<article>
    <h2>Article Title</h2>
    <p>Article content goes here...</p>
</article>

section

<section>标签定义文档的一个区块或节，通常包含一组相关的内容，并且可以添加一个标题。

<section>
    <h2>Section Title</h2>
    <p>Section content goes here...</p>
</section>

aside

<aside>标签用于定义页面的侧边栏内容，通常包含与主内容相关的辅助信息。

<aside>
    <h3>Related Links</h3>
    <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
    </ul>
</aside>

main

<main>标签定义文档的主要内容，且在整个文档中只能出现一次。

<main>
    <h1>Main Content</h1>
    <p>This is the main content of the page.</p>
</main>

footer

<footer>
    <p>&copy; 2023 My Website. All rights reserved.</p>
</footer>

figure 和 figcaption

<figure>标签用于包含与文档主体相关的内容，如图表、图片、代码等。<figcaption>标签用于为<figure>元素添加一个标题。

<figure>
    <img src="image.jpg" alt="A beautiful image">
    <figcaption>Caption for the image</figcaption>
</figure>

7. 常见考点

`HTML`和`XHTML`的区别是什么？

HTML是一种松散的文档标记语言，而XHTML是HTML的严格版本，更符合XML规范。主要区别在于XHTML对标签的要求更严格，需要闭合标签，并且标签和属性的命名规范更加严格。

`HTML`语义化的意义是什么？

语义化标签使代码更具可读性，同时有助于搜索引擎理解页面内容。例如，使用<header>和<footer>而不是<div>能够更清晰地表示页面的头部和底部。

什么是data-属性？

data-属性是HTML5中引入的一种自定义数据属性的方法，允许开发者在标签上存储额外的信息，这些信息可以通过JavaScript访问。

原文地址： https://leviqin.top/topic-detail/71

慕钦。

关注

36
点赞
踩
30

收藏

觉得还不错? 一键收藏
0
评论
面试宝典之HTML

data-属性是HTML5中引入的一种自定义数据属性的方法，允许开发者在标签上存储额外的信息，这些信息可以通过JavaScript访问。
复制链接

扫一扫