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. 单独成行的标签称为行标签(块标签),一行可存在多个的标签称为行内标签