web前端入门:HTML

web标准

概述

不同的浏览器通常有不同的引擎/内核,对于相同内容显示效果往往差异很大,为了统一显示效果,确保用户浏览网页的体验良好,就有了web标准。

构成

web标准体现在三个方面:结构、表现、行为

web的结构是由html语言完成,负责网页的布局

web的表现是通过css完成,可以实现网页的美化

web的行为是由JavaScript完成,负责前后端交互

想要入门web前端,就要从HTML开始。

HTML常用标签

概述

HTML的标签用来描述网页结构,它是由尖括号<>、正斜杠/、英文字母或单词组成,每个标签两边都是<>括起来的。有的标签成对存在,称为双标签,开始标签是用<标签名>表示,结束标签是由</标签名>表示。开始标签和结束标签的配对原则与括号的配对原则一致。同时双标签中间可以包含并修饰里面的内容。

整体结构标签

同文章一样,网页也是有固定结构的,完整的网页结构是一个整体,可以分为头部(可以包含标题)、身体。

<html></html>用于描述网页的整体

<head></head>用于描述网页的头部

<title></title>用于描述网页的标题,一般写在<head>标签内,写的内容会显示在浏览器标签页上

<body></body>用于描述网页的身体,网页显示的内容都集中写在这个标签里

标题标签

<h1>~<h6>是标题的标签,具有如下特点:

1. 字体大小随数字增加逐级递减,<h7>往后写了也没问题,但不能与正文区分开,意义不大

2. <h1>~<h6>的字体默认全部加粗

3. 单独成行

4. 双标签

段落标签

<p></p>是段落的标签,具有如下特点:

1. 单独成行

2. 具有独特的行间距

列表标签

HTML中的列表标签分为有序列表和无序列表,分别用<ol></ol>、<ul></ul>表示

列表中的每一项都用<li></li>表示,必须是<ol>或<ul>里面嵌套<li>才能使用列表。

列表标签的特点:

1. 所有列表标签均为双标签,且单独成行

2. 无序列表默认每一项前面都有黑点

3. 有序列表默认每一项前面都有序号

简单布局标签

<div>和<span>这两个标签都是双标签,虽然看上去没有实际含义,但在实际项目的开发中经常用到,它们是用来调整网页内容布局的,并且与后面我们要学的css样式有非常大的关联。

<div>标签的特点:

1. 单独成行

2. 可以调节大小

3. 可由css强行转换为行内块元素实现一行多个div

<span>标签的特点:

1. 行内元素,一行可以有多个

2. 默认无法调节大小,需要css转换为行元素或行内块元素才能调节大小

总结

1. web标准可以实现在不同品牌、不同引擎的浏览器对于相同的内容具有相同的展示效果

2. web标准分为三部分:结构(HTML)、表现(CSS)、行为(JavaScript)

3. HTML基本组成部分是标签,都是尖括号括起来的

4. 常用标签多为双标签,可以修饰内容

5. 单独成行的标签称为行标签(块标签),一行可存在多个的标签称为行内标签

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值