html语法规范,基本结构标签和常用标签

最新推荐文章于 2022-11-19 14:23:23 发布

KeeeepReal

最新推荐文章于 2022-11-19 14:23:23 发布

阅读量106

点赞数 1

文章标签： html

本文链接：https://blog.csdn.net/KeeeepReal/article/details/119858871

版权

本文详细介绍了HTML的基础知识，包括语法规范、基本结构标签如<html>、<head>和<body>，以及常用标签如标题、段落、换行、文本格式化、图像和超链接的使用方法。此外，还讲解了超链接的多种类型，如外部链接、内部链接、空链接、下载链接和锚点链接。通过实例展示了如何在VSCode中创建和预览HTML页面。

摘要由CSDN通过智能技术生成

1.html语法规范

html标签是由尖括号包围的关键词如

通常成对出现和

极少部分只有一个

双标签关系可分为包含关系和并列关系

2.html基本结构标签

<html>:页面中最大的标签,是根标签

<head>:文档头部,其内必须设置的标签是

<title>:页面的网页标题

<body>:包含文档所有内容

在vscode中输入如下代码:

<!DOCTYPE html>      <!--用HTML5显示网页  必须写道第一行-->
<html lang="zh-CN">      <!--用来定义文档显示的语言  en为英语  zh-CN为汉语 但其实都可以显示-->
<head>
    <meta charset="UTF-8">       <!--使用字符集为UTF-8(万国码)-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我用vscode创建的页面</title>
</head>
<body>
    hello world!
</body>
</html>

选择在浏览器中打开,即可打开网页.

在这里插入图片描述

3.html常用标签

3.1标题标签

有六个等级<h1>-<h6>

使用方法:

<h1>一级标题</h1>

<h2>二级标题</h2>

…

3.2段落标签

<p>段落</p>

3.3换行标签

<br />

3.4文本格式化标签

<strong>加粗</strong>

<b>加粗</b>

<em>倾斜</em>

<i>倾斜</i>

<del>删除线</del>

<s>删除线</s>

<ins>下划线</ins>

<u>下划线</u>

3.5< div>和< span>标签

没有语义,只是一个盒子,用来装内容.

<div>用来布局,一行只能放一个,是个大盒子.单独占一行.

<span>也用来布局,一行可以放多个,是小盒子.

3.6图像标签

<img src="图像URL" />

src是必须属性,用于指定图像文件的路径和图形名.

<img src="图像URL" alt="图片加载错误" />

alt属性替换文本当文件显示不出来时用文字替换

<img src="图像URL" title="此图片" />

title属性显示文本鼠标放在图像上提示的文件

<img src="图像URL" width="500" height="100" border="5" />

width属性设置宽度 height属性设置高度 border属性设置边框粗细

3.7超链接标签

<a href="跳转目标" target="目标窗口的弹出方式" >载体文本或图像</a>

target属性后 _self是默认值 _blank是在新窗口打开

(1)外部链接:

<a href="https://www.qq.com" target="_blank">qq</a>       <!--在新窗口中打开qq-->

(2)内部链接:网站内部页面之间的链接

<a href="test01.html" >...</a>        <!--在当前窗口打开test01.html-->

(3)空链接:

<a href="#">...</a>

(4)下载链接:

href中是文件 .exe或者zip等压缩形式为下载文件

<a href="test01.zip">下载</a>

(5)网页元素链接:

以图片音频视频等元素为载体的超链接

<a href="http://qq.com><img src="img.jpg"></a>      <!--以图片为载体打开腾讯-->

(6)锚点链接:

定位到当前页面的某个位置

①在herf属性设置值为#名字 <a herf="#name" >姓名</a>

②找到目标位置标签,里面添加一个id属性,如 <h4 id="name">姓名</h4>

3.8注释标签

 也可选中内容按下ctrl+/

4.常用特殊字符

空格  

小于号 <

大于号 >
————————————————
版权声明：本文为CSDN博主「KeeeepReal」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/KeeeepReal/article/details/119846458