HTML5+CSS3学习笔记第一天

一、HTML初体验1
1.HTML定义:超文本标记语言
  • 超文本:链接
  • 标记:标签、带尖括号的文本
2.标签语法
  • 双标签:成对出现,中间包裹内容
  • 单标签:只有开始标签 eg:水平线 hr、换行br
  • <>放英文字母即标签名
  • 结束标签多一个/
3.HTML基本骨架
<html>
	<head>
		<title>网页标题</title>
	</head>
	<body>
		  网页主体
	</body>
</html>

(vscode快速生成骨架:![英文]配合Enter/Tab键)

4.标签的关系
  • 父子关系(嵌套关系)
  • 兄弟关系(并列关系)
5.注释:

​ vscode快捷键:添加和删除都是 Ctrl+/

6.标题标签:h1~h6(双标签)
  • 注意:h1在一个网页中只能用一次
7.段落标签:p(双标签)
  • 独占一行
  • 段落之间有空隙
8.换行与水平线标签:br和hr(单标签)
9.文本格式化标签:
  • 加粗:strong|b
  • 倾斜:em|i
  • 下划线:ins|u
  • 删除线:del|s

(主要使用前者,因为前者自带强调含义)

10.图片标签
<img src="图片的URL">

(可能遇到的问题:图片复制粘贴不到vscode的文件夹中——拖动图片放进去)

  • 属性:

    属性 作用 说明
    alt 替换文本 图片无法显示的时候显示的文字
    title 提示文本 鼠标悬停在图片上面的时候显示的文字
    width 图片的宽度 值为数字,没有单位
    height 图片的高度 值为数字,没有单位
11.路径
  • 相对路径:从当前文件位置出发查找目标文件

    • /进入文件夹 文件夹名字/
    • . 表示当前文件所在文件夹 ./
    • …当前文件的上一级(以此类推多一个点就往上一级) …/
  • 绝对路径:从盘符出发查找目标文件(windows)

     <img src="C:\Users\南雨\Pictures\照片.jpg">
    

    (“/”和“\”都行)

    *实现友情链接:引入在线网址

12.超链接标签:点击跳转其他页面
  <a href="https://www.baidu.com/" target="_blank">跳转到百度</a>  
  <a href="./实例1.html">跳转到实例1</a>  <!--跳转到本地网页-->
  <a href="#">空链接</a>
  • 属性:

    target=“_blank” :新窗口打开跳转的网页

13.音频标签
 <!--controls:控制面板 loop:循环播放 autoplay:自动播放
      html5中属性名和属性值完全一样时,简写为一个单词-->
 <audio src="./群星 - 光荣啊,中国共青团.mp3" controls  loop autoplay></audio>
  • 属性:

    属性 作用 特殊说明
    src(必须属性) 音频URL 支持格式:MP3、Ogg、Wav
    controls 显示音频控制面板
    loop 循环播放
    autoplay 自动播放 为了提升用户体验,浏览器一般会禁用自动播放功能

​ 注意:用了自动播放属性但不能实现是因为浏览器禁用了自动播放

14.视频标签
 <video src="2d7f69c8c17d0658222ad5bc48692929.mp4" controls loop muted autoplay ></video>
  • 属性:

    属性 作用 特殊说明
    src(必须属性) 视频URL 支持格式:MP4、WebM、Ogg
    controls 显示视频控制面板
    loop 循环播放
    muted 静音播放
    autoplay 自动播放 为了提升用户体验,浏览器支持在静音状态自动播放

相关推荐

  1. HTML5+CSS3学习笔记第一

    2024-07-22 13:28:01       16 阅读
  2. html5css3前端学习笔记

    2024-07-22 13:28:01       26 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-07-22 13:28:01       52 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-07-22 13:28:01       54 阅读
  3. 在Django里面运行非项目文件

    2024-07-22 13:28:01       45 阅读
  4. Python语言-面向对象

    2024-07-22 13:28:01       55 阅读

热门阅读

  1. LeetCode 常见题型汇总

    2024-07-22 13:28:01       16 阅读
  2. electron 主进程和渲染进程通信

    2024-07-22 13:28:01       14 阅读
  3. 一个养殖类的网站的设计

    2024-07-22 13:28:01       18 阅读
  4. 基于深度学习的病变检测

    2024-07-22 13:28:01       17 阅读
  5. 阿里云服务器使用Docker安装JDK 8

    2024-07-22 13:28:01       14 阅读
  6. Model Import Settings

    2024-07-22 13:28:01       13 阅读
  7. Spring Boot 的无敌描述

    2024-07-22 13:28:01       15 阅读
  8. 简述ETL工具Informatica

    2024-07-22 13:28:01       13 阅读
  9. 瀚高数据库初级考试认证

    2024-07-22 13:28:01       12 阅读
  10. 28. Find the Index of the First Occurrence in a String

    2024-07-22 13:28:01       15 阅读
  11. WSL 2 Oracle Linux 9.1 安装配置

    2024-07-22 13:28:01       19 阅读
  12. 项目进行到中后期,我发现开发改了代码

    2024-07-22 13:28:01       19 阅读