HTML——编写

最新推荐文章于 2023-04-20 22:12:31 发布

羿鹤散人.

最新推荐文章于 2023-04-20 22:12:31 发布

阅读量2k

点赞数 3

本文链接：https://blog.csdn.net/qq_44621880/article/details/115267270

版权

HTML——编写

导读

1.基本语法概述

1.HTML标签是 < 关键词 > ，例如<html>。

2.HTML标签通常是成对出现的，例如<html> </html>，称为双标签。第一个标签是开始标签，第二个标签是结束标签。

3.有些特殊的标签必须是单个标签（极少情况），例如<br />，成为单标签。

2.标签关系

双标签：包含关系和并列关系。

包含

<head>
    <title></title>
</head>

并列

<head> </head>
<body> </body>

3.第一个HTML网页

每个网页都会有一个基本的结构标签（也称为骨架标签），页面内容也是在基本标签上书写，HTML页面也称为HTML文档。

转换成.html格式后：

标签名	定义	说明
<html> </html>	HTML标签	页面中最大的标签，称为根标签
<head></head>	文档的头部	注意在head标签中必须要设置title标签
<title></title>	文档的标题	让页面拥有一个属于自己的网页标题
<body></body>	文档的主体	元素包含文档的所有内容，页面内容基本都是放到body里面的

HTML文档的后缀名必须是.html或.htm，浏览器的作用是读取HTML文档，并以网页的形式显示。

3.1 VSCode的使用

1.双击打开软件

2.新建文件（ Ctrl + N ）

3.保存（Ctrl + S ），注意移动要保存为.html文件

4.Ctrl + 加号键，Ctrl + 减号键可以放大缩小视图

5.生成页面骨架结构

输入!按下Tab键

6.利用插件在浏览器中预览页面：单击鼠标右键，在弹出出口中点击“Open In Default Browser”

推荐安装的插件

插件	作用
Chinese (Simplified) Language Pack for VS Code	中文（简体）语言包
Open in Browser	右击选择浏览器打开html文件
JS-CSS-HTML Formatter	每次保存，都会自动格式化js css和html代码
Auto Rename Tag	自动重命名配对的HTML/XML标签
CSS Peek	追踪至样式

安装方法

试运行：

<!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>我的第一个网页</title>
</head>
<body>
    ✌lay了
</body>
</html>

！ + Tab键输入大体结构，在title标签中输入标题，在body标签中输入内容。运用插件比使用记事本手打代码简便很多 √ 。

4.HTML常用标签

字符集

字符集（Character set）是多个字符的集合。以便计算机能够识别和存储各种文字。

在<head>标签内，可以通过<meta>标签的charset属性来规定HTML文档应该使用哪种字符编码。

<meta charset=" UTF-8 " />

charset常用的值有：GB2312、BIG5、GBK和UTF-8，其中UTF-8也被称为万国码，基本包含了全世界所有国家需要用到的字符。

<!DOCTYPE html> 文档类型声明标签，采取html版本来显示页面

<html lang = "en">声明网站语言，本页面采取英文显示

以上三个代码vscoder自动生成，基本不需要重写

（本文是根据b站黑马程序员pink老师做的笔记）

羿鹤散人.

关注

3
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
HTML——编写

HTML标签导读1.1 基本语法概述1.HTML标签是< 关键词 >，例如<html>。2.HTML标签通常是成对出现的，例如<html> </html>，称为双标签。第一个标签是开始标签，第二个标签是结束标签。3.有些特殊的标签必须是单个标签（极少情况），例如<br />，成为单标签。1.2 标签关系双标签：包含关系和并列关系。包含<head> <title>&lt...
复制链接

扫一扫