HTML简介及基本标签学习
一、定义
HTML：超文本标记语言，即对文本进行排版的标记性语言。
- 注意：HTML非编程语言。
- 功能：网页的骨架。
二、部分
标签、元素、属性三部分
例如：
-
<img src="logo.jpg" alt="标识" />是一个元素
<img />是标签
src和alt是属性
"logo.jpg"和"标识"是属性的值 -
<title> 你好 </title>是一个元素
<title></title>是一对标签
你好是标签的内容
三、HTML文件基本结构
<!DOCTYPE html>
<html lang="en">
<head>
<mata charset="UTF-8" />
<title>...</title>
</head>
<body>//主体：网页中包含的内容，显示在浏览器工作区
...
</body>
</html>
- 说明：
<!DOCTYPE html>定义文档类型为HTML。lang属性：搜索引擎，"en"英文，"zn"中文。<head>头部：浏览器、搜索引擎所需信息。<mata />元数据标签，提供给浏览器和搜索引擎的关于网页的描述性数据。比如：网页的作者是谁，什么时候修改的等信息。charset属性：字符集编码方式，即网页在显示的时候，网页主体信息的字符是按什么样的方式显示的。<title></title>网页的标题，显示在浏览器标签上方。<body>主体：网页中包含的内容，即显示在浏览器主体工作区的内容。
四、HTML常用标签
- 标题h1~h6
- 代码
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h6>六级标题</h6>
- 效果
注：一个页面建议只有一个一级标题。
- 段落p
- 代码
<p>这是段落，每个段落自动换行。</p>
<p>这是段落，每个段落自动换行。</p>
<p>段落内部文字忽略连续 空格，
也不会显示空行，且不会换行（生成一个空格）。</p>
- 效果
- 段内换行br（单独出现）
- 代码
<p>这是第一个段落。<br />这是第二个段落。</p>
<p>这是第一个段落。<br />这是第二个段落。</p>
- 效果
- 空格字符
- 代码
<p>这是一个 空格</p>
- 效果
- 预留格式pre
- 代码
<pre>
这是预留格式文本。它保留了 空格
换行和
空行
</pre>
- 效果
- 注：pre很适合显示计算机代码
- 代码
<pre>
for i = 1 to 10
print i
next i
</pre>
- 效果
- 行内组合span
- 功能：组合行内元素，以便通过CSS样式来格式化。
- 代码
<style type="text.css">
span{
color: blue;
font-weight: bold;
}
</style>
<p>最新<span>中国人口调查报告</span>指出...</p>
- 效果
- 水平线hr
- 代码
<p>段落一</p>
<hr />
<p>段落二</p>
- 效果
- 注释（不在浏览器中显示）
- 功能：对代码的内容进行标注说明，增强可读性。
- 代码
<!-- 这是一段注释 -->
<!-- 注释不会再浏览器中显示 -->
扫一扫
633
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
