创建HTML文档的开始标记符,第一讲【初识html】

html的定义

超文本标记语言,标准通用标记语言下的一个应用。是 网页制作必备的编程语言

“超文本”就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。

超文本标记语言的结构包括“头”部分(英语:Head)、和“主体”部分(英语:Body),其中“头”部提供关于网页的信息,“主体”部分提供网页的具体内容。

html示例

hello world

4ab76c00201d?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

编写你的第一个html

大家所看到的网页截图,就是我上面那一段代码编写出来的,下面叫大家如何构建一个简单的html

我所用的软件是vs code ,电脑是mac(windows的操作步骤也差异不大),下面将见证你的第一个网页诞生

1.打开vscode,选择新建一个文件

4ab76c00201d?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

点击后是这样的

4ab76c00201d?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

按住键盘上的ctrl+s(苹果command+s)会弹出一个保存框

4ab76c00201d?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

将文件扩展写.html将文件保存为html类型的文件

4ab76c00201d?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

保存后,你会发现上面一栏变成了你保存的文件名

4ab76c00201d?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

2.下面开始写代码。代码就是我上面的那一段,建议你照着抄一遍。

html示例

hello world

3.写完之后再按ctrl(command)+s保存一遍

4.打开我的电脑(苹果系统打开finder),找到你刚才保存的目录

4ab76c00201d?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

双击打开,你将看到这样的效果

4ab76c00201d?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

如果打开方式不是浏览器,请单击右键选择文件打开方式(苹果双指触控)

4ab76c00201d?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

html标记符

标记符,说明该文件是用超文本标记语言(本标签的中文全称)来描述的,

它是文件的开头;而,则表示该文件的结尾,它们是超文本标记语言文件的开始标记和结尾标记。

以下表格列出了 HTML head 元素:

标签

描述

定义了文档的信息

定义了文档的标题

定义了页面链接标签的默认链接地址

定义了一个文档和外部资源之间的关系(通常外链css文件)

定义了HTML文档中的元数据(定义文件的编码方式)

定义了客户端的脚本文件

定义了HTML文档的样式文件

重要的head标签

在body中我们可以添加许多的子元素,下面我列出一个常见的子元素

内容描述(样式标签)

最大的标题(一号标题)
 预先格式化文本 (英文全称:PREformatted) 
 

下划线(英文全称:Underline)

黑体字 (英文全称:Bold)

斜体字 打字机风格的字体引用,通常是斜体

强调文本

加重文本(通常是斜体加黑体)

设置字体大小从1到7,颜色使用名字或RGB(中文全称:红绿蓝)的十六进制值

基准字体标记

字体加大

字体缩小

加删除线

程式码

键盘字

范例

变量

向右缩排(向右缩进、块引用)

述语定义

地址标记

上标字

下标字

...;固定宽度字体(在文件中空白、换行、定位功能有效)

...;固定宽度字体(不执行标记符号)

... 固定宽度小字体

...;字体 颜色

...;字体 大小等于1(最小)。

...;字体 样式等于无限增大(100像素)

格式标志标签

< br />定义新行

从两边缩进文本 定义列表(英文全称:DefinitionList) 放在每个定义术语词前(定义术语、英文全称:DefinitionTerm) 放在每个定义之前(定义说明、英文全称:DefinitionDescription) 创建一个标有序的列表,默认前面有数字,从数字“1”开始计数,依次叠加,也可以设置为字母或从任何自然数开始计数的列表项(要与配合使用*)配合使用) 放在每个列表项之前,若在;之间则每个列表项加上一个数字,

若在

强行不换行(英文全称:nobreaking)


;水平线(设定宽度、外语全称:horizontalrule)
水平居中

表格标签

...

链接标志表格标志

创建超文本链接。

创建位于文档内部的书签。

创建指向位于文档内部书签的链接。

常用标签使用示例(加粗即为常用标签)

html示例

这是标签h1

这是标签p

这是标签div
  • 这是一个无须列表
  • 这是一个无须列表
  • 这是一个无须列表

有序列表并不常用,这里是做对比

  1. 这是一个有序列表
  2. 这是一个有序列表
  3. 这是一个有序列表

4ab76c00201d?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

我这里所列的所有标签并不是都需要掌握,只需掌握常用标签即可,其他标签了解即可,如果有时间最好还是去每个标签都敲一下印象有更深刻。

相关要求

在编辑超文本标记语言文件和使用有关标记符时有一些约定或默认的要求。

文本标记语言源程序的文件扩展名默认使用htm(磁盘操作系统DOS限制的外语缩写为扩展名)或html(外语缩写为扩展名),以便于操作系统或程序辨认,除自定义的汉字扩展名。在使用文本编辑器时,注意修改扩展名。而常用的图像文件的扩展名为gif和jpg。

超文本标记语言源程序为文本文件,其列宽可不受限制,即多个标记可写成一行,甚至整个文件可写成一行;若写成多行,浏览器一般忽略文件中的回车符(标记指定除外);对文件中的空格通常也不按源程序中的效果显示。完整的空格可使用特殊符号(实体符)“&nbsp(注意此字母必须小写,方可空格)”表示非换行空格;表示文件路径时使用符号“/”分隔,文件名及路径描述可用双引号也可不用引号括起。

标记符中的标记元素用尖括号括起来,带斜杠的元素表示该标记说明结束;大多数标记符必须成对使用,以表示作用的起始和结束;标记元素忽略大小写,即其作用相同,但完整的空格可使用特殊符号“&nbsp(注意此字母必须小写,方可空格)”;许多标记元素具有属性说明,可用参数对元素作进一步的限定,多个参数或属性项说明次序不限,其间用空格分隔即可;一个标记元素的内容可以写成多行。

标记符号,包括尖括号、标记元素、属性项等必须使用半角的西文字符,而不能使用全角字符。

HTML注释由"“结束结束,例如。注释内容可插入文本中任何位置。任何标记若在其最前插入惊叹号,即被标识为注释,不予显示。

明天将推出的是将推出的是《html在使用中的重点标签》,敬请期待,谢谢阅读,欢迎纠错

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 好的,下面是回复: 初学HTML,我们可以先从简单的“Hello World”网页制作开始。这个网页只需要一个标题和一句问候语就可以了。我们可以使用HTML标签来实现这个网页的制作。具体的步骤可以参考教程或者视频教程。 ### 回答2: HTML 是一种标记语言,用于构建诸如网站和应用程序等的原始结构。它是现代互联网基础设施的基础之一,与 CSS 和 JavaScript 等语言一起,为 Web 开发提供了强大的基础。 在 HTML 中,您可以指定标签、元素和属性,以控制 Web 内容的外观和行为。这些标记指令告诉浏览器如何解释页面内容。HTML 文件使用包含在 <html> 标记中的标记来定义Web页面。在这个基础上来现学习HTML,我们需要掌握一些基础的标签和语法。 在初学 HTML 时,我们通常需要使用一些基本的标签创建一个简单的网页,比如 <head>, <title>,和 <body> 标签,同时也会使用 <p> 标签来表示一个段落, <h1>~<h6> 标签用来制定标题等等。代码如下: ```html <!DOCTYPE html> <html> <head> <title>Hello, World!</title> </head> <body> <h1>Hello, World!</h1> <p>Welcome to my webpage!</p> </body> </html> ``` 上面代码不同部分的作用如下: `<!DOCTYPE html>` 定义此文档HTML5 类型的文档。 `<html>` 标识一个 HTML 网页。 `<head>` 将文档的头部区域定义为元数据,比如标题和其他信息。 `<title>` 定义文档的标题,显示在浏览器的标题栏中。 `<body>` 定义文档的正文部分。 `<h1>` 标签定义标题。 `<p>` 标签定义段落。 要查看该 HTML 页面的效果,可以将这个代码保存为 `.html` 文件并在浏览器中打开它,您将看到一个简单的 "Hello, World!" 网页。初识 HTML 的 Hello World 做完后,我们需要进一步了解 HTML ,学习更多标签的使用,以及如何添加样式和动态地交互使用者。 ### 回答3: 初识HTML:简单的Hello World网页制作 HTML(Hypertext Markup Language,超文本标记语言)是一种用于创建网页的标记语言。要学习如何制作网页,首先需要了解HTML的基本结构和标记。 在此关卡中,我们将学习如何创建简单的Hello World网页。首先,打开任何文本编辑器(如Notepad, Sublime Text等)开始编写代码。 首先,我们需要定义网页使用的HTML版本。在HTML5版本中,我们需要在文件的开头添加以下代码: <!DOCTYPE html> 接下来,我们需要定义HTML文档的起始和结束标记,它们分别是<html>和</html>。在这两个标记之间,我们可以添加其他HTML元素和标记创建网页。 例如,要在网页上显示"Hello, World!",我们可以使用<h1>标记,在它的开始和结束标记之间添加文本。代码如下: <html> <head> <title>我的Hello World网页</title> </head> <body> <h1>Hello, World!</h1> </body> </html> 在这段代码中,我们还添加了一个<head>标记,包含了<title>标记,它定义了网页的标题,显示在浏览器的标签栏上。类似地,我们还添加了<body>标记,定义网页的主体内容。 保存代码为.html文件类型,例如"hello.html"。然后在浏览器中打开它,你将看到网页显示"Hello, World!"的内容。 这是HTML网页制作的入门级别,通过这个关卡,我们可以了解到HTML的特点及基本结构。在日后的学习中,你将更深入地学习HTML,并学习如何通过CSS和JavaScript增强网页的样式和交互性。 总之,HTML是学习网页制作的基石,学习它是构建世界互联网世界的基础。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值