创建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在使用中的重点标签》,敬请期待,谢谢阅读,欢迎纠错

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值