vscode笔记——<body>标签

一、标签及其内标签

标签表示 HTML 网页的主体部分,该标签的内容是做给用户看的。

而一个 HTML 文件只能存在一个 标签。

body中间就是写代码的区域,而在中多用

标签来进行内容填充,而
是HTML中最为常用的标签。

在HTML中,标签尽量都使用小写,虽然很多时候因为HTML对于大小写的改变并不影响使用,但是万维网联盟(W3C)在HTML4中推荐小写,在(X)HTML中可能会变成强制小写。

1.1

标签为链接标签,href后面链接的就是网址,点击两个中间的内容就可以跳转到该网址。

代码如下:


    

同样附上运行代码后的截图:

点击图中蓝色下划线文字即可跳转至预设网站。

如果在herf的引号后面加上targer="_blank",那么这个链接会在新的窗口打开。

具体代码如下:

点击跳转至4399小游戏网站

当href后面代码为"#tips"时,会出现一个按钮,代码如下:

提示

效果如图:

或者创建另一个页面跳出提示:

切换页面提示

 

1.2


为换行标签,一般用于在

换行或者

换行等即,在内容某一段插入该标签,随即换行。

代码如下:


    
段落标签

中国完胜美国,
美国气急败坏

中国完败美国,美国气急败坏

例图如下:

1.3


为分割线标签,一般在两对
之间插入。

代码如下:

    

    
段落标签

中国完胜美国,
美国气急败坏

中国完败美国,美国气急败坏


例图如下:

vscode笔记——<body>标签_第1张图片

 箭头所指即为分割线。

1.4

标签之间的文字会被加粗,在标签之间的文字会倾斜。可以在

或者等中间加入这两种标签。

1.5

这个标签是注释标签,在Windows中可以使用"Ctrl"+"/"快速添加,该注释不会对代码产生任何影响,也可以方便对代码进行记忆。

而在文章中的一堆标签最后使用这个快捷键,会将该行进行注释。

如下图所示:

vscode笔记——<body>标签_第2张图片

 被注释的行不会显示在HTML网页中,如图:

vscode笔记——<body>标签_第3张图片

1.6

这是图片标签,src后面双引号内添加的是图片的链接,即在添加该链接后,会显示链接图片,alt是在图片无法显示(图片损坏或者链接变换)的情况下显示的文字,类似图片可以直接去图片网站右键图片复制图片地址即可。

代码如下:


    
图片标签 图片已损坏

运行成功的截图如下:

vscode笔记——<body>标签_第4张图片

 运行失败的截图如下:

vscode笔记——<body>标签_第5张图片

而在src后面还有一种代码:width控制图片宽度height控制图片高度

代码如下:

不过,因为vscode中没有这种高度宽度随着src一起出来的原因,所以widthheight这两个代码至少得敲一部分且必须前后有空格,不然vscode不会出现这两个代码。

1.7

文本输入框,用于获取用户输入信息,且为单标签——仅

1.8

使用小号文字

推荐练习使用网站:www.runoob.com

该网站有定义加练习,适合初学者使用

强化练习使用网站:https://www.php.cn/html/html-css.html

php中文网

你可能感兴趣的:(vscode)