主要内容:3基本结构,4注释,5标题,6段落,7换行,8水平线,9文本格式化,10图片,11音频,12视频,13超链接
1、HTML:超文本标记语言。
2、工具:谷歌浏览器,vscode
3、HTML基本结构(vscode生成)
英文感叹号+enter
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
4、注释(内容是含义或功能)
注释快捷键:ctrl+/(添加注释或取消注释)
<!-- 注释 -->
5、标题标签:文章主题。h1,h2,h3,h4,h5,h6
特点:文字加粗,独占一行
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
6、段落标签:分段显示。p
特点:段落之间存在间隙,独占一行
<p>文章段落1</p>
<p>文章段落2</p>
7、换行标签:强制换行。br
特点:单标签,标签后面的内容下一行显示
<p>我爱中国。<br> 我生在红旗下,长在春风里。</p>
8、水平线标签:添加水平线。hr
特点:单标签,在页面中显示一条水平线
<h1>热爱祖国</h1>
<hr>
<p>我爱中国。<br> 我生在红旗下,长在春风里。</p>
9、文本格式化标签:文字加粗,下划线,倾斜,删除线效果。strong,ins,em,del
特点:文本格式化
<strong>加粗</strong>
<b>加粗</b>
<ins>下划线</ins>
<u>下划线</u>
<em>倾斜</em>
<i>倾斜</i>
<del>删除线</del>
<s>删除线</s>
10、图片标签:显示图片。img
特点:单标签,借助标签属性
基本属性:src,alt
----属性名:src,属性值:目标图片的路径
----属性名:alt,属性值:替换文本
其他属性:title,width,height
----属性名:title,属性值:提示文本,,title属性不仅仅可以用于图片标签,还可以用于其他标签
----属性名:width和height,属性值:宽度和高度(数字)
<img src="wallpaper.jpeg" alt="电脑壁纸">
<img src="wallpaper.jpeg" alt="电脑壁纸" title="粉丝浪漫治愈壁纸">
<img src="wallpaper.jpeg" alt="电脑壁纸" title="粉丝浪漫治愈壁纸" width="500">
<img src="wallpaper.jpeg" alt="电脑壁纸" title="粉丝浪漫治愈壁纸" width="500" height="300">
模板:
<img src="" alt="" title="" width="" height="">
11、音频标签:插入音频。audio
特点:默认不显示控件,不会自动播放,借助标签属性
基本属性:src,controls
----属性名:src,属性值:音频的路径
----属性名:controls,显示播放的控件,不需要属性值
其他属性:autoplay,loop
----属性名:autoplay,自动播放(部分浏览器不支持),不需要属性值
----属性名:loop,循环播放,不需要属性值
<audio src="./meiyou.mp3" controls></audio>
<audio src="./meiyou.mp3" controls loop></audio>
模板:
<audio src="" controls loop></audio>
12、视频标签:插入视频。vedio
特点:默认好像一张图片,不会自动播放,借助标签属性
基本属性:src,controls
----属性名:src,视频的路径,属性值:视频的路径
----属性名:controls,显示播放的控件,不需要属性值
其他属性:autoplay,loop
----属性名:autoplay,自动播放(谷歌浏览器中需配合muted实现静音播放),不需要属性值
----属性名:loop,循环播放,不需要属性值
<video src="./shipin.mp4" controls></video>
<video src="./shipin.mp4" controls autoplay muted></video>
<video src="./shipin.mp4" controls loop></video>
模板:
<video src="" controls autoplay muted loop></video>
13、超链接标签:点击跳转页面。a
特点:字体蓝色,下划线,当前窗口打开,内部可以包裹内容,借助标签属性
基本属性:href,target
----属性名:href,跳转地址,属性值:跳转页面的路径,,空链接:#
----属性名:target,目标网页的打开形式,属性值:_blank(新窗口), _self(默认,当前窗口)
<a href="http://wwww.baidu.com">百度一下</a>
<a href="http://wwww.baidu.com" target="_blank">百度一下</a>
<a href="#" target="_blank">百度一下</a>
<a href="./index.html" target="_blank">百度一下</a>
模板:
<a href="#" target="_blank">xxx</a>