图片
1.页面上可以插入图片，能够插入的图片类型是：jpg(jpeg)、gif、png、bmp
<img src="baby.jpg" />
img是英语image“图片”的简写
src 是英语source“资源”的简写，千万不要写成scr。使用相对路径
src是img标签的属性，baby.jpg是这个属性的值。
这个标签和我们之前学的，都不一样，因为这个标签不是“对儿”。自封闭标签，也称为单标签。
2.alt属性
alt属性：
<img src="baby.jpg" alt="巴黎结婚照" />
alt是英语alternate“替代”的意思，就表示不管因为什么原因，当这个图片无法被显示的时候，出现的替代文字（有的浏览器不支持）。
超级链接
1.基本写法
一个网站，是由很多html网页组成的，html网页之间能够通过超级链接互相跳转，从而形成了“网”。
语法：
<a href="1.html">结婚照</a>
a是英语anchor“锚”的意思，就好像这个页面往另一个页面扔出了一个锚。是一个文本级的标签。
href是英语hypertext reference超文本地址的缩写。读作“喝瑞夫”，不要读作“喝夫”。
2.a标签的另外两个属性
title 悬停文本
<a href="09_img.html" title="很好看哦">结婚照</a>
target 是否在新窗口中打开：
<a href="09_img.html" title="很好看哦" target="_blank">结婚照</a>
target实际上是“目标”的意思。blank就是“空白”的意思，就表示新建一个空白窗口。为毛有一个_ ，就是规定，没啥好解释的。
3.页面内的锚点
页面当中可以有锚点，所谓的锚点，就是一个小标记，这个小标记是用户不可察觉的，用户不知道这里有一个标记。
锚点用name属性来设置，一个a标签如果name属性（或者id属性），那么就是页面的一个锚点。
<a name="wdzp">我的作品</a>
或者：
<a id="wdzp">我的作品</a>
那么网址：
1.html#wdzp
就能够让这个锚点在页面最顶端显示，此时页面有卷动。
这样子，用户体验会好一点，用户可以直接看到页面的内容。
如果有一个超级链接，指向页面中的锚点，那么就是：
<a href="#wdzp">点击我就查看我的作品</a>
列表（列表有3种）
1.无序列表
无序列表，用来表示一个列表的语义，并且每个项目和每个项目之间，是不分先后的。
ul就是英语unordered list，“无序列表”的意思。
li 就是英语list item ， “列表项”的意思。
这是我们学习的第一个“组标签”，就是要么不写，要么就要写一组。也就是说，所以的li不能单独存在，必须包裹在ul里面；
例子：
<ul>
<li>北京</li>
<li>上海</li>
<li>广州</li>
<li>铁岭</li>
</ul>
浏览器会默认的给无序列表小圆点的“先导符号”，但是，我们这里再次强调，ul的作用，并不是给文字增加小圆点的，而是增加无序列表的“语义”的。
ul的儿子，只能是li。但是li是一个容器级标签，li里面什么都能放，甚至于可以再放一个ul。
2.有序列表
ordered list 有序列表，用ol表示
例子：
<ol>
<li>小苹果</li>
<li>月亮之上</li>
<li>最炫民族风</li>
</ol>
浏览器会自动增加阿拉伯序号，也就是说，ol和ul就是语义不一样，怎么使用都是一样的。ol里面只能有li，li必须被ol包裹。li是容器级。
3.定义列表
定义列表也是一个组标签，不过比较复杂，出现了三个标签：
dl表示definition list 定义列表
dt表示definition title 定义标题
dd表示definition description 定义表述词儿
dt、dd只能在dl里面；dl里面只能有dt、dd
例子：
<dl>
<dt>北京</dt>
<dd>国家首都，政治文化中心</dd>
<dt>上海</dt>
<dd>魔都，有外滩、东方明珠塔、黄浦江</dd>
<dt>广州</dt>
<dd>中国南大门，有珠江、小蛮腰</dd>
</dl>
表达的语义是两层：
1) 是一个列表，列出了北京、上海、广州三个项目
2）每一个词儿都有自己的描述项。
dd是描述dt的
定义列表用法非常灵活，可以一个dt配很多dd，dt、dd都是容器级标签，想放什么都可以。
div和span
div和span是非常重要的标签，div的语义是division“分割”；（一个小容器）
span的语义就是span“范围、跨度”。
CSS课程中你将知道，这两个东西，都是最最重要的“盒子”。
div在浏览器中，默认是不会增加任何的效果改变的，但是语义变了，div中的所有元素是一个小区域。
div标签是一个容器级标签，里面什么都能放，甚至可以放div自己
span也是表达“小区域、小跨度”的标签，但是是一个“文本级”的标签。语义：p段落、h标题
就是说，span里面只能放置文字、图片、表单元素。 span里面不能放p、h、ul、dl、ol、div。
span里面是放置小元素的，div里面放置大东西的：
test1:html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 图片标签 -->
<img alt="图片无法显示" src="1清爽小妹妹.jpg"><!-- src:资源路径:显示图片的路径，可以是本地路径，也可以是网络路径 -->
<!-- alt：图片无法显示时替代的文字 -->
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1589168290081&di=baa713537b601844c65c46fca7c8838c&imgtype=0&src=http%3A%2F%2Ft9.baidu.com%2Fit%2Fu%3D2268908537%2C2815455140%26fm%3D79%26app%3D86%26f%3DJPEG%3Fw%3D1280%26h%3D719">
<!-- 超链接 -->
<a href="test2.html" title="很好看" target="_blank">第二个页面</a><!-- href:跳转路径 title：鼠标悬停在标签时显示的文字，target：_blank跳转时新开一页面 -->
<a href="#p">描点跳转</a>
<!-- 图片标签 -->
<img alt="图片无法显示" src="1清爽小妹妹.jpg"><!-- src:资源路径:显示图片的路径，可以是本地路径，也可以是网络路径 -->
<!-- alt：图片无法显示时替代的文字 -->
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1589168290081&di=baa713537b601844c65c46fca7c8838c&imgtype=0&src=http%3A%2F%2Ft9.baidu.com%2Fit%2Fu%3D2268908537%2C2815455140%26fm%3D79%26app%3D86%26f%3DJPEG%3Fw%3D1280%26h%3D719">
<p id="p">
描点跳转 <br>描点跳转 <br>描点跳转 <br>描点跳转 <br>描点跳转 <br>描点跳转 <br>
描点跳转 <br>描点跳转 <br>描点跳转 <br>描点跳转 <br>描点跳转 <br>描点跳转 <br>
描点跳转 <br>描点跳转 <br>描点跳转 <br>描点跳转 <br>描点跳转 <br>描点跳转 <br>
描点跳转 <br>描点跳转 <br>描点跳转 <br>描点跳转 <br>描点跳转 <br>描点跳转 <br>
描点跳转 <br>描点跳转 <br>描点跳转 <br>描点跳转 <br>描点跳转 <br>描点跳转 <br>
描点跳转 <br>描点跳转 <br>描点跳转 <br>描点跳转 <br>描点跳转 <br>描点跳转 <br>
描点跳转 <br>描点跳转 <br>描点跳转 <br>描点跳转 <br>描点跳转 <br>描点跳转 <br>
</p>
<br>
列表（列表有三种）
无序列表--ul-li
<ul>
<li>北京</li>
<li>上海</li>
<li>广州</li>
<li>铁岭</li>
</ul>
有序列表--ol-li
<ol>
<li>小苹果</li>
<li>月亮之上</li>
<li>最炫民族风</li>
</ol>
自定义列表--dl-dt-dd
<dl>
<dt>北京</dt>
<dd>国家首都，政治文化中心</dd>
<dt>上海</dt>
<dd>魔都，有外滩、东方明珠塔、黄浦江</dd>
<dt>广州</dt>
<dd>中国南大门，有珠江、小蛮腰</dd>
</dl>
<!-- div 属于容器级别，放什么都可以 -->
<div id="">
<dl>
<dt>北京</dt>
<dd>国家首都，政治文化中心</dd>
<dt>上海</dt>
<dd>魔都，有外滩、东方明珠塔、黄浦江</dd>
<dt>广州</dt>
<dd>中国南大门，有珠江、小蛮腰</dd>
</dl>
</div>
<!-- span标签放的就是文本内容 -->
<span style="color: blue;">哥萨克来继续这次哦啊是弗兰克</span>
</body>
</html>
test2.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
我是第二个页面
</body>
</html>
扫一扫
240
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
