HTML5+CSS+JS学习笔记
关于HTML
- HTML，全称“Hyper Text Markup Language（超文本标记语言）”，简单来说，网页就是用HTML语言制作的。
- HTML5是Web中核心语言HTML的规范，用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的，在浏览器中通过一些技术处理将其转换成为了可识别的信息。
最小的HTML5文档
1 |
|
注意：对于中文网页需要使用<meta charset="utf-8">声明编码，否则会出现乱码。
一、HTML5基本标签
1.HTML标签
整个网页是从 <html>这里开始的，然后到</html>结束。
2.head标签
head标签代表页面的“头”，定义一些特殊内容，多数内容在浏览器中不可见。
| head标签 | 解释 |
|---|---|
<title> |
定义网页的标题 |
<meta> |
定义网页的基本信息（供搜索引擎） |
<style> |
定义CSS样式 |
<link> |
链接外部CSS文件或脚本文件 |
<script> |
定义脚本语言 |
<base> |
定义页面所有链接的基础定位（用得很少） |
3.body标签
body标签代表页面的“身”，定义网页展示内容，在浏览器中往往可见。
二、段落与文字
1.段落标签
| 标签 | 语义 | 说明 |
|---|---|---|
<h1>~<h6> |
header | 标题 |
<p> |
paragraph | 段落 |
<br> |
break | 换行 |
<hr> |
horizontal rule | 水平线 |
<div> |
division | 分割（块元素） |
<span> |
span | 区域（行内元素） |
2.文本格式化标签
| 标签 | 语义 | 说明 |
|---|---|---|
<st> |
strong（加强） | 加粗 |
<em> |
emphasized（强调） | 斜体 |
<cite> |
cite（引用） | 斜体 |
<sup> |
superscripted（上标） | 上标 |
<sub> |
subscripted（下标） | 下标 |
3.块元素和行内元素
- HTML元素根据浏览器表现形式分为两类：①块元素；②行内元素
块元素特点：
- 独占一行，排斥其他元素跟其位于同一行，包括块元素和行内元素；
- 块元素内部可以容纳其他块元素或行元素；
常见块元素：h1~h6、p、hr、div
行内元素特点：
- 可以与其他行内元素位于同一行；
- 行内内部可以容纳其他行内元素，但不可以容纳块元素，不然会出现无法预知的效果；
常见行内元素有：strong、em、span
三、列表
| 标签 | 语义 | 说明 |
|---|---|---|
| ol | ordered list | 有序列表 |
| ul | unordered list | 无序列表 |
| dl | definition list | 定义列表 |
1.有序列表
1 | <ol> |
| type属性值 | 列表项的序号类型 |
|---|---|
| 1 | 1、2、3…… |
| a | a、b、c…… |
| A | A、B、C…… |
| i | i、ii、iii…… |
| I | I、II、III…… |
学习CSS之后，有序列表列表项符号更常用list-style-type属性定义。
2.无序列表
1 | <ul type="列表项符号"> |
| type属性值 | 列表项的序号类型 |
|---|---|
| disc | 默认值，实心圆“●” |
| circle | 空心圆“○” |
| square | 实心正方形“■” |
学习CSS之后，无序列表列表项符号更常用list-style-type属性定义。
3.定义列表
1 | <dl> |
<dl>即“definition list（定义列表）”，<dt>即“definition term（定义名词）”，而<dd>即“definition description（定义描述）”。在该语法中，
<dl>标记和</dl>标记分别定义了定义列表的开始和结束，<dt>后面添加要解释的名词，而在<dd>后面则添加该名词的具体解释。
HTML5+CSS+JS学习笔记
