HTML(Hypertext Markup Language)是Web开发中最基础的语言之一,对于前端开发者来说,深厚的HTML知识是不可或缺的。在面试中,HTML的问题常常涵盖从基础标记到HTML5新特性的方方面面。以下是一份更为详细的HTML知识点总结,助你在面试中更加从容自信。
DOCTYPE声明
<!DOCTYPE html>
<!DOCTYPE html>
声明用于告知浏览器使用哪个HTML版本渲染页面。
<html lang="en">
<html>
元素是HTML文档的根元素,其中lang属性用于指定页面的语言。
<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>
<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>
<a href="https://leviqin.top" target="_blank">levi 笔迹</a>
<img src="image.jpg" alt="Description">
<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>
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"
表示提交按钮,用户点击后将表单数据发送到服务器。
HTML5
引入了一系列的语义化标签,这些标签使得文档结构更加清晰,对搜索引擎和开发者都更加友好。以下是一些常用的HTML5
语义化标签及其用法。
<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>
<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>
<h2>Article Title</h2>
<p>Article content goes here...</p>
</article>
<section>
标签定义文档的一个区块或节,通常包含一组相关的内容,并且可以添加一个标题。
<section>
<h2>Section Title</h2>
<p>Section content goes here...</p>
</section>
<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>
<h1>Main Content</h1>
<p>This is the main content of the page.</p>
</main>
<footer>
标签定义文档的页脚,通常包含作者信息、版权声明、联系方式等内容。
<footer>
<p>© 2023 My Website. All rights reserved.</p>
</footer>
<figure>
标签用于包含与文档主体相关的内容,如图表、图片、代码等。<figcaption>
标签用于为<figure>
元素添加一个标题。
<figure>
<img src="image.jpg" alt="A beautiful image">
<figcaption>Caption for the image</figcaption>
</figure>
HTML
和XHTML
的区别是什么?HTML
是一种松散的文档标记语言,而XHTML是HTML的严格版本,更符合XML规范。主要区别在于XHTML
对标签的要求更严格,需要闭合标签,并且标签和属性的命名规范更加严格。
HTML
语义化的意义是什么?语义化标签使代码更具可读性,同时有助于搜索引擎理解页面内容。例如,使用<header>
和<footer>
而不是<div>
能够更清晰地表示页面的头部和底部。
data-
属性是HTML5
中引入的一种自定义数据属性的方法,允许开发者在标签上存储额外的信息,这些信息可以通过JavaScript
访问。
点赞
52 天前