HTML学习日志(第一天)

编辑器相关


前端开发的编辑器软件,我首先推荐VS Code,其次推荐Sublime Texe。我本人用的是VS Code。

HTML的概念


HTML 全称为 HyperText Markup Language,译为超文本标记语言。

HTML 不是一种编程语言,是一种描述性的标记语言。

作用:HTML是负责描述文档语义的语言。
 

HTML的专有名词


  • 网页 :由各种标记组成的一个页面就叫网页。
  • 主页(首页) : 一个网站的起始页面或者导航页面。
  • 标记: 比如<p>称为开始标记 ,</p>称为结束标记,也叫标签。每个标签都规定好了特殊的含义。
  • 元素:比如<p>内容</p>称为元素.
  • 属性:给每一个标签所做的辅助信息。
  • XHTML:符合XML语法标准的HTML。
  • DHTML:dynamic,动态的。javascript + css + html合起来的页面就是一个 DHTML。
  • HTTP:超文本传输协议。用来规定客户端浏览器和服务端交互时数据的一个格式。SMTP:邮件传输协议,FTP:文件传输协议。

书写第一个HTML页面


我们打开 VS Code 软件,新建一个文件,名叫test.html(注意,文件名是test,后缀名是html),保存到本地。

紧接着,在文件里,输入html:5,然后按一下键盘上的Tab键,就可以自动生成如下内容:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>

上面的内容,就是html页面的骨架。

HTML结构详解


html骨架标签分类

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

1.文档声明头


任何一个标准的HTML页面,第一行一定是一个以<!DOCTYPE ……>开头的语句。这一行,就是文档声明头,即 DocType Declaration,简称DTD。
 

2.页面语言 lang

下面这行标签,用于指定页面的语言类型:

<html lang="en">
最常见的语言类型有两种:

en:定义页面语言为英语。

zh-CN:定义页面语言为中文。
 

3.头标签 head

头标签内部的常见标签如下:

<title>:指定整个网页的标题,在浏览器最上方显示。
<base>:为页面上的所有链接规定默认地址或默认目标。
<meta>:提供有关页面的基本信息
<body>:用于定义HTML文档所要显示的内容,也称为主体标签。我们所写的代码必须放在此标签內。
<link>:定义文档与外部资源的关系。

HTML的规范


  • HTML不区分大小写,但HTML的标签名、类名、标签属性、大部分属性值建议统一用小写。
  • HTML页面的后缀名是html或者htm(有一些系统不支持后缀名长度超过3个字符,比如dos系统)
     

1、编写XHTML的规范:
(1)所有标记元素都要正确的嵌套,不能交叉嵌套。正确写法举例:<h1><font></font></h1>

(2)所有的标记都必须小写。

(3)所有的标签都必须闭合。

双标签:<span></span>

单标签:<br> 建议写成 <br /> <hr> 建议转成 <hr />,还有<img src=“URL” />

(4)所有的属性值必须加引号。<font color="red"></font>

(5)所有的属性必须有值。<hr noshade="noshade">、<input type="radio" checked="checked" />

(6)XHTML文档开头必须要有DTD文档类型定义。

2、HTML的基本语法特性
(1)HTML对换行不敏感,对tab不敏感
HTML只在乎标签的嵌套结构,嵌套的关系。谁嵌套了谁,谁被谁嵌套了,和换行、tab无关。换不换行、tab不tab,都不影响页面的结构。

也就是说,HTML不是依靠缩进来表示嵌套的,而是看标签的嵌套关系。但是,我们发现有良好的缩进,代码更易读。建议大家都正确缩进标签。
 

(2)空白折叠现象
HTML中所有的文字之间,如果有空格、换行、tab都将被折叠为一个空格显示。

(3)标签要严格封闭
标签不封闭的结果是灾难性的。

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值