第一章：HTML基础
第一章：HTML基础
1.1 HTML文档的结构
以键值对进行元素的撰写，比如：< html ></ html >、< body ></ body >
<!-- 文本标识 -->
<!DOCTYPE html>
<!--
标识html文档的范围
lang="en" 代表的是本网页所使用的语言 zh-cn
-->
<html lang="zh-cn">
<head>
<!--
head:代表的是网页文本的头
+ meta标签：是用来定义网页元信息的
- <meta charset="UTF-8">：定义了网页的编码
- <meta name="viewport" content="width=device-width, initial-scale=1.0">：定义了网页的显示状态
- <meta name="keywords" content="网页关键字">：网页关键字 用于定义网页的核心业务，主要是为了搜索引擎检索的
- <meta name="description" content="网页描述">：网页的描述 用于描述网站的内容，也是为了搜索引擎检索的
+ title标签：网页的标题 <title>网页标题</title>
+ link标签：
- <link rel="shortcut icon" href="media/favicon.ico" type="image/x-icon">：用于定义网站的图标，图标必须是ico格式
- <link rel="stylesheet" href="css/style.css">：用于引入网页的样式表
+ script标签：<script src="js/common.js"></script>：用于引入网页的脚本，主要功能是于用户交互,一般把script标签放在闭合的body前面，主要是为了改善页面的渲染
-->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="网页关键字">
<meta name="description" content="网页描述">
<link rel="shortcut icon" href="media/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="css/style.css">
<title>HTML基础培训</title>
</head>
<body>
<!--
主要放置网页的元素，是一个网页的主体，用户看的部分就放在这个标签内部
-->
<div id="div" onclick="change_txt()">HTML基础</div>
<script src="js/common.js"></script>
</body>
</html>
1.2 网页开发时的路径问题
绝对路径
- 是指文件在系统中的完整路径：d://test//demo.txt 、 http://localhost/training/index.html
相对路径
- 相对于当前文件的路径
- ./：当前路径
- ../：上级路径
<img src="./media/demo.jpg" alt="" srcset="">
<video src="./media/demo.mp4"></video>
<img src="../media/demo.jpg" alt="" srcset="">
1.3 HTML标签
文本元素标签
- 内容标题
- h1、h2、h3...h6:六级标题，h后面跟的数字越大，字体越小
<h1>H1</h1>
<h2>H2</h2>
<h3>H3</h3>
<h4>H4</h4>
<h5>H5</h5>
<h6>H6</h6>
- 文本修饰
- b: 用于加粗的
- i：斜体
- s：删除线
- u：下划线
- sup：上标
- sub：下标
<b>加粗</b>
<i>斜体</i>
<s>删除线</s>
<u><sup>上标</sup>下划线<sub>下标</sub></u>
- 文档结构元素
- br：换行
- hr：水平线
- p：段落标签
- span：文本标签
- div：文本块标签
hellow
<br/>
<hr/>
你好
<p>第一行</p>
<p>第二行</p>
span1span2
<span>span1</span>
<span>span2</span>
<div>DIV1</div>
<div>DIV2</div>
- 列表元素
- 有序列表：ol
- 无序列表：ul
- 列表的内容都是用li
- 定义列表：dl、dt、dd综合表示列表顺序
<!--
有序列表
type属性：用于确定采用何种方式编码
“1”代表阿拉伯数字（1、2、3…）；
“a”代表小写字母（a、b、c…）；
“A”代表大写字母(A、B、C…）；
“i”代表小写罗马数字（i、ii、iii…）；
“I”代表大写罗马数字（I、II、III…）。
start属性：用于确定其实编码位置
-->
<ol type="A" start="3">
<li>ASP</li>
<li>JSP</li>
<li>PHP</li>
</ol>
<!--
无序列表
type属性：用于确定采用何种方式编码
circle（圆）、disc（点）、square（方块）、none
-->
<ul type="square">
<li>ASP</li>
<li>JSP</li>
<li>PHP</li>
</ul>
<!--定义列表-->
<dl>
<dt>购物区</dt>
<dd>近年来，随着经济社会和现代物流业的快速发展，带动了电子商务的快速发展……</dd>
<dt>影视区</dt>
<dd>能够在线收看高清电影电视剧、体育直播、游戏竞技视频、动漫视频、综艺视频、财经资讯视频播放流畅、完全免费，是网民喜爱的休闲娱乐区。</dd>
<dt>餐饮区</dt>
<dd>通过互联网使消费者及时了解餐厅营运、在线点菜、优惠套餐等方式进行网络销售传播，便利充分地实现餐厅服务价值交换。</dd>
</dl>
多媒体标签 < a > 链接文本 </ a >
- 超链接标签属性
- href：定义超链接的地址
- title：定义超链接的标题
- target：定有链接的打开方式
- _self：在当前页面打开超链接
- _blank：在新的标签页打开超链接
- iframe的名称：在iframe里打开超链接
- 超链接的类型：
- 普通的网页链接：href="网页的地址"
- 邮件链接：href="mailto:邮件地址"
- 电话链接：href="tel:手机号"
- 锚链接：href="#名称"
<div id="top">顶部</div>
<!-- 普通链接 -->
<a href="http://www.baidu.com" target="_self" title="这是一个超链接">百度</a>
<!-- 邮件链接 -->
<a href="mailto:fbx2020@163.com">给我发邮件</a>
<!-- 电话链接 -->
<a href="tel:18744059282">给我打电话</a>
<div style="height: 3000px;"></div>
<!-- 锚链接 -->
<a href="#top">返回顶部</a>
图片标签 < img >
- 图片标签的属性
- src：设置图片的路径
- alt：设置当图片不存在时的文本
- title：图片标题，鼠标悬浮其上时显示的内容
<img src="./media/demo.jpg" alt="这是一个图片" title="美丽的风景">
阅读剩余
版权声明：
作者：姜九二
链接：https://www.jiangjianwu.cn/development/htmlcssjavascript/html/317/%e7%ac%ac%e4%b8%80%e7%ab%a0%ef%bc%9ahtml%e5%9f%ba%e7%a1%80.html
文章版权归作者所有，未经允许请勿转载。
THE END
