介绍:
本人自学前端有一段时间了,但是总觉得个人对基础掌握的不够牢固,一直想找个机会总结一下自己所学知识.
刚好机缘巧合下加入了一个web学习交流群,所以借这次机会,我将对自己学习web前端的知识进行系统的整理,并把自己的学习经历写成笔记,以便用于日后的回顾和反思.
当然再此我要由衷的感谢弯弯姐,弯弯姐的秘书和传智播客提供的交流平台.
概要:
- html标签类型
- html常用标签
- html基本文档格式
内容
再此我先提前说明一下我所总结的内容根据我个人所知而来,所以会有一些
不对或不全面的地方,还请多多包涵和指正,
html标签类型(显示类型)
HTML标记一般分为块标记,行内标记以及行内块标记3种类型，它们也称块元素,行内块元素和行内元素.
- 块元素
每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。
常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，
其中<div>标记是最典型的块元素。
- 行内元素
行内元素不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式。
常见的行内元素有<strong>、<b>、<em>、<i>、<del>、<s>、
<ins>、<u>、<a>、<span>等，其中<span>标记最典型的行内元素。
tip:因为现在强调标签语义化,所以一般不会用<i>标签来修饰斜体了,
但是我通常会用<i>标签来修饰图标(icon).
- 行内块元素
行内块元素介于行内元素和块元素之间,简单理解的就是可以设置大小,宽高的行内元素.
常见的行内块元素有 <input>,<img>, <select>,<textarea> 等 .
其中<img>是典型的行内块元素.
tip:每个行内元素和行内块元素和它们的父元素是按照基线对
齐排列的,所以有时会出现奇怪的底部缝隙.例如:
inline-block_gap.png
解决办法:一般我是将img的display样式修改成block.
html常用标签
这里只对常用标签进行一些简单的描述,具体使用方法,我会在之后的笔记中详细介绍.
| 标签 | 描述 |
|---|---|
| meta | 定义了HTML文档中的元数据 |
| link | 定义了一个文档和外部资源之间的关系 |
| audio | 标签定义声音，比如音乐或其他音频流。 |
| video | 标签定义视频，比如电影片段或其他视频流 |
| script | 定义了客户端的脚本文件 |
| span | 提供了一种将文本的一部分或者文档的一部分独立出来的方式。 |
| div | 标签定义 HTML 文档中的一个分隔区块或者一个区域部分。 |
| button | 标签定义一个按钮。 |
| canvas | 标签通过脚本（通常是 JavaScript）来绘制图形（比如图表和其他图像）。 |
| h1 - h6 | 标签被用来定义 HTML 标题。 |
| table | 标签定义 HTML 表格 |
| strong | 定义重要的文本。 |
| button | 标签定义一个按钮。 |
| em | 斜体字 |
| ul | 标签定义无序列表。 |
| li | 标签定义列表项目 |
| form | 标签用于创建供用户输入的 HTML 表单。 |
| img | 标签定义 HTML 页面中的图像。 |
| article | 标签定义独立的内容 |
| aside | 标签外的内容。aside 的内容应该与附近的内容相关,用作文章的侧栏。 |
html基本文档格式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
