html总结文档系列1资源-CSDN文库

需积分: 9 101 浏览量 2018-01-24 07:49:20 上传评论收藏 124KB DOCX 举报

### HTML总结文档系列1知识点详解 #### Sublime Text 快捷键 - **Ctrl+Shift+D**: 复制当前行。 - **Ctrl+Shift+K**: 删除当前行。 - **Ctrl+Shift+↑** 或 **Ctrl+Shift+↓**: 快速移动当前行到上一行或下一行。 - **Alt+Shift+2**: 布局分列功能，方便进行多列编辑。 - **Ctrl+Shift+L**: 当选中多行时，可以将这些行分割为多列，便于进行多行编辑。 - **Alt+F3**: 用于选择所有相同的文本，并进行同时编辑。 - **Ctrl+Enter**: 在当前行的下方添加新的一行。 - **Tab**: 补全标签代码，例如 `table>tr*3>td*3` 可以快速生成一个包含三行、每行三个单元格的表格。 - **HTML**: 输入 `xt` 后按 `Tab` 键，可快速生成 HTML 结构代码。 - **XHTML**: 输入 `xhtml` 后按 `Tab` 键，可快速生成 XHTML 结构代码。 - **HTML5**: 输入 `!` 后按 `Tab` 键，可快速生成 HTML5 结构代码。 #### HTML 基础标签及用法 1. **超链接 `<a>`** - 使用 `<a href="url" target="_blank">链接文本</a>` 可以创建一个指向指定 URL 的超链接，并且通过设置 `target="_blank"` 使链接在新窗口中打开。 - 另一种方式是在 `<head>` 中使用 `<base target="_blank">` 来设置所有超链接都在新窗口中打开。 2. **列表** - **无序列表 `<ul>`** - 默认情况下，列表项前面会有一个实心圆点。可以通过 `type` 属性改变列表项符号，如 `type="square"` 显示为小方块，`type="disc"` 显示为实心圆，`type="circle"` 显示为空心圆。 - **有序列表 `<ol>`** - 默认情况下，列表项前面是阿拉伯数字。可以通过 `type` 属性来改变编号形式，如 `type="1"` 保持阿拉伯数字，`type="a"` 显示为小写字母，`type="A"` 显示为大写字母，`type="i"` 显示为罗马数字小写，`type="I"` 显示为罗马数字大写。还可以通过 `start` 属性设置起始编号。 - **自定义列表 `<dl>`** - 由 `<dt>` 和 `<dd>` 组成，其中 `<dt>` 用于定义条目的名称，`<dd>` 用于描述该名称。 3. **多媒体** - 使用 `<embed src="media_file_path">` 插入多媒体文件，如音频或视频。 4. **文字特效** - **加重文本 `<strong>`** 和 **斜体 `<em>`** 分别用来强调文本的重要性和斜体显示。 - **下划线 `<ins>`** 和 **删除线 `<del>`** 用于添加或删除文本的下划线或删除线效果。 - **上标 `<sup>`** 和 **下标 `<sub>`** 用于显示上标或下标文本。 5. **元数据 `<meta>`** - **字符集 `<meta charset="UTF-8">`** 设置页面使用的字符编码。 - **关键词 `<meta name="keywords" content="关键词1, 关键词2, ...">`** 用于设置页面的关键词，帮助搜索引擎识别页面主题。 - **描述 `<meta name="description" content="页面描述">`** 用于设置页面的描述信息。 - **自动刷新 `<meta http-equiv="refresh" content="时间;URL">`** 用于设置页面自动刷新的时间间隔以及刷新后跳转的目标 URL。 6. **CSS 样式 `<link>`** - 使用 `<link rel="stylesheet" href="style_sheet_path">` 引入外部 CSS 文件，以实现页面的样式美化。 7. **图标 `<link>`** - 使用 `<link rel="icon" href="icon_path">` 设置页面的图标。 8. **表格 `<table>`** - **基本结构** - `<table>` 元素用于定义表格。 - `<tr>` 代表表格的一行。 - `<td>` 代表表格的一个单元格。 - `<th>` 用于定义表头单元格，通常居中且加粗。 - **属性** - **边框宽度 `border`**、**宽度 `width`**、**高度 `height`** 用于设置表格的外观。 - **单元格间距 `cellspacing`** 用于设置单元格之间的距离。 - **单元格内边距 `cellpadding`** 用于设置单元格内容与单元格边缘的距离。 - **对齐方式 `align`** 可以设置为 `left`、`right` 或 `center`，分别表示左对齐、右对齐和居中对齐。 - **垂直对齐方式 `valign`** 可以设置为 `top`、`middle` 或 `bottom`，分别表示顶部对齐、中部对齐和底部对齐。 - **示例** - 以下是一个包含表头、表体的简单课程表的例子： ```html <table width="300" height="200" bgcolor="green" cellspacing="1" align="center"> <caption>课程表</caption> <tr bgcolor="white"> <th width="80" colspan="2"></th> <th>星期一</th> <th>星期二</th> <th>星期三</th> <th>星期四</th> <th>星期五</th> </tr>  </table> ``` 以上内容涵盖了HTML前端学习中的基本知识点，包括Sublime Text的常用快捷键、HTML基础标签的使用方法及其属性等，有助于初学者快速掌握HTML的基础知识并应用于实际项目开发中。

资源推荐

资源详情

资源评论