html总结1-CSDN博客

本文链接：https://blog.csdn.net/lvjingjie1/article/details/127173545

主要内容：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>