HTML简要学习

原创 于 2020-12-15 21:34:52 发布 · 1.5k 阅读 · 8 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#html #html5
本文详细介绍了HTML的基础知识，包括HTML的结构、文本标签的使用（如标题、段落、换行、文本修饰）、列表（有序、无序和自定义）的创建以及表格的基本结构和属性，强调了语义化和标签的正确使用。此外，还涵盖了图片标签的src、alt和title属性，以及图片路径和格式的说明。

目录

一、第一章HTML简介

1.1、前端简介：

HTML用于控制网页结构，CSS用于控制网页外观，而JavaScript控制着网页的行为。

1.2、学习路线：

HTML——>CSS——>JavaScript——>jQuery——>HTML5——>CSS3——>移动web——>Vue.js

1.3、什么是HTML：

HTML并不是一门编程语言，而是一门描述性语言。

<标签符>内容</标签符>

二、HTML基本标签

2.1 HTML结构：

  • 文档声明： <!DOCTYPE html>

  • html标签对： <html></html>

  • head标签对： <head></head>

  • body标签对： <body></body>

  • 文档声明：表示这是一个HTML语言的页面。

  • HTML标签：标签的作用是告诉浏览器这个页面是从<html>开始到</html>结束。

  • head标签：网页的头部，用于定义一些特殊的内容，详见2.2head标签 ，

  • body标签：网页的身体，大部分代码都在这里完成。

2.2 head标签：

一般有6个标签可以放在head里面

  • title标签
  • meta标签
  • link标签
  • style标签
  • script标签
  • base标签

2.2.1title标签：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Aurora的网页</title>
</head>
<body>
    
</body>
</html>

浏览器效果：
浏览器效果

2.2.2 meta标签：

在HTML中，meta标签一般用于定义页面特殊信息，例如页面关键字、页面描述等。注意，这些并不是给用户看的，而是给计算机看的（搜索引擎蜘蛛），便于信息爬取。
meta有两个重要属性：name 、http-equiv。
例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <!--网页关键字-->
    <meta name="keywords" content="HTML，入门，前端，CSDN">
    <!--网页描述-->
    <meta name="description" content="这是Aurora的笔记">
    <!--作者-->
    <meta name="author" content="Aurora">
    <!--版权信息-->
    <meta name="copyright" content="本博客为个人学习创建，版权所有，禁止转载。">
</head>
<body>
</body>
</html>

例如某东：
某东
1、name标签的几个属性：

属性说明
keywords网页关键字，可以是多个。便于浏览器爬取、检索。
description网页描述，会在搜索界面展示。
author作者
copyright版权信息

2、http-equiv属性：
在HTML中，http-equiv有两个·作用：定义网页所使用的编码，定义网页自动跳转。

  1. 语法：<meta charset="utf-8">。关于编码后续再谈。
  2. 定义网页自动跳转：语法<meta name="refresh" content="6";url = https://www.baidu.com/>表示6秒后跳转到百度。

2.2.3 style标签：

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        /*在这里写style样式*/
    </style>
</head>
<body>
</body>
</html>

关于style会在CSS里面再说。

2.2.4 script标签：

<!DOCTYPE html>
<html lang="en">
<head>
    <script>
        /*在这里写JavaScript代码*/
    </script>
</head>
<body>
</body>
</html>

script标签会在JavaScript里面再说。

2.2.5 link标签

link标签是用于引入CSS外部样式的，属于CSS内容。

<!DOCTYPE html>
<html lang="en">
<head>
  <link  type ="text/css" rel="stylesheet" href="./Demo.css">
</head>
<body>
</body>
</html>

2.2.6 base标签：

忽略。

2.3 body标签：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Aurora</title>
</head>
<body>
    <h1>《梦与诗》</h1>
    <h2>胡适</h2>
    <p>醉过才知酒浓，</p>
    <p>爱过才知情重；</p>
    <p>你不能做我的诗，</p>
    <p>正如我不能做你的梦。</p>
</body>
</html>

body
注意：<meta charset="UTF-8">必须放在title标签及其他meta标签前面。

2.4 HTML注释：

语法形式：<!-- 这是注释 -->

三、文本：

3.1 文本介绍：

3.1.1页面组成元素：

大部分页面是由下面的4种元素组成的。

  • 文字
  • 图片
  • 超链接
  • 音频和视频
    静态页面和动态页面最大的区别是是否与服务器进行交互。

3.1.2 HTML文本：

分析网页
分析这个页面可知HTML文本要掌握这六点：

  • 标题标签
  • 段落标签
  • 换行标签
  • 文本标签
  • 水平线标签
  • 特殊符号

3.2标题标签：

标签
如图所示，在网页里面是有很多级标题存在。HTML里面共有6个级别的标签：h1,h2,h3,h4,h5,h6。一般一个网页只有一个h1标签，其他标签可以有很多个。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Aurora</title>
</head>
<body>
    <h1>这是一级标题</h1>
    <h2>这是二级标题</h2>
    <h3>这是三级标题</h3>
    <h4>这是四级标题</h4>
    <h5>这是五级标题</h5>
    <h6>这是六级标题</h6>
</body>
</html>

例子
标题标签在浏览器里面有很重要的作用，一定要正确、灵活运用。

3.3段落标签：

3.3.1段落标签:

在HTML里面p标签显示一段文字。语法<p> 内容 </p>。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Aurora</title>
</head>
<body>
    <h3>将进酒</h3>
    <p>君不见，黄河之水天上来，奔流到海不复回。
        君不见，高堂明镜悲白发，朝如青丝暮成雪！
        人生得意须尽欢，莫使金樽空对月。
        天生我材必有用，千金散尽还复来。
        烹羊宰牛且为乐，会须一饮三百杯。
        岑夫子，丹丘生，将进酒，杯莫停。
        与君歌一曲，请君为我倾耳听。
    </p>
    <p>钟鼓馔玉不足贵，但愿长醉不复醒。
        古来圣贤皆寂寞，惟有饮者留其名。
        陈王昔时宴平乐，斗酒十千恣欢谑。
        主人何为言少钱，径须沽取对君酌。
        五花马、千金裘，呼儿将出换美酒，与尔同销万古愁！
    </p>
</body>
</html>

例子
分析：可以看出段落标签会自动换行，段落与段落之间存在一定的距离。

3.3.2换行标签：

首先来看使用多个p标签换行：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Aurora</title>
</head>
<body>
    <h3>《梦与诗》</h3>
    <p>醉过才知酒浓，</p>
    <p>爱过才知情重；</p>
    <p>你不能做我的诗，</p>
    <p>正如我不能做你的梦。</p>
</body>
</html>

在这里插入图片描述
接下来看使用br标签达到的效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Aurora</title>
</head>
<body>
    <h3>《梦与诗》</h3>
    <p>醉过才知酒浓，<br>
       爱过才知情重；<br>
       你不能做我的诗，<br>
       正如我不能做你的梦。<br>
    </p>
</body>
</html>

在这里插入图片描述
分析：明显可以看出p标签换行行与行之间存在间隔，而br标签不存在这样的问题。因为P标签是用来分段的，而br标签是用来换行的。

3.4文本标签：

在HTML里我们可以使用文本标签对文字进行修饰，常见的文本标签有以下8种：

  • 粗体标签：strong、b
  • 斜体标签：i、em、cite
  • 上标标签：sup
  • 下标标签：sub
  • 中划线标签：s
  • 下划线标签：u
  • 大字号标签：big
  • 小字号标签：small

3.4.1粗体标签：

使用strong或b标签进行文本加粗。（尽量使用strong）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Aurora</title>
</head>
<body>
    <p>普通</p>
    <strong>加粗</strong><br>
    <b>加粗</b>
</body>
</html>

例子

3.4.2 斜体标签：

使用i标签、em标签或cite标签实现文本斜体效果。（尽量使用em标签）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Aurora</title>
</head>
<body>
    <i>斜体1号</i><br>
    <em>斜体2号</em><br>
    <cite>斜体3号</cite>
</body>
</html>

例子

3.4.3 上标标签：

使用sup标签实现文本上标标记。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Aurora</title>
</head>
<body>
    <p>(a + b)<sup>2</sup>=a<sup>2</sup>+b<sup>2</sup>=2ab</p>
</body>
</html>

例子

3.4.4 下标标签：

使用sub标签实现文本下标标记。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Aurora</title>
</head>
<body>
    <p>H<sub>2</sub>SO<sub>4</sub>是硫酸的化学式</p>
</body>
</html>

例子

3.4.5 中划线标签：

使用s标签实现文本中划线标记，这个标签常用于商品促销。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Aurora</title>
</head>
<body>
    <p>最新款棉大衣</p>
    <p><s>原价：9998元</s></p>
    <p><strong>现价：98元</strong></p>
</body>
</html>

例子

3.4.6 下划线标签：

使用u标签实现文本下划线标记。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Aurora</title>
</head>
<body>
    <p><u>CSDN</u>专业开发者社区。</p>
</body>
</html>

例子

3.4.7 大字号标签和小字号标签：

使用big标签实现文本大字号标记，使用small标签实现文本小字号标记。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Aurora</title>
</head>
<body>
    <big>这是大字号</big>
    <p>这是正常字号</p>
    <small>这是小字号</small>    
</body>
</html>

例子

3.5 水平线标签：

使用hr标签实现文本水平线标记

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Aurora</title>
</head>
<body>
    <p>酌贪泉而觉爽，处涸辙以犹欢</p>
    <hr>
    <p>落霞与孤鹜齐飞，秋水共长天一色</p>
</body>
</html>

例子
总结：重要的文本标签

标签说明
strong粗体
em斜体
sup上标
sub下标

3.6 div标签：

div标签很重要，在HTML页面里面我们利用div标签来划分结构块，再通过CSS来美化。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Aurora</title>
</head>
<body>
    <div>
        <p>酌贪泉而觉爽，处涸辙以犹欢</p>
    </div>
    <hr>
    <div>
        <p>落霞与孤鹜齐飞，秋水共长天一色</p>
    </div>
</body>
</html>

例子
这里只是简单的介绍了div标签，在后面的CSS里面会详细介绍。

3.7 自闭合标签：

在HTML里面标签分为两种：一般标签和自闭合标签。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Aurora</title>
</head>
<body>
    <p>酌贪泉而觉爽，处涸辙以犹欢</p>
    <hr/>
    <p>落霞与孤鹜齐飞，秋水共长天一色</p>
</body>
</html>

总结：

  • 一般标签：有开始符号和结束符号。
  • 自闭合标签：只有开始符号没有结束符号。
标签说明
meta定义网页信息（供搜索引擎使用）
link引入外部CSS文件
br换行标签
hr水平线标签
img图片标签
input表单标签

3.8 块元素和行内元素：

在HTML中根据元素的表现形式，一般可以分为两类：

  • 块元素
  • 行内元素

3.8.1 块元素：

在HTML里面，块元素在浏览器显示状态下 将占据一行，并且排斥其他元素与其位于同一行。一般情况下，块元素内部可以容纳其他块元素和行内元素。
HTML中常见的块元素：

块元素说明
h1~h6标题元素
p段落元素
divdiv元素
hr水平线
ol有序列表
ul无序列表
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Aurora</title>
</head>
<body>
    <div>
    <h3>滕王阁序</h3>
    <p>酌贪泉而觉爽，处涸辙以犹欢</p>
    <strong>滕王阁序</strong>
    <em>落霞与孤鹜齐飞，秋水共长天一色</em>
    </div>
</body>
</html>

例子
如图分析：

  • h3和p是块元素，他们的显示效果都是独占一行的，排斥任何元素和他们位于同一行；strong和em是行内元素，即使代码不在同一行但是它们的显示效果是位于同一行的。(显示效果和代码的位置没有关系)
  • h3、p、em、strong都是包含在div标签内部，说明块元素内部可以包含其他的块元素和行内元素。

3.8.2 行内元素：

在HTML中，行内元素是可以和其他元素位于同一行的。行内元素的内部只能容纳行内元素，不可容纳块元素。
HTML中常见的行内元素：

行内元素说明
strong粗体字体
em斜体字体
a超链接
span常用行内元素，结合CSS定义样式

总结：

  • 行内元素可以和其他元素位于同一行。
  • 行内元素内部只能容纳其他的行内元素，不可以容纳块元素。

3.9 特殊符号：

3.9.1 空格：

网页排版中常常会用到缩进美化文本段落，但是p标签不会缩进。在p标签里面输入“space”是无效的。在HTML里面空格的代码是&nbsp;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Aurora</title>
</head>
<body>
    <div>
    <h3>滕王阁序</h3>
    <p>&nbsp;&nbsp;&nbsp;&nbsp;酌贪泉而觉爽，处涸辙以犹欢</p>
    <em>落霞与孤鹜齐飞，秋水共长天一色</em>
    </div>
</body>
</html>

例子
其中，1个汉字大概是3个&nbsp;。所以一般首行缩进使用6个&nbsp;。

3.9.2 特殊符号：

特殊符号说明代码
"双引号（英文）&quot；
‘左单引号&lsquo；
’右单引号&rsquo；
×乘号&times；
÷除号&divide；
>大于号&gt；
<小于号&lt；
&与符号&amp；
——长破折号&mdash；
§分节符&sect；
©版权符&copy；
®注册商标&reg；
™商标&trade；
€欧元&euro；
£英镑&pound；
¥人民币&yen；
°度&deg；

四、列表：

4.1 列表介绍：

常见的列表形式：
文字列表
图片列表
在HTML中，列表共有三种：有序列表、无序列表、自定义列表。

4.2.1 有序列表介绍：

<!--语法-->
<ol>
	<li>列表项</li>
	<li>列表项<</li>
	<li>列表项<</li>
</ol>

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Aurora</title>
</head>
<body>
    <ol>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ol>
</body>
</html>

例子

4.2.2 type属性：

我们可以通过type属性来改变列表项符号

<!--语法-->
<ol type="属性值">
	<li>列表项</li>
	<li>列表项<</li>
	<li>列表项<</li>
</ol>

type属性取值：

属性值列表项符号
1阿拉伯数字：1、2、3……(默认)
a小写英文字母：a、b、c……
A大写英文字母：A、B、C……
i小写罗马数字：i、ii、iii……
I大写罗马数字：I、II、III……

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Aurora</title>
</head>
<body>
    <ol type="A">
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ol>
</body>
</html>

例子

4.3 无序列表：

4.3.1 无序列表简介：

<!--语法-->
<ul>
	<li>列表项</li>
	<li>列表项<</li>
	<li>列表项<</li>
</ul>

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Aurora</title>
</head>
<body>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ul>
</body>
</html>

例子

4.2 type属性：

<!--语法-->
<ul type="属性值">
	<li>列表项</li>
	<li>列表项<</li>
	<li>列表项<</li>
</ul>

type属性取值：

属性值列表项符号
disc实心圆●
circle空心圆⚪
square正方形■

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Aurora</title>
</head>
<body>
    <ul type="square">
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ul>
</body>
</html>

例子
无序列表在实践中的应用最为广泛。注意，文本不能直接放在ul元素内，而是放在外面。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Aurora</title>
</head>
<body>
    <div>前端核心技术：</div>           <!--这才是对的-->
    <ul type="square">
        <!--前端核心技术：-->           <!--添加这里是错误的-->
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ul>
</body>
</html>

4.4 定义列表：

<!--语法-->
<dl>
	<dt>名词</dt>
	<dd>描述</dd>
</dl>

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Aurora</title>
</head>
<body>
    <dl>
        <dt>HTML</dt>
        <dd>控制网页的结构</dd>
        <dt>CSS</dt>
        <dd>控制网页的样式</dd>
        <dt>JavaScript</dt>
        <dd>控制网页的行为</dd>
    </dl>
</body>
</html>

例子

4.5HTML语义化：

前面学习很多标签，貌似好像有些标签可以相互替换，
例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Aurora</title>
</head>
<body>
    <div>1.HTML</div>
    <div>2.CSS</div>
    <div>3.JavaScript</div>
</body>
</html>

例子
在结果上看起来和有序列表没有区别，但是这是不对的。语义化是HTML重要的思想，我们的网页不但要给用户看，也要照顾搜索引擎。标签相互替换展示给用户的没有太大差异，但是这对浏览器来说是天差地别的。语义化对搜索引擎的优化是极其重要的，一定要严格选择合适的标签使用，不可图一时方便因小失大鸭。

五、表格：

5.1 表格基本结构：

一个表格一般由以下3个部分组成：

  • 表格：table标签
  • 行：tr标签
  • 单元格：td标签
    <!--语法-->
    <table>
        <tr>
            <td>单元格1</td>
            <td>单元格2</td>
        </tr>
        <tr>
            <td>单元格3</td>
            <td>单元格4</td>
        </tr>

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Aurora</title>
    <style type="text/css">             /*这里添加了CSS样式为表格添加边框*/
        table,tr,td{
            border: 1px solid springgreen;           
        }
    </style>
</head>
<body>
    <!--语法-->
    <table>
        <tr>
            <td>HTML</td>
            <td>CSS</td>
        </tr>
        <tr>
            <td>JavaScript</td>
            <td>jQuery</td>
        </tr>
    </table>
</body>
</html>

例子

5.3 完整结构：

5.3.1 表格标题：caption

    <!--语法-->
    <table>
    	<caption>表格标题</caption>
        <tr>
            <td>单元格1</td>
            <td>单元格2</td>
        </tr>
        <tr>
            <td>单元格3</td>
            <td>单元格4</td>
        </tr>

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Aurora</title>
    <style type="text/css">             /*这里添加了CSS样式为表格添加边框*/
        table,tr,td{
            border: 1px solid slategray;           
        }
    </style>
</head>
<body>
    <table>
        <caption>希望小学期中考试成绩表</caption>
        <tr>
            <td>小明</td>
            <td>100</td>
            <td>100</td>
            <td>100</td>
        </tr>
        <tr>
            <td>小刚</td>
            <td>98</td>
            <td>100</td>
            <td>93</td>
        </tr>
    </table>
</body>
</html>

在这里插入图片描述
注意：表格是没有边框的，是CSS加入的便于观察。

5.3.2 表头单元格：th

    <!--语法-->
    <table>
    	<caption>表格标题</caption>
    	 <tr>
            <th>表头单元格1</th>
            <th>表头单元格2</th>
            <th>表头单元格3</th>
        </tr>
        <tr>
            <td>单元格1</td>
            <td>单元格2</td>
        </tr>
        <tr>
            <td>单元格3</td>
            <td>单元格4</td>
        </tr>

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Aurora</title>
    <style type="text/css">             /*这里添加了CSS样式为表格添加边框*/
        table,tr,td,th{
            border: 1px solid slategray;           
        }
    </style>
</head>
<body>
    <table>
        <caption>希望小学期中考试成绩表</caption>
        <tr>
            <th>姓名</th>
            <th>数学</th>
            <th>语文</th>
            <th>英语</th>
        </tr>
        <tr>
            <td>小明</td>
            <td>100</td>
            <td>100</td>
            <td>100</td>
        </tr>
        <tr>
            <td>小刚</td>
            <td>98</td>
            <td>100</td>
            <td>93</td>
        </tr>
    </table>
</body>
</html>

例子
注意：td和th本质上都是单元格，但是两者语义不同，他们的区别：

  • 显示上：浏览器加粗和居中 th 标签的内容，而td标签不会。
  • 语义上：th是表头，td是表行。

5.4 语义化：

为了进一步对表格进行语义化，HTML引入了thead、tbody、tfoot 3个标签。他们分别把表格划分成表头、表身、表脚。这样使代码结构更加清晰，增强可读性和可维护性，方便了CSS控制样式。

    <!--语法-->
    <table>
    	<caption>表格标题</caption>
    	<!--表头-->
    	<thead>
    	 <tr>
            <th>表头单元格1</th>
            <th>表头单元格2</th>
            <th>表头单元格3</th>
        </tr>
        </thead>
        <!--表身-->
        <tbody>
        <tr>
            <td>单元格1</td>
            <td>单元格2</td>
        </tr>
        </tbody>
        <!--表脚-->
        <tdoot>
        <tr>
            <td>单元格3</td>
            <td>单元格4</td>
        </tr>
        </tdoot>

5.5 合并行：rowspan

<td rowspan="跨域的行数"></td>
例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Aurora</title>
    <style type="text/css">             /*这里添加了CSS样式为表格添加边框*/
        table,tr,td,th{
            border: 1px solid slategray;           
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <td>姓名：</td>
            <td>小明</td>
        </tr>
        <tr>
            <td rowspan="2">喜欢的水果</td>
            <td>苹果</td>
        </tr>
        <tr>
            <td>香蕉</td>
        </tr>
    </table>
</body>
</html>

例子

5.6 合并列：colspan

<td colspan="跨域的列数"></td>
例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Aurora</title>
    <style type="text/css">             /*这里添加了CSS样式为表格添加边框*/
        table,tr,td,th{
            border: 1px solid slategray;           
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <td colspan="2">前端开发技术：</td>
        </tr>
        <tr>
            <td>HTML</td>
            <td>CSS</td>
        </tr>
        <tr>
            <td>JavaScript</td>
            <td>jQuery</td>
        </tr>
    </table>
</body>
</html>

例子

六、图片：

6.1 图片标签：

在HTML里面，使用img标签来显示照片。对于ing属性来说有3个属性：src、alt和title。
<img src=" " alt=" " title=" " />

6.1.1 src属性：

src用于指定这个图片所在的路径，这个路径可以是相对路径，也可以是绝对路径。
<img src="图片路径">
例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Aurora</title>
</head>
<body>
   <img src="img/0.jpg">
</body>
</html>

例子
这里的"img/0.jpg"就是这个图片的路径，如果去掉它图片就不会显示出来了。

6.1.2 alt属性和title属性：

alt属性和title属性都是用来指定图片的提示文字的。但是两者之间的区别还是很大的。

  • alt属性：描述图片，描述文字是给搜索引擎看的，当浏览器无法显示图片时。页面会显示alt中的文字。
  • title属性：米哦啊书图片，描述文字给用户看的，当鼠标移到图片上时会看到title里面的文字。
    例子：alt属性
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Aurora</title>
</head>
<body>
    <!--<img src="img/0.jpg" alt="滑稽">这种正常写法显示正常，图片同上，这里就不展示了-->
   <img  alt="滑稽">       <!--模拟出错时-->
</body>
</html>

出错时浏览器会显示：
例子

例子：title属性：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Aurora</title>
</head>
<body>
   <img src="img/0.jpg" title="这是一幅滑稽图">       
</body>
</html>

例子
总结:使用时src属性和alt属性是必选的，title属性最好也添加。

6.2 图片路径：

路径一般分为两种：绝对路径和相对路径。

6.2.1 绝对路径：

绝对路径指的是图片在计算机中的完整路径。

例子
使用绝对路径调用图片：<img src="D:/桌面/Demo/img/0.jpg" />

6.2.2相对路径：

相对位置指的是相对于当前页面的位置，要仔细琢磨这句话。
例如：
例子

我们当前的页面是demo1，如果我们想要调用img01.png图片该怎么办？如图可以发现两者在同一层级，都在pages文件夹里面，所以可以直接使用<img src="img01.png" />。假如我想要在demo1页面调用0.jpg图片带怎么办？我们一层层分析，首先我们要清楚Demo、pages、img他们是在一个层级上面的，所以现在要调用0.jpg就需要先先离开pages文件夹，再进入img文件夹然后找到0.jpg图片再调用它。最终：<img src="../img/0.jpg" >。这里.. /表示上级目录。

6.3 图片格式：

网页图片有两种：位图和矢量图。

6.3.1 位图：

位图又叫做像素图，它是由像素点组成的。放大、缩小后图片会失真。在开发中有3种常见的位图：jpg（或jpeg）、png、gif。下面简单介绍一下这三者的区别：

  • jpg适合存储颜色复杂的图片，它的体积较大，不支持透明格式。
  • png是一种无损格式，可以无损压缩以确保网页打开速度，体积较小，支持透明但不适合颜色复杂的图片。
  • gif图片效果最差，但是可以制作动图。
    总结：需要颜色复杂、高质量的图片用jpg；一般图片、透明图片用png；动图用gif。

6.3.2 矢量图：

矢量图又叫做向量图，是一种用数学的形式来记录图片。因此矢量图可以放大、缩小、旋转都不会失真，但是不适合展示颜色丰富的图片。常见的格式有：.ai、.cdr、.fh、.swf，常见的有.swf。
总结一下图片格式：

  • 位图适合颜色丰富的图片；矢量图不适合颜色丰富的图片。
  • 位图的组成单位是像素；矢量图的组成单位是向量。
  • 位图受分辨率影响，操作会失真；矢量图不受分辨率影响，操作无影响。
  • 网页中大部分是位图。
  • 对PS、AI应该有所了解、掌握。

七、超链接：

九、表单：

评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值