目录
一、简介
1、前端开发最核心技术
众所周知，用所谓的网页三剑客已经不能满足需求了，那前端开发究竟要学习什么技术呢？网页最主要由3部分组成：结构、表现和行为。网页现在新的标准是W3C，目前模式是HTML、CSS和JavaScript。
（1）HTML是什么？
HTML，全称“Hyper Text Markup Language（超文本标记语言）”，简单来说，网页就是用HTML语言制作的。HTML是一门描述性语言，是一门非常容易入门的语言。
（2）CSS是什么?
CSS，全称“（层叠样式表）”。以后我们在别的地方看到“层叠样式表”、“CSS样式”，指的就是CSS。
（3）JavaScript是什么?
JavaScript是一门脚本语言。
二、基础内容
1.HTML的基本标签
(1)HTML标签
整个网页是从<html>这里开始的，然后到</html>结束。
(2)head标签
head标签代表页面的“头”，定义一些特殊内容，这些内容往往都是“不可见内容”（在浏览器不可见）。
表1 <head>内部标签
| <head>内部标签 | 说明 |
|---|---|
| <title> | 定义网页的标题 |
| <meta> | 定义网页的基本信息（供搜索引擎） |
| <style> | 定义CSS样式 |
| <link> | 链接外部CSS文件或脚本文件 |
| <script> | 定义脚本语言 |
| <base> | 定义页面所有链接的基础定位（用得很少） |
(3)body标签
body标签代表页面的“身”，定义网页展示内容，这些内容往往都是“可见内容”（在浏览器可见）。
3、段落与文字
(一)、段落标签
(1)、段落与文字标签
表1 段落与文字标签
| 标签 | 语义 | 说明 |
|---|---|---|
| <h1>~<h6> | header | 标题 |
| <p> | paragraph | 段落 |
| <br> | break | 换行 |
| <hr> | horizontal rule | 水平线 |
| <div> | division | 分割（块元素） |
| <span> | span | 区域（行内元素） |
(2)、文本格式化标签
| 标签 | 语义 | 说明 |
|---|---|---|
| <strong> | strong（加强） | 加粗 |
| <em> | emphasized（强调） | 斜体 |
| <cite> | cite（引用） | 斜体 |
| <sup> | superscripted（上标） | 上标 |
| <sub> | subscripted（下标） | 下标 |
(二)、网页特殊符号
网页特殊符号只需要记忆一个就行了，就是HTML空格“ ”，其他的特殊符号我们不需要记忆，当我们需要的时候再回来查找一下特殊符号表就OK了。
(三)、自闭合标签
HTML标签分为2种，一种是“一般标签”，另外一种是“自闭合标签”。一般标签有开始符号和结束符号，自闭合标签只有开始符号没有结束符号。
(1)、一般标签
举例：<body></body>
(2)、自闭合标签
举例：<br/>、<hr/>
四)、块元素和行内元素
(1)、HTML元素根据浏览器表现形式分为两类：①块元素；②行内元素；
(2)、块元素特点：
- （1）独占一行，排斥其他元素跟其位于同一行，包括块元素和行内元素；
- （2）块元素内部可以容纳其他块元素或行元素；常见块元素有：h1~h6、p、hr、div等。
(3)、行内元素特点：
- （1）可以与其他行内元素位于同一行；
- （2）行内内部可以容纳其他行内元素，但不可以容纳块元素，不然会出现无法预知的效果；
常见行内元素有：strong、em、span等。
(6)标签的语意
标签语义对照表
| 标签名 | 英文全称 | 中文解释 |
|---|---|---|
| div | division | 分割（块元素） |
| span | span | 区域（行内元素） |
| p | paragraph | 段落 |
| ol | ordered list | 有序列表 |
| ul | unordered list | 无序列表 |
| li | list item | 列表项 |
| dl | definition list | 定义列表 |
| dt | definition term | 定义术语 |
| dd | definition description | 定义描述 |
| h1~h6 | header1 ~header6 | 标题1~标题6 |
| hr | horizontal rule | 水平线 |
| a | anchor | 锚点，超链接 |
| strong | strong | 强调（粗体） |
| em | emphasized | 强调（斜体） |
| sup | superscripted | 上标 |
| sub | subscripted | 下标 |
| br | break | 换行 |
| fieldset | fieldset | 域集 |
| legend | legend | 图例 |
| caption | caption | （表格、图像等）标题 |
| thead | table head | 表头 |
| tbody | table body | 表身 |
| tfoot | table foot | 表脚 |
| th | table header | 表头单元格 |
| td | td | 表身单元格 |
4、列表
3种列表的语义记忆：
| 标签 | 语义 | 说明 |
|---|---|---|
| ol | ordered list | 有序列表 |
| ul | unordered list | 无序列表 |
| dl | definition list | 定义列表 |
(一)、HTML3种列表
(1)、有序列表
| 1 2 3 4 5 |
|
| 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属性定义，到时候应该摒弃type属性。
(2)、无序列表
无序列表是三个列表中最为重要的列表。
语法：
| 1 2 3 4 5 |
|
| type属性值 | 列表项的序号类型 |
|---|---|
| disc | 默认值，实心圆“●” |
| circle | 空心圆“○” |
| square | 实心正方形“■” |
(3)、定义列表
语法：
| 1 2 3 4 5 |
|
说明：
<dl>即“definition list（定义列表）”，<dt>即“definition term（定义名词）”，而<dd>即“definition description（定义描述）”。
在该语法中，<dl>标记和</dl>标记分别定义了定义列表的开始和结束，<dt>后面添加要解释的名词，而在<dd>后面则添加该名词的具体解释。
扫一扫
3850
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
