1 什么是HTML
HTML 是用来描述网页的一种语言。HTML 是一种在 Web 上使用的通用标记语言。HTML 允许你格式化文本,添加图片,创建链接、输入表单、框架和表格等等,并可将之存为文本文件,浏览器即可读取和显示。
HTML 指的是超文本标记语言: HyperText Markup Language
HTML 不是一种编程语言,而是一种标记语言
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面
2 CSS
CSS,全称“(层叠样式表)”。以后我们在别的地方看到“层叠样式表”、“CSS样式”,指的就是CSS。
2.HTML的基本标签
(1)HTML标签
整个网页是从<html>这里开始的,然后到</html>结束。
(2)head标签
head标签代表页面的“头”,定义一些特殊内容,这些内容往往都是“不可见内容”(在浏览器不可见)。
<head>内部标签 | 说明 |
---|---|
<title> | 定义网页的标题 |
<meta> | 定义网页的基本信息(供搜索引擎) |
<style> | 定义CSS样式 |
<link> | 链接外部CSS文件或脚本文件 |
<script> | 定义脚本语言 |
<base> | 定义页面所有链接的基础定位(用得很少) |
(3)body标签
body标签代表页面的“身”,定义网页展示内容,这些内容往往都是“可见内容”(在浏览器可见)。
后续课程讲解的标签都是在<body>标签内部的各种标签。
3、段落与文字
(一)、段落标签
(1)、段落与文字标签
表1 段落与文字标签
标签 语义 说明
<h1>~<h6> header 标题
<p> paragraph 段落
<br> break 换行
<hr> horizontal rule 水平线
<div> division 分割(块元素)
<span> span 区域(行内元素)
(2)、文本格式化标签
表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等。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZONGXP</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>
- <!DOCTYPE html> 声明为 HTML5 文档
- <html> 元素是 HTML 页面的根元素
- <head> 元素包含了文档的元(meta)数据,如 <meta charset="utf-8"> 定义网页编码格式为 utf-8(由于在大部分浏览器中直接输出中文会出现乱码,所以要在头部将字符声明为UTF-8)
- <title> 元素描述了文档的标题
- <body> 元素包含了可见的页面内容
- <h1> 元素定义一个大标题
- <p> 元素定义一个段落
标题(HTML 标题(Heading)是通过<h1> - <h6> 标签来定义的.)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZONGXP</title>
</head>
<body>
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>
</body>
</html>
段落
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZONGXP</title>
</head>
<body>
<p>这是一个段落。</p>
<p>这是一个段落。</p>
<p>这是一个段落。</p>
</body>
</html>
链接
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZONGXP</title>
</head>
<body>
<a href="https://blog.csdn.net/zong596568821xp">这是一个链接使用了 href 属性</a>
</body>
</html>
图像
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZONGXP</title>
</head>
<body>
<img src="zongxp.jpg" width="640" height="640" />
</body>
</html>
表格
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>