HTML5、CSS3学习笔记(一)标签

195 阅读2分钟

移动端工程师学习javascrip的笔记和归纳,内容非常基础。

HTML标签

HIML基本骨架是网页模版

  • html:整个页面

  • head:网页头部,存放给浏览器看的代码,例如css

  • body:网页主体,存放给用户看的代码,例如图片、文字


<strong>

  文字内容

</strong>

<hr>

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Document</title>

</head>

<body>

  

</body>

</html>

标签

1、标题标签 h

一般用于新闻标题、文章标题、网页区域名称、产品名称等

 标签名:h1~h6 双标签

 标签特点:

  • 文字加粗

  • 字号逐渐减小

  • 独占一行

h1标签在一个网页中只能用一次,用来放新闻标题或网页logo、


<h1>标题></h1>

2、段落标签 p

标签名:p 双标签

标签特点:

  • 自动换行

  • 段落间有间隙


<p>段落1</p>

<p>段落2</p>

<p>段落3</p>

3、单标签 br hr

只有开始标签,没有结束标签


 <br>换行

 <hr>水平线

4、文本格式化标签

为文本添加特殊格式,以突出重点


  <strong>加粗</strong>

  <em>倾斜</em>

  <ins>下划线</ins>

  <del>删除</del>

5、超链接标签 a

点击跳转到其他页面


<a href = "www.baidu.com" target="_blank">跳转到百度</a>

  • href 属性值是跳转地址,是超链接的必须属性

  • 开发初期,不确定跳转地址,href = “#”, 空链接

  • target=“_blank”属性的作用:在新窗口打开页面

6、图片标签 img


<img src="图片的url">

<img src="./11.png">

  • src:指定图像的位置和名称,是的必须属性

  • alt:替换文本,图片无法显示时显示的文字

  • title:提示文字,鼠标悬停时显示的文字

  • width:图片的宽度,值为数字,没有单位 浏览器缩放图片,默认是等比缩放

  • height:图片的高度,值为数字,没有单位

7、音频标签 audio


<audio src="音频的url" controls="controls" loop="loop"></audio>

<audio src="音频的url" controls loop autoplay></audio>

  


  • src:音频url,是audio的必须属性,支持MP3、ogg、war

  • controls:显示音频控制面板

  • loop:循环播放

  • autoplay:自动播放,为了提升用户体验,浏览器一般禁用自动播放

在HTML5里,如果属性名和属性值完全一样,可以省略属性值

8、视频标签 video


  <video src="./22.mp4" controls loop muted autoplay></video>

  • src:视频url,是video的必须属性,支持MP4、webM,ogg

  • controls:显示音频控制面板

  • loop:循环播放

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

  • muted:静音播放

在html中,要想自动播放,必须有muted属性

相对路径、绝对路径

  • . 当前文件所在文件夹

  • .. 当前文件上一级文件夹

  • / 进入某个文件夹里面

参考资料