1.HTML入门
本章目标
- 简介
- 文本标签
- 图像标签
- 链接标签
- 音视频标签
本章内容
一、简介
HTML(HyperTextMark-upLanguage)即超文本标记语言或超文本链接标示语言,是WWW的描述语言。
WWW是WorldWideWeb的缩写,可译为“环球网”或“万维网”
1、HTML文件的基本结构
注意:标签之间要有缩进,才能体现层次感,方便阅读和修改。
2、HTM标签
HTML标签由标签、属性、内容组成,属性与内容可选。
- 包含内容的标签以<…>开始,</…>结束
- 不包含内容的标签可以是如下格式:<…/>
- 属性的值尽量用双引号或单引号修饰
- 标签中的内容可以是其他的标签,称为原标签的子标签,子标签必须在父标签结束之前结束
3、文档类型(DOCTYPE)声明
<!DOCTYPE html>
The new character encoding (charset) declaration is also very simple:
<meta charset="UTF-8">
HTML5 中默认的字符编码是 UTF-8
4、注释
- 注释就是对代码的解释和说明,其目的就是提高代码的可读性
- HTM中的注释
注意:在vscode中使用Ctrl+/
添加注释
二、文本标签
1、标题标签
标题标签<h#> … </h#>
=1, 2, 3, 4, 5, 6
说明:
到
字体大小依次递减
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>
H1 到 H6 标签用于指定不同级别的标题
2、段落标签
<body>
<p align=“center”>蜗牛欢迎您的来访</p>
<p align=“left”>华为。。。。<br>
……
</p>
</body>
3、换行标签
<body>
<p align=“left”>华为。。。。<br>
……
</p>
</body>
4、内容分隔
标签
<body>
<hr size="5" color="red" width="300">
<hr size="10" color="black" width="200">
<hr size="5" color="#0000ff" width="50%">
</body>
size:线的厚度值
color:线的颜色
width:线的宽度
5、span标签
用于存放文本的标签,存放一些简短的文本或提示信息
<!-- span标签:一些提示信息 -->
<span>这是span标签</span>
6、特殊文本格式
标签 | 说明 |
---|---|
下标文字 | |
上标文字 | |
删除线 | |
斜体 | |
粗体 |
H<sub>2</sub>O E=mc<sup>2</sup>
<del>该段文字已被删除</del>
7、特殊字符
特殊符号 | 字符实体 | 示例 |
---|---|---|
空格 | |
<a href="#">百度</a> | <a href="#">新浪</a> |
大于号(>) | > |
如果时间> 晚上6点,就坐车回家 |
小于号(<) | < |
如果时间< 早上7点,就走路去上学 |
引号(“) | " |
W3C规范中,HTML的属性值必须用成对的" 引起来 |
版权符号@ | © |
版权所有 © 成都蜗牛创想科技有限公司 |
三、图像标签
在HTML中,图像的使用很广泛,图像标签属于单标签,只有属性没有内容
1、语法
<img src="path" alt="text" title="title" width="x" height="x"/>
src
:指定的是图片的路径alt
: 当图片加载失败后显示该文本信息,主要在SEO优化的时候有作用width
:设置图片的宽度,以像素为单位height
:设置图片的高度,以像素为单位title
:鼠标悬停在图片上会显示的文字
2、路径
路径:是指某个文件在某个目录下的具体位置描述。分为:绝对路径、相对路径
-
绝对路径:指目录下的绝对位置,直接到达目标位置。
比如:蜗牛学院西安校区:陕西省西安市未央区凤城二路第五国际A座5层
在程序中,绝对路径一般指网络地址(以http或https)或者以系统盘符开头的地址。
-
相对路径:指由这个文件相对于某个参考文件夹的位置描述。即从当前目录出发,其他文件所在的位置。
- 上一级目录:../
- 子目录:子目录/
注:火狐浏览器对绝对路径不支持,使用谷歌浏览器测试
3、图像单位
- 像素
什么是像素。像素是分辨率的单位,分辨率越高,那么显示效果就越精细和细腻。在网页设计中,px常用于确定文本、图像和元素的大小和位置,像素也是一个绝对单位,它不会因为浏览器窗口的改变或者其他元素尺寸的改变而变化,比如我们调整浏览器窗口,改变浏览器的默认字体大小,都不会影响px单位的变化
<img src="images/apple.jpg" height="160px"/>
<img src="images/grape.jpg" height="160px"/>
<img src="images/hetao.jpg" height="160px"/>
一般我们只设置宽高中的一个属性,另一个属性浏览器会根据图片自身比例来等比例缩放
- 百分比:百分比是相对单位,它的相对参照为父元素
<div style="width: 200px;">
<img src="./img/pic.png" alt="" width="50%">
<img src="./img/pic.png" alt="" width="30%">
</div>
4、常见的图片格式
格式 | jpg | gif | png |
---|---|---|---|
画质 | 好 | 一般 | 较好 |
大小 | 一般不适合小图 | 小 | 很小 |
透明 | 不支持 | 支持 | 支持 |
动画 | 不支持 | 支持 | 不支持 |
四、链接标签
1、超链接
<a href="path" target="目标窗口位置">链接文本或图像</a>
href
:指定要跳转的页面,值为超链接地址或者锚点
target
:设置跳转的方式
_blanck
新开窗口_self
当前窗口_top
顶层窗口_parent
父窗口 姑娘,欢迎降落在这残酷的世界
注意
- 超链接可以连接本地服务器资源,也可以链接其他服务器资源
- 一般导航都是由超链接来实现
- 可以使用超链接来完成锚点功能,回到指定位置
- 超链接href属性默认写
#
代表跳转到本页面
2、锚链接
概念:当点击链接的时候,会跳转(定位)到本页面的某个位置,成为锚链接
应用场景:百度百科上明星介绍;小说中的目录定位
锚链接:从A页面的甲位置跳转到本页中的乙位置或者从A页面的甲位置跳转到B页面中的乙位置
创建步骤
-
创建跳转标记
乙位置
-
创建跳转链接
3、功能性链接
五、音视频标签
1、音频标签
HTML
<audio src="music/纯音乐 - 青花瓷 (古筝版).mp3" autoplay controls></audio>
autoplay:则视频在就绪后马上播放
controls:则向用户显示控件,比如播放按钮
2、视频标签
HTML
<video src="music/幽中竹 - 古筝老师露露小姐姐古筝弹奏周杰伦《青花瓷》伴奏版。.mkv" controls></video>
autoplay:则视频在就绪后马上播放
controls:则向用户显示控件,比如播放按钮
思维导图
本文来自博客园,作者:icui4cu,转载请注明原文链接:https://www.cnblogs.com/icui4cu/p/18824873