HTML教程(下)-CFANZ编程社区

第十一讲.语义化标签

一个网页分为三部分,结构,表现,行为,HTML负责网页结构

在使用HTML标签时,应关注标签的语义,而不是样式

快捷键:ctrl+回车,换行,但文本不随之下移

标题标签:h1-h6(关注的不是它的长相,只是它的语义,h1最重要,h6最不重要)

一般情况下,一个页面里只有一个h1.

用的最多的是h1-h3,后面三个其实不太重要了

标题在网页中独占一行,称为块元素,标题标签都是块元素.
p标签:在p标签中的内容代表一个段落,独占一行

p也是一个块元素

hgroup标签:将标题放在其中以分组,如:

<hgroup>
	<h1>大标题</h1>
	<h2>小标题</h2>
</hgroup>

em标签:用于表示语音语调的加重,它不独占一行,称为行内标签
```
<p>今天天气<em>真</em>不错<p>
```

strong标签:表示强调,行内标签

<p>你今天必须要<strong>完成作业</strong></p>

blockquote标签:引用一个长语句,块元素会换行,并在网页中出现缩进

<p>
	鲁迅说:
	<blockquote>
	这句话我从来没说过
	</blockquote>
</p>

q标签:表示一个短引用,不换行

子曰:<q>学而时习之,不亦说乎<q>

br标签:换行,是自结束标签,写一个换一行,两个换两行.

第十二讲.块和行内

块元素:block element,对网页页面进行布局

行内元素:inline element,包裹文字,对文字设置特殊效果

一般会在块元素中放行内元素(基本上什么都能放),但是不会往行内元素中放块元素.

p元素中不能放任何块元素

浏览器解析网页时,会自动对不符合规范的部分进行修正,但是并不代表被修正后的可以正确显示的代码就是正确的.

右键点网页,然后点检查,点击里面的elements,可以查看网页被浏览器修正后的代码样子.

第十三讲.布局标签

布局标签，也叫结构化语义标签

关注语义,不要关注样式,因为如果不加CSS他们都长一个样

h1-h6标签
header标签：表示网页的头部
main标签：表示网页的主体部分，一个页面中只有一个
footer标签:标示网页的底部
nav标签:表示网页中的导航栏
aside标签:和主题相关但不属于主题的其他内容(侧边栏)
article标签:表示独立的文章
section标签:表示一个独立的区块,当上面的标签都不能表示时,使用section
div标签:没有语义,用来表示区块,用的最多,因为它可以代替上面所有的,但是有点违背HTML5的思想
span标签:行内元素,没有语义,用来选中一部分文字.

第十四讲.列表

列表(List),分三种:

有序列表

使用

标签创建列表,使用
表示列表项:

<ol>
	<li>结构</li>
    <li>表现</li>
    <li>行为</li>
</ol>

无序列表

用
- 创建,剩下的都一样.用的最多
定义列表

使用

创建列表,使用表示定义的内容,使用
进行解释说明

它的结构有点像下拉菜单
```
<dl>
	<dt>结构</dt>
	<dd>结构表示网页的结构,用来规定网页哪里是标题,哪里是段落</dd>
</dl>
```

列表之间可以互相嵌套

第十五讲.超链接

所谓的超文本指的是超链接,使用超链接可以让我们从一个页面跳转到另一个页面

超链接可以让我们从一个界面跳转到另一个界面

超链接是行内元素,在超链接中,可以嵌套除了它自身之外的任何的元素

使用a标签定义超链接:

<a>超链接</a>

alt+shift+方向键,复制当前行的文字

但是仅仅这样还不够,这时候的超链接里还没有别的网页,不能点

需要在其中加入网页,href表示跳转的目标路径:

<a href='http://www.baidu.com'> 超链接 </a>

这样就能点了.

除了写外部网站的地址,也可以写内部页面的地址.

写法为同一目录下的文件名称:

<a href='07.列表.html'>超链接2 </a>

第十六讲.相对路径

href指定的是跳转页面的路径,

可以是一个网址,称为绝对路径,也可以是文件名,叫相对路径.

当我们需要跳转到一个服务器内部的页面时,都会使用相对路径,相对路径都会使用./或…/开头

./可以省略,默认写的是./

./表示当前文件所在的目录,即它所在的文件夹,如果超链接的文件不在此目录中,会404
…/表示的是当前文件的上一级目录,即和他所在文件夹同一级的文件.

而如果要找和当前文件同目录下的文件夹里的文件,则在选中文件夹以后,后面加斜杠:

<a href='./inner/target2.html'>超链接</a>

如果找和他所在的文件夹在一起的文件夹中的文件,则要先跳出来,再进去:

<a href='../outer/target3.html'>超链接</a>

第十七讲.超链接其他用法

点击超链接文字，默认会刷新当前页面为超链接页面.

如何打开一个新的标签页,现实超链接内容呢?

target属性,用来指定超链接打开的位置

它有一些可选值:

_self,默认值,在当前页面中打开超链接

<a href='http://baidu.com' target='_self'> 超链接 </a>

_blank,在一个新的页面打开超链接

<a href='http://baidu.com' target='_blank'> 超链接 </a>

超链接不仅可以跳转到其他页面,也可以跳转到当前页面的其他位置(回到顶部功能)

可以直接将超链接的href属性设置为#,这样点击超链接以后,页面不会发生跳转,而是转到当前页面的顶部

<a href='#'> 超链接 </a>

如果想去底部,实际上是去最后一个标签的位置,则需要先将最后一个标签做一个标记,id属性

id属性在html中是唯一,不重复的,每一个标签都可以添加一个id属性,id属性是元素的唯一标识,页面中不能出现重复的id属性

id属性值是区分大小写的,且必须为字母开头,如:

<a id='buttom' href='#'>回到顶部</a>

如果就是写了两个相同的id属性,则靠前的id生效

有了它,我们就可以实现跳转到底部,甚至跳转到任意指定位置,只需要将href的属性值设置为想要**’#+跳转位置的id属性值’**即可:

<a id='#bottom'> 去底部 </a>

补充:在实际应用时,有时候刚开始并不知道超链接需要跳转到哪个位置,这时候就可以先将href设为#,后期再改.#作为超链接路径的占位符

还有一种占位符:‘javascript:;’,设置它为占位符,真的一点反应都不会有.

<a id='javascript:;'> 这是一个超链接 </a>

第十八讲.图片标签

图片标签用于向当前页面中引入外部图片

要使用img标签引入外部图片.img自结束标签

src属性指定的是外部图片的路径,同样可以是相对路径或者绝对路径

相对路径使用方法:

<img src='./img/1.jpg'>

绝对路径使用方法:

上网搜索一张图片,直接右键复制图片地址,然后粘贴到src属性中:

<img src='https://img1.baidu.com/it/u=3648003598,1299664330&fm=253&fmt=auto&app=138&f=JPEG?w=382&h=500'>

但是这样实际上是盗图,不太好.

img是一种替换元素,是介于块元素和行内元素之间的元素

替换元素指的是页面中显示的不是img本身,而是img引入的外部资源.

还有一种alt属性,是对图片的描述,如:

<img src='./img/1.jpg' alt='松鼠'>

这个默认是不显示的,但是在图片加载不出来的时候会显示

搜索引擎会根据alt中的内容来识别图片.

搜索的钢铁侠的时候,搜的就是alt属性写的是钢铁侠的内容

如果不写alt属性,搜索引擎就不会识别你的图片

width属性，指定图片的宽度;height属性，指定图片的高度.单位均为像素

<img width='500' src='https://img1.baidu.com/it/u=3648003598,1299664330&fm=253&fmt=auto&app=138&f=JPEG?w=382&h=500'>

如果宽度和高度只修改一个,另一个会等比例缩放.

但是如果两个同时改变,图形的比例会改变.

一般在PC端,不建议修改图片的大小,大图缩小浪费内存,小图放大造成失真.所以最好是需要多大就裁多大

但是如果是移动端,经常对图片进行缩放.

第十九讲.图片的格式

常见格式:

jpeg(也叫jpg)

颜色丰富,不支持透明效果,不支持动图

用来表示照片
gif

支持的颜色少,支持简单透明,支持动图

用来表示颜色单一的图片和动图
png

支持的颜色丰富,支持复杂透明,不支持动图

颜色丰富的复杂透明图片(为网页而生)
webp

谷歌新推出的,专门用来表示网页中的图片

它具备了其它格式的做所有优点,完美图片

致命缺点:兼容性不好,老的打不开

效果一样用小的,效果不一样用效果好的,统筹规划

还有一种格式:base64,严格意义上并不是一个完整的格式,而是一种编码,直接将图片转换成字符,通过字符引入图片.

第二十讲.内联框架

iframe标签,也是替换标签,是成对出现的

用于向当前页面中引入其他页面

src属性,指定引入网页的路径:

<iframe src='http://www.qq.com' frameborder='0'> </iframe>

与超链接的不同在于,这个不是跳转,而是直接在当前网页中显示出其他网页的内容

同样有width属性和height属性

性感荷官在线发牌就是这个

目前用的不多了已经

第二十一讲.音视频引入

音频:

audio标签,用来向页面中引入外部音频文件,也是替换元素:

<audio src='./souce/audio.mp3'> </audio>

音视频文件引用时,默认是不允许用户自己控制播放停止的.

如果希望用户可以控制播放和停止,则要加上一个controls属性:(没有属性值)

 <audio src='./souce/audio.mp3' controls> </audio>

如果希望在打开时自动播放,则加上一个autoplay属性,也没有属性值:(但是目前大多数浏览器都不会自动播放)

 <audio src='./souce/audio.mp3' controls autoplay> </audio>

另有一个loop属性,写上了以后音乐可以循环播放(同样没有属性值)

除了通过src来指定文件路径,还可以通过source来指定文件路径:

<audio>
    对不起,您的浏览器不支持播放音频,请升级浏览器
	<source src='./source/audio.mp3' controls>
</audio>

很麻烦,但是优点是支持的浏览器会自动去找source标签,显示音频播放器,而忽略文字.

但是不支持的浏览器会显示文字,起到提示作用.

另一个优点是:一个audio中可以写多个文件

视频:

video标签,用法与audio类似,引入的是视频

<video controls>
	<source src='./source/flower.webm'>
    <source src='./source/flower.mp4'>
</video>

如果支持第一个格式,就会只显示第一个而忽略第二个,如果不支持第一个就会显示第二个

这里用的都是相对路径,但是实际开发中都是使用绝对路径

有专门托管音视频的企业,把音视频放到他们那里,可以减轻本地服务器的压力