领取淘宝天猫优惠券:优惠淘 | 欢迎使用随心而码微信小程序,微信搜一搜【随心而码】可直接搜到。

网页的”骨架“——HTML

html&css Hicoder 501℃ 0评论

网页的构成

一个网页简单来讲,由三部分组成。

  1. HTML——组织网页的结构
  2. CSS——对网页结构进行装修美化
  3. JavaScript——增强网页的交互性,实现数据的实时更新等

所谓交互,即人与一个网页的交流过程。可能是点击某个按钮,可能是注册、登录、修改密码,也可能是网页聊天,等等。

HTML

HTML,英文全称 Hyper Text Markup Language,超文本标记语言。

一个HTML文件(称之为HTML文档)主要包含HTML元素及其属性。这里我们探讨的是HTML5(目前最新的HTML标准)。

HTML5文档基本结构

 


<!DOCTYPE html> 
<html>
<head>
 <meta charset="UTF-8">
 <title>我是一个html页面</title>
</head>
<body>
 我是主体,你们在浏览器上看到的内容都放在我这里。
</body>
</html>

 

<!DOCTYPE html>

文档类型声明,声明这是html5文档,这一方面告诉开发者要使用html5语法规范进行开发,一方面告诉浏览器使用html5规范解析展示页面给人们看。

<html>
···
</html>

主骨架,其他骨架都在这里面搭。

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

两个分骨架。head分骨架包含元数据,主要给浏览器看。body骨架包含我们在浏览器上看到的内容。

HTML元素

html文档中的内容,开发人员一般称之为元素。

我们说,除了文档类型声明,其他所有的元素都需要包含在html标签里。

什么是标签?

 

 

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

 

 

如上,用一对尖括号 <> 括起来的称之为标签。

元素 = 标签+标签里包含的内容。如下:

<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
我是HTML文档的主体,你们在网页上看到的内容,都放在我这里。
</body>
</html>

html元素由<html></html>和其里面的内容组成。

常用标签

 


 <div></div>    
 <span></span>    
 <p></p>
 <a href=""></a>
 <ul></ul>
 <li></li>
 <h1></h1>
 <h2></h2>
 <h3></h3>
 <h4></h4>
 <h5></h5>
 <h6></h6>
 <hr>
 <br>

 

元素的属性

元素的属性用来定义元素的类型、功能、方法等。

大部分元素拥有的属性(核心属性):

  1. class——定义类规则
  2. id——定义元素的唯一标识
  3. style——定义元素的样式声明

以上三个属性一般是在CSS和JS中用到。

其他还有语言属性、键盘属性、内容属性、表单属性等。

一个简单的HTML5页面示例

 

 

 


<!DOCTYPE html> 
<html>
<head>
 <meta charset="UTF-8">
 <title>我是一个html页面</title>
</head>
<body>
 <div>
   <h3>我是3号标题</h3>
   <p>我是一个段落,文本内容一般放在我这里面。<br> <a href="https://linjianming.com/">我是超链接,你可以点击我</a></p> <!-- <br>是换行标签 -->
 </div>
</body>
</html>

 

 

 

 

 

 

 

 

 

 

转载请注明:随心而码 » 网页的”骨架“——HTML

喜欢 (1)