02-HTML标签

最新推荐文章于 2024-03-16 16:59:41 发布

ღ江晚吟

最新推荐文章于 2024-03-16 16:59:41 发布

阅读量276

点赞数

本文链接：https://blog.csdn.net/m0_46549425/article/details/106859796

版权

1. html语法规范

1.1基本语法概述

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

1.2 标签关系(双标签)

包含关系(父子关系)
并列关系(兄弟关系)

在这里插入图片描述

2.HTML基本结构标签

2.1第一个HTML网页

每个网页都会有一个基本的结构标签(骨架标签)
页面内容都是在这些基本标签上书写
HTML页面也称HTML文档

<html>    
    <head>      
        <title>我的第一个页面</title> 
    </head> 
    <body> 
        你我之间,黑马洗练,月薪过万,一飞冲天    
    </body> 
 </html>

2.2 第一个HTML

==HTML 文档的的后缀名必须是 .html 或 .htm ==

2.3 基本结构标签总结

html为整个人

3. 网页开发工具

3.1VSCode的使用

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

3.2 VSCode工具生成骨架标签新增代码

1. <!DOCTYPE> 标签 //文档类型声明标签:告诉浏览器使用哪种HTML版本来显示网页
2. lang 语言      //网页显示
3. charset 字符集  //必须要写,否则会出现乱码

1. 文档类型声明标签

在这里插入图片描述

2. lang 语言种类

在这里插入图片描述

3. 字符集(Character set)

<meta charset=" UTF-8" />  //称为万国码

在这里插入图片描述

3.3 总结

在这里插入图片描述

4. HTML 常用标签

4.1 标签语义(标签的含义)

根据标签的语义，在合适的地方给一个最为合理的标签，可以让页面结构更清晰。

4.2 标题标签（重要）

标签语义：作为标题使用，并且依据重要性递减。
为了使网页更具有语义化，我们经常会在页面中用到标题标签。HTML 提供了 6 个等级的网页标题


特点： 
1. 加了标题的文字会变的加粗，字号也会依次变大。 
2. 一个标题独占一行
代码:
<h1>标题一共六级选,</h1> 
<h2>文字加粗一行显。</h2> 
<h3>由大到小依次减，</h3> 
<h4>从重到轻随之变。</h4> 
<h5>语法规范书写后，</h5> 
<h6>具体效果刷新见。</h6> 
          ------pink老师

效果图

4.3 段落和换行标签(重要)

br后有一个空格

<!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>
   <p> 单词 paragraph [ˈpærəgræf] 的缩写，意为段落。 </p>
    标签语义：可以把 HTML 文档分割为若干段落。 <br />
    特点： 
   <p>1. 文本在一个段落中会根据浏览器窗口的大小自动换行。 
    2. 段落和段落之间保有空隙</p> 
</body>
</html>

效果图

4.4 文本格式化标签

在这里插入图片描述

4.6 图像标签和路径(重点)

1. 图像标签

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图像标签</title>
</head>
<body>
<h4>1.显示一张名字是 imag.JPG的图片</h4>
<img src="imag.jPG" width="100"/>
<h4>2.html网页没有与jpg文件在同一级,图片不会显示</h4>
<img src="imag1.jPG" alt="我是pink老师" width="100" /> 
<h4>3.title 鼠标指向图片显示文字</h4>
<img src="imag.jPG"  alt="我是pink老师" title="我是pink老师史密达" width="100" />
<h4>4.</h4>
<img src="imag.jPG"  alt="我是pink老师" title="我是pink老师史密达" width="50"/>
<h4>5.</h4>
<img src="imag.jPG"  alt="我是pink老师" title="我是pink老师史密达" height="40"/>
<h4>6.设置边框</h4>
<img src="imag.jPG"  alt="我是pink老师" title="我是pink老师史密达" width="50" border="10"/>
</body>
</html>

在这里插入图片描述

2.路径

相对路径:图片相对于 HTML 页面的位置

同一级         <img src="baidu.gif" />         //图片名:baidu.gif
下一路径   /   <img src="images/baidu.gif" />   //相当于图片是html的儿子,要先访问爸爸
下一路径  ../  <img src="../baidu.gif" />       //通过html网页找爸爸
../../     上两级

绝对路径:：是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。
vscode复制路径即可

<img src="C:\Users\11341\Desktop\web\案例\01-HTMl.html" />

4.7 超链接标签(重点)

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>超链接标签</title>
</head>
<body>
    <h4> 1.外部链接   </h4>
    <a href="http://www.qq.com" target="_self"> 腾讯</a>
    target 打开窗口的方式 默认的值是_self 当前窗口打开页面 <br />
                                   _blank 新窗口打开页面                                
    <a href="http://www.baidu.com" target="_blank">百度</a>

    <h4>2.内部链接:网站内部页面之间的相互链接(直接打出网站的名字就行)</h4> 
    <a href="公式简介.html">公式简介</a>

    <h4>3.空链接:#(没有跳转页面)</h4>
    <a href="#">工商地址</a>

    <h4>4.下载链接: 地址链接的是 文件 .exe或rar.压缩包形式(点击将会下载目标文件)</h4>
    <a href="imag.rar">下载文件</a>

    <h4>5.网页元素的链接(点击图片将会跳转到目标网址)</h4>
    <a href="http://baidu.com"><img src="imag.JPG" width="150"/></a>
     
    <h4>6.瞄点标签:(两个都对应,点击第一个跳转到第二个的位置)</h4>
    <a href="#live">个人生活</a><br />
    <h3 id="live">个人生活</h3>

</body>
</html>

在这里插入图片描述

5.HTML中的注释和特殊字符

5.1 注释

在这里插入图片描述

5.2 特殊符号

重点记住：空格、大于号、小于号这三个

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>特殊符号</title>
</head>
<body>
    <!-- 我喜欢你 -->   注释网页不会显示<br />
    空&nbsp;&nbsp;&nbsp;格<br />
    <!-- <p> 是一个段落标签 -->
    &lt; p  &gt; 是一个段落标签
</body>
</html>

在这里插入图片描述

ღ江晚吟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
02-HTML标签

@TOC1. html语法规范1.1基本语法概述1. HTML 标签是由尖括号包围的关键词，例如 <html>。 2. HTML 标签通常是成对出现的，例如 <html> 和 </html> ，我们称为双标签。3. 标签对中的第一个标签是开始标签，第二个标签是结束标签。 4. 有些特殊的标签必须是单个标签（极少情况），例如 <br />，我们称为单标签。 1.2 标签关系(双标签)包含关系(父子关系)并列关系(兄弟关系)2
复制链接

扫一扫