01-HTML基础(摘自黑马前端笔记)

206 阅读3分钟

1. 标签语法

HTML超文本标记语言————HyperText Markup Language。 超文本:链接 标记:标签,带尖括号的文本

1.1 标签结构

  • 成对出现,包裹内容
  • <>里放英文字母(标签名)
  • 结束标签比开始标签多/
  • 标签分类:双标签和单标签

2. HTML骨架

  • html:整个网页
  • head:网页头部,用来存放给浏览器看的信息,例如CSS title:网页标题
  • body:网页主体,用来存放给用户看的信息,例如图片、文字

3. 标签的关系

  • 父子关系(嵌套关系):子级标签换行且缩进(Tab键)
  • 兄弟关系(并列关系):兄弟标签换行要对齐

4. 注释

对代码的解释和说明,提高程序的可读性,方便理解、查找代码。

5. 标题标签

一般用在新闻标题、文章标题、网页区域名称、产品名称等 显示特点:

  • 文字加粗
  • 字号逐渐减小
  • 独占一行(换行)

注:h1标签在一个网页中只能用一次,用来放新闻标题或网页的logo,h2~h6没有使用次数的限制

6. 段落标签

一般用在新闻段落、文章段落、产品描述等,显示特点如下:

  • 独占一行
  • 段落之间存在间隙

7. 换行和水平线

  • 换行:br
  • 水平线:hr

8. 文本格式化标签

为文本添加特殊格式,以突出重点。常见的文本格式:加粗、倾斜、下划线、删除线等。

  • strong——>加粗
  • em——>倾斜
  • ins——>下划线
  • del——>删除线
  • b——>加粗
  • i——>倾斜
  • u——>下划线
  • s——>删除线

注:前四个标签自带强调含义(语义)。

9. 图像标签

用于在网页中插入图片

其中,属性src是用于指定图像的位置和名称,是必须属性。 图像标签img的属性:

  • alt:替换文本,图片无法显示时显示的文字
  • title:提示文本,鼠标悬停在图片上时显示的文字
  • width:图片的宽度
  • height:图片的高度

10. 路径

路径指的是查找文件时,从起点到终点经历的路线。

路径分类:

  • 相对路径:从当前文件位置出发查找目标的文件
  • 绝对路径:从盘符出发查找到的目标文件

10.1 相对路径

查找方式:从当前文件位置出发查找目标文件

  • 特殊符号:/表示进入某个文件夹里面——>文件夹名/
  • .表示当前文件所在的文件夹——>./
  • ..表示当前文件的上一级文件夹——>../

10.2 绝对路径

查找方式:Windows电脑从盘符出发;Mac电脑从根目录(/)出发

注:Windows默认是\,其他系统是/,建议统一写为/

特殊的绝对路径——>在线网址:www.baidu.com/?tn=8507023… ,应用场景:网页底部的友情链接

11. 超链接标签

跳转到百度

href属性值是跳转地址,是超链接的必须属性。 超链接默认是在当前窗口跳转页面,添加target="_blank"实现新窗口打开页面。

注:开发初期,不确定跳转地址,则href值为#,表示空链接,不会跳转,会在当前页面刷新一次。

12. 音频

常见属性:

  • src:音频URL,支持MP3、Ogg、Wav
  • controls:显示音频控制面板
  • loop:循环播放
  • autoplay:自动播放-为提升用户体验,浏览器一般会禁用自动·播放功能

注:在写H5的属性时,若属性名和属性值相同,可简写为一个单词。

13. 视频

  • src:视频URL,支持MP4、WebM、Ogg

  • controls:显示视频控制面板

  • loop:循环播放

  • autoplay:自动播放-为提升用户体验,浏览器支持在静音状态自动播放

  • muted:静音播放