HTML标签学习

最新推荐文章于 2024-07-25 11:26:35 发布

认真学习的宋小姐

最新推荐文章于 2024-07-25 11:26:35 发布

阅读量68

点赞数

分类专栏：笔记文章标签： html vscode

本文链接：https://blog.csdn.net/qq_51946936/article/details/120337818

版权

笔记专栏收录该内容

30 篇文章 2 订阅

订阅专栏

HTML标签学习

目标:学习HTML排版，媒体，链接等基础标签，完成基础网页的开发
1.1 基本语法概述

HTML 标签是由尖括号包围的关键词，例如 <html>。
HTML 标签通常是成对出现的，例如<html> 和 </html> ，我们称为双标签。标签对中的第一个标签是开始标签，第二个标签是结束标签。
有些特殊的标签必须是单个标签（极少情况），例如 <br />，我们称为单标签。

2.1 第一个 HTML
每个网页都会有一个基本的结构标签（也称为骨架标签），页面内容也是在这些基本标签上书写。
HTML 文档的的后缀名必须是 .html 或 .htm ，浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。
此时，用浏览器打开这个网页，我们就可以预览我们写的第一个 HTML 文件了。

网页开发工具VSCode 的使用

双击打开软件。
新建文件（Ctrl + N ）。
保存（Ctrl + S ）, 注意移动要保存为 .html 文件
Ctrl + 加号键，Ctrl + 减号键可以放大缩小视图
生成页面骨架结构。输入! 按下 Tab 键。
利用插件在浏览器中预览页面：单击鼠标右键，在弹出窗口中点击“Open In Default Browser”。

标签的使用

框架

<html>
	<head>
	<title>宋小姐美好的一天</title>
	</head>
  	<body><b>宋小姐和毛小姐的暴富梦</b></body>
</html>

基础标签

<body>
    <!-- 注释ctrl+/ -->
    <strong>strong会使字体变粗</strong>
    <br>
    <hr>为单标签
    <a href=""></a>
    <img src="" alt="">
    <!-- 相同的内容选中ctrl+d选择下一个相同的 -->
    <h1>1级标题</h1>    
    <h2>2级标题</h2>
    <h3>3级标题</h3>
    <h4>4级标题</h4>
    <h5>5级标题</h5>
    <h6>6级标题</h6>
    普通文字7级标题
    <p>段落标签</p>
</body>```

段落、加粗、下划线、倾斜、删除线

 <h1>前端开发</h1>
    <hr>水平线标签
     <p>前端开发是创建WEB页面或APP等前端界面呈现给用户的过程，<br>通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互 [1]  </p>
     <p>前端开发从网页制作演变而来，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web1.0时代的产物，早期网站主要内容都是静态，以图片和文字为主，用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5、CSS3的应用，现代网页更加美观，交互效果显著，功能更加强大。</p>
     <p>前端开发跟随移动互联网发展带来了大量高性能的移动终端设备应用。HTML5，Node.js的广泛应用，各类UI框架，JS类库层出不穷，开发难度也在逐步提升。</p>
     <p>段落标签</p>
     <b>加粗</b>
     <u>下划线</u>
     <i>倾斜</i>
     <s>删除线</s>
     <hr>
     <br>

另外一种加粗、下划线、倾斜、删除线

 <strong>加粗</strong>
 <ins>下划线</ins>
 <em>倾斜</em>
 <del>删除线</del>

图片标签

 <img src="C:\Users\认真工作的宋小姐\Pictures\Saved Pictures\1.jpg" alt="">
 <img src="https://img2.baidu.com/it/u=969290628,4177239159&fm=26&fmt=auto&gp=0.jpg" alt="">
 <!-- img以上两个为绝对路径 -->
 <img src="彭超.png" alt="这是两个人哈哈哈哈" title="震惊这俩人在床上坐着" width="800" height="400">
    <!-- 彭超这个图片是同级目录 -->
    <img src="./彭超.png" alt="">    
    <!-- ./触发同级目录情况 -->
    <img src="./下级目录图片/2.jpg" alt="">
    <!-- title标签是悬停后显示的 -->

音频、视频、超链接标签

<body>
    <!-- 插入音频用audio标签 -->
     <audio src="D:\CloudMusic\张真源.mp3" controls  autoplay loop></audio>
    <!-- src为音频路径
         controls为音频控件
         autoplay为自动播放
         loop为循环播放-->
<br>
     <!-- ctrl+/为注释标签 -->
    <!-- autoplay标签 显示自动播放谷歌浏览器不支持 有兼容性等问题-->
    <!-- loop为循环播放 -->
    <!-- 注意：音频标签目前支持三种  MP3、Wav、Ogg -->
    <!-- 插入视频标签 -->
    <video src="./马嘉祺 - 唯一 (Live).mp4" controls autoplay muted loop></video>
    <!-- muted为静音播放，这样在谷歌浏览器中就可以实现自动播放 -->
    <!-- 注意：视频标签目前支持三种  MP4、WebM、Ogg -->

<br>    
    <!-- a 标签、超链接、锚链接 -->
    <a href="https://baike.baidu.com/item/%E6%97%B6%E4%BB%A3%E5%B0%91%E5%B9%B4%E5%9B%A2/23799998?fr=aladdin">时代少年团百度百科</a>
    <a href="./03-段落标签.html" target="_self">内部链接</a>
    <a href="./03-段落标签.html" target="_blank">内部链接</a>
    <!-- a标签存在特点
    a标签文字默认有下划线
    a标签从未点击过，默认显示蓝色
    a标签点击过后，文字显示紫色
    -->
    <!-- target：目标网页跳转形式
        _self 默认值在当前窗口跳转（覆盖原网页）
        _blank 创建新窗口跳转 -->
</body>

空链接实现回到顶部

<a href="#">回到顶部</a>
<!-- #是为了站住位置，方便以后查找添加位置 -->

认真学习的宋小姐

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML标签学习

HTML标签学习目标:学习HTML排版，媒体，链接等基础标签，完成基础网页的开发
复制链接

扫一扫

专栏目录