前端工程师必备资料【CODE篇】.pdf

### 前端工程师必备资料【CODE篇】 #### 概述 前端开发是现代网站设计与构建中的核心组成部分，涉及到用户界面与用户体验的设计与实现。本文档旨在为前端工程师提供一系列基础而重要的HTML标签及其应用示例，帮助开发者更好地理解和运用这些标签来构建高质量的网页。文档由紫色贵族编辑整理，内容涵盖了常用的HTML标签、它们的英文全称及中文解释，以及HTML4常用标签的默认样式表等。 #### HTML基础知识 HTML（HyperText Markup Language）即超文本标记语言，是一种用于创建网页的标准标记语言。它通过一系列预定义的标签来描述文档的结构和内容。了解和掌握这些基本标签对于前端开发人员至关重要。 #### 常用HTML标签语义表 以下是一些常用HTML标签及其含义： - **`<div>`**：代表一个分隔或分区元素，常用于布局。 - **`<span>`**：表示一个文档中的一个行内元素，可以用来组合文档中的其他元素。 - **`<ol>`**：有序列表标签，通常用于表示有顺序的信息。 - **`<ul>`**：无序列表标签，用于表示没有顺序的信息集合。 - **`<li>`**：列表项目标签，既可以用于`<ol>`也可以用于`<ul>`。 - **`<dl>`**：定义列表标签，用于表示术语和定义的列表。 - **`<dt>`**：定义列表中的术语标签。 - **`<dd>`**：定义列表中的描述标签。 - **`<p>`**：段落标签，用于表示文档中的一个独立段落。 - **`<h1> ~ <h6>`**：标题标签，其中`<h1>`级别最高，`<h6>`级别最低。 - **`<form>`**：表单标签，用于创建交互式表单。 - **`<input>`**：输入标签，用于收集用户输入的数据，如文本框。 - **`<textarea>`**：文本区域标签，用于创建多行文本输入。 - **`<button>`**：按钮标签，用于创建按钮。 - **`<label>`**：标签标签，用于定义表单控件的标签。 - **`<select>`**：下拉列表标签，用于创建下拉列表。 - **`<option>`**：选项标签，用于定义`<select>`中的选项。 - **`<optgroup>`**：选项组标签，用于对`<option>`进行分组。 - **`<blockquote>`**：区块引用标签，用于表示引用文本。 - **`<fieldset>`**：域集标签，用于对表单中的相关元素进行分组。 - **`<legend>`**：图例标签，用于定义`<fieldset>`的标题。 - **`<table>`**：表格标签，用于创建表格。 - **`<thead>`**：表格头部标签，用于定义表格头部。 - **`<tbody>`**：表格主体标签，用于定义表格主体。 - **`<tfoot>`**：表格尾部标签，用于定义表格尾部。 - **`<tr>`**：行标签，用于定义表格中的一行。 - **`<th>`**：表头单元格标签，用于定义表格中的标题单元格。 - **`<td>`**：数据单元格标签，用于定义表格中的数据单元格。 - **`<caption>`**：标题标签，用于定义表格的标题。 - **`<a>`**：锚点标签，用于创建链接。 - **`<img>`**：图像标签，用于嵌入图像。 - **`<strong>`**：强调标签，用于加强文本的重要性。 - **`<em>`**：斜体标签，用于强调文本。 - **`<br>`**：换行标签，用于强制换行。 - **`<hr>`**：水平线标签，用于表示水平分割线。 #### HTML4常用标签默认样式表 在HTML4中，浏览器会自动应用一些默认样式于这些标签上，这些默认样式如下： - `html, address, blockquote, body, dd, div, dl, dt, fieldset, form, frame, frameset, h1, h2, h3, h4, h5, h6, noframes, ol, p, ul, center, dir, hr, menu, pre`: 显示为块级元素。 - `li`: 显示为列表项。 - `head`: 不显示。 - `table`: 显示为表格。 - `tr`: 显示为表格行。 - `thead`: 显示为表格头部。 - `tbody`: 显示为表格主体。 - `tfoot`: 显示为表格尾部。 - `col`: 显示为表格列。 - `colgroup`: 显示为表格列组。 - `td, th`: 显示为表格单元格。 - `caption`: 显示为表格标题。 - `th`: 字体更粗，居中显示。 - `caption`: 居中显示。 - `body`: 默认外边距为8像素。 - `h1`: 字体大小等设置（此处省略了具体值）。 这些标签及其用法构成了前端开发的基础，掌握它们对于成为一名合格的前端工程师至关重要。在实际开发过程中，还需要结合CSS和JavaScript等技术来进一步增强页面的表现力和交互性。