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&nbsp;E=mc<sup>2</sup>&nbsp;
 <del>该段文字已被删除</del>

7、特殊字符

特殊符号 字符实体 示例
空格 &nbsp; <a href="#">百度</a>&nbsp;|&nbsp;<a href="#">新浪</a>
大于号(>) &gt; 如果时间&gt;晚上6点,就坐车回家
小于号(<) &lt; 如果时间&lt;早上7点,就走路去上学
引号(“) &quot; W3C规范中,HTML的属性值必须用成对的&quot;引起来
版权符号@ &copy; 版权所有 © 成都蜗牛创想科技有限公司

三、图像标签

在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:则向用户显示控件,比如播放按钮

思维导图

image

posted @ 2025-04-14 15:12  icui4cu  阅读(59)  评论(0)    收藏  举报