1、网页的组成
文字、图片、图标、音频、视频和超链接
2、网页的本质
前端程序员的编写的前端代码,主要包括html、css 和 JavaScript
3、网页的渲染
通过浏览器对前端代码进行解析和渲染,转换成用户看到的网页。
4、认识五大浏览器
浏览器是网页显示运行的平台,是前端开发的必备利器。
最常见的五大浏览器有:Chrome、Firefox、IE、Safari、Opera,其中Chrome市场份额占据了70%,是全球使用用户最多的浏览器。
浏览器是靠渲染引擎(浏览器内核)对前端代码进行解析渲染的,不同的浏览器,其内在的渲染引擎也是不同的。
浏览器 | 内核 | 备注 |
---|---|---|
Chrome/Opera | Blink | |
Firefox | Gecko | 火狐浏览器内核 |
IE | Trident | 猎豹、360、百度 |
Safari | Webkit | 苹果浏览器内核 |
渲染引擎不同,解析相同代码时的速度、性能、效果也是不同的
5、为什么需要Web标准
不同浏览器的内核不同,对于相同代码解析的效果会存在差异,如果用户想看一个网页,结果用不同的浏览器打开效果不同,就会很差的用户体验。
为了让不同的浏览器按照相同的标准显示结果,于是就有了Web标准。
Web标准总分为三个构成:
构成 | 语言 | 备注 |
---|---|---|
结构 | HTML | 页面原色和内容,骨骼框架的作用 |
表现 | CSS | 网页元素的外观、位置、大小、颜色等页面样式,衣服一样的存在 |
行为 | JavaScript | 定义行为交互 |
6、HTML初体验
HTML中文叫做超文本标记语言(Hyper Text Markup Language),是前端程序员和浏览器交流的语言规范。 任何人交流的语言需要遵守一定的语法规范,这些规范包括文字(单词)、主语、谓语、宾语、标点符号等等,这样才能保证交流顺畅。
程序员和浏览器交流也存在这样的语法规范,这种语言就叫做HTML。我们说的网页,说的就是遵守html语言规范的文件。
新建一个文本,后缀改为.html,这样就能创建一个html文件,浏览器就能识别解析这样后缀的文件。
6.1 、网页结构
网页就类似一篇文章,每一页文章都有固定的结构,比如标题、正文、落款等等,编写网页也是存在固定结构的,这些结构是使用html元素来定义的。
它的最外层由html标签包裹,html里面分为head和body两个分部,head中包含title、meta、script等元素,body中包含h、p、strong等标签元素。
一个最简单的网页结构如下:
6.2 、常见的开发工具
直接用记事本编写代码效率太低且容易出错,推荐使用前端开发工具提高编写速度、提升开发效率
常见的前端开发工具有:VSCode 、WebStorm、Sublime、DreamWeaver、HBuilder
首推VSCode
6.3 、VSCode的使用
创建文件/文件夹
新建一个文件夹作为代码的存储位置,也可以将已有文件夹直接拖入到软件中打开。
红色线框是新建文件,绿色线框是新建文件夹
新建文件, 文件名 + “.html”的后缀,即可创建html文件
常用快捷键
! + Tab(或回车键):快速生成html结构
标签首字母 + Tab:生成标签结构
<body>
<h1>Hello HTML</h1>
</body>
F5:调试,在浏览器中打开HTML文件
7、HTML注释和标签
7.1 、注释的作用
注释是为代码添加的具有解释性、描述性的信息,主要用来帮助开发人员理解代码。
浏览器在执行代码时会忽略所有的注释。
VSCode注释快捷键:ctrl + /, 再按一次取消注释
<!-- 这是注释 -->
<h1>Hello HTML</h1>
7.2、标签的分类
定义html结构的元素,叫做html标签,标签分为双标签和单标签
双标签有开始、有结束、有包裹内容:<双标签开始>包括内容</双标签结束>
单标签只有一部分组成:<单标签>
举个例子:
<!-- 这是双标签 -->
<h1>Hello HTML</h1>
<!-- 这是单标签 -->
<br>
除此之外,标签也可以根据是否独占一行的特性,分为行标签(inline)和块标签(block)
行标签又叫内联标签,它的特征是标签在浏览器窗口中并排,不支持宽高的设置。
与之相反,块标签在浏览器窗口中独占一行,并且支持宽高的设置。
这两种分类方式,一种是根据书写方式分类,另外一种是根据标签的特征分类。二者不存在绝对的对应关系。
7.3、标签的关系
标签与标签之间存在两种关系:父子关系和兄弟关系
父子关系的标签,它们相互嵌套,里面的标签是外面标签的子元素
<!-- 父子关系 -->
<h1>
<h2>
<h3></h3>
</h2>
</h1>
兄弟关系的标签,它们相互并列,标签之间不存在嵌套,它们是平级关系
<!-- 兄弟关系 -->
<h1></h1>
<h1></h1>
<h2></h2>
标签之间的关系,有几个注意的点:
- html是所有标签的父标签;
- 有些标签是不能嵌套的,比如head 和 body
- 单标签不能嵌套任何标签
8、排版标签
8.1、标题标签
h系列标签是html的标题标签,标题标签的主要作用是用来突出显示文章的主题,爬虫在抓取网页时,会根据标题标签来判断网页内容的重要性程度,也叫权重。h1的权重最高,h2其次,以此类推
<h1>第一重要</h1>
<h2>第二重要</h2>
<h3>第三重要</h3>
<h4>第四重要</h4>
<h5>第五重要</h5>
<h6>第六重要</h6>
从上面可以到,标题标签有以下几个特征:
- 文字加粗
- 从h1 -> h6,文字依次变小
- 属于块标签,独占一行
8.2、段落标签
段落标签p用于文章的内容显示,它的书写方式如下:
<p>何当共剪西窗烛</p>
<p>却话巴山夜雨时</p>
p标签属于块标签,标签与标签之间存在间隙。
8.3、换行标签和水平线标签
换行标签br的主要作用是让文字强制换行显示,,它是单标签
<p>何当共剪西窗烛</p>
<p>却话巴山 <br> 夜雨时</p>
水平线标签hr是用来分割不同主题内容,它在浏览器窗口显示为一条浅灰色的水平线,它属于单标签、块标签。
<h6>第六重要</h6>
<hr>
<p>何当共剪西窗烛</p>
9、文本格式化标签
文本格式化标签,它主要是用于给文字加粗、下划线、倾斜、删除线等效果。
在html中有四组文本格式化标签,它们分别是:
标签 | 备注 |
---|---|
b、strong | 加粗 |
u、ins | 下划线 |
i、em | 倾斜 |
s、del | 删除线 |
后一组标签(strong、ins、em、del)和前一组标签(b、u、i、s)相比,它们具有突出重要性、强调语境的作用,实际使用过程中,二者不会做太多区别,经常可以混用。
<b>加粗</b><strong>加粗</strong>
<u>下划线</u><ins>下划线</ins>
<i>倾斜</i><em>倾斜</em>
<s>删除线</s><del>删除线</del>
文本格式化标签属于双标签、行标签
有些非前端开发者可能记不住这么多html标签,他们可能一两个标签用到底,比如p标签加大加粗字体当标题来用,div标签当段落标签使用......
实际开发过程中,虽然标签的使用并没有严格的规定,但是开发者最好遵循标签的语义化规则,正确使用合适的标签。
比如,写标题就使用h系列标签;写段落就用p标签;需要强调重点内容就是用strong等文本格式化标签。这样做的好处在于:对人来说好理解、也方便记忆;对机器来说也有利于机器解析,对搜索引擎优化(SEO)有很大的帮助。
10、媒体标签
10.1、图标标签img
图片标签是用来在网页中加入图片,它的基础写法是:
<img src="" alt="">
img标签属于单标签、行标签,它的常见属性有:
标签 | 备注 |
---|---|
src | 图片路径 |
alt | 图片加载失败时显示的文本 |
title | 鼠标悬停时显示的文本 |
width | 设置图片宽度 |
height | 设置图片高度 |
属性与属性之间没有前后顺序之分,但必须用空格隔开。
src 属性用来添加图片的路径,这里的路径分为绝对路径和相对路径,接下来详细讲解二者的区别。
比如,像下图一样定义了图片的src 和 alt属性,就可以在浏览器中加载处tu.png这张图片
先看一下src的属性值,它表示的是:查找当前目录下的imgs文件夹下的tu.png这张图片。
如果图片加载失败,就会显示alt的属性值“桌面截图”。
需要注意的是:width、height属性如果只设置其中的一个,另外一个属性会根据图片原来的宽高比等比缩放;如果两个属性都设置了,但宽高比和原始比例不一致,就回到导致图片变形。
<img src="./imgs/tu.png" alt="桌面截图" title="我是提示文本" width="200" height="200">
src属性涉及到一个绝对路径和相对路径的概念,接下来重点解释。
10.2、绝对路径和相对路径
绝对路径
绝对路径就是文件的真正存在的路径,是指从硬盘的根目录(盘符)开始,进行一级一级目录指向文件。
举个例子:tu.png这张图片,它所在的硬盘盘符是M盘,它的绝对路径就是M:/TenYearsFront/FrontCode/imgs/tu.png
我们在代码中直接写绝对路径,img标签也可以找到这张图片。
另外,我们经常上网看到的图片网络地址,通常是“域名 + 目录 + 图片名”的格式,这也是一种绝对路径,只不过它是将硬盘符和一个域名绑定了。
相对路径
知道了绝对路径,再来说说相对路径!
顾名思义,相对路径是指以当前文件所在目录作为参考路径,去寻找目标资源的路径表示方法。
相对路径需要记住三种路径查找表示:
- ../ 表示当前文件所在目录的上一级目录
- ./ 表示当前文件所在目录,通常也可以省略不写
- / 表示当前站点的根目录(域名映射的硬盘目录)
一开始就是使用的相对路径来查找图片的路径,这也是在开发中最常用的方法。
绝对路径如果省略盘符,就变成了相对路径的表示方法,这样也可以查找到图片。
10.3、音频标签audio
<audio src="./resources/music.mp3" controls></audio>
audio 标签的常见属性有以下几种:
标签 | 备注 |
---|---|
src | 音频路径 |
controls | 显示播放控件 |
autoplay | 自动播放(部分浏览器不支持) |
loop | 循环播放 |
目前,audio标签支持三种格式的音频文件:MP3、Wav、Ogg
10.4、视频标签 video
<video src="./resources/video.mp4" controls muted autoplay loop></video>
video常见的属性有:
标签 | 备注 |
---|---|
src | 视频路径 |
controls | 显示播放控件 |
autoplay | 自动播放(Chrome需要配合muted实现静音播放) |
loop | 循环播放 |
video标签支持的格式有:MP4、WebM、Ogg
11、超链接标签
<a href="" target=""></a>
a标签又叫做超链接,它的主要功能是完成页面的跳转。
href属性填写跳转地址,这个地址既可以是网络地址,也可以是本地路径地址,当然也可以是#空链接
target属性表示目标网页打开的方式,它有四个值:
target取值 | 描述 |
---|---|
_self | 在当前窗口跳转,default |
_blank_ | 在新窗口跳转 |
_parent | 在父窗口中打开页面,不常用 |
_top | 在窗口主体中打开页面,不常用 |
12、列表标签
在网页中按照行展示关联性的内容,比如说新闻列表、热榜、排行榜等等
列表分为有序列表、无序列表和自定义列表
12.1、无序列表
网页中表示一组无顺序之分的列表,列表的每一项默认显示圆点标识
<ul>
<li>内容1</li>
<li>内容2</li>
<li>...</li>
</ul>
注意:
- ul标签只能包含li标签
- li标签可以包含任何内容
12.2、 有序列表
网页中表示一组有顺序之分的列表,列表的每一项默认显示序号标识符
<ol>
<li>100</li>
<li>90</li>
<li>80</li>
</ol>
![[Pasted image 20230414154100.png]]
注意:
- ol标签只能包含li标签
- li标签可以包含任何内容
12.3 、自定义列表
通常在网页底部导航栏中会使用自定义列表实现
- dl标签表示自定义列表的整体,只能包裹dt、dd标签
- dt标签表示自定义列表的主题
- dd标签表示自定义列表的每一项内容,默认显示缩进效果
<dl>
<dt>标题1</dt>
<dd>内容1-1</dd>
<dd>内容1-2</dd>
</dl>
![[Pasted image 20230414154431.png]]
13、表格标签
13.1、基本标签
表格在网页中会以“行+列”的方式整齐展示数据,它主要由三个标签组成:table、 tr、td,它们之间的嵌套关系是:table > tr > td。
表格标签 | 说明 |
---|---|
table | 它是表格的最外层标签,包裹多个tr |
tr | 行标签,包裹多个td |
td | 单元格标签,包裹内容 |
<table>
<tr>
<td>姓名</td>
<td>年龄</td>
<td>城市</td>
</tr>
<tr>
<td>小红</td>
<td>25</td>
<td>芜湖</td>
</tr>
<tr>
<td>小李</td>
<td>54</td>
<td>纽约</td>
</tr>
</table>
13.2、表格属性
常见的表格属性如下:
表格标签 | 说明 |
---|---|
border | 设置表格边框宽度,默认为0 |
width | 设置表格宽度 |
height | 设置表格高度 |
比如:
<table border="2" width="500" height="800"> </table>
表格属性在实际项目开发中并不常用,通常会使用css来控制表格的外观样式
13.3、标题和表头
表格通常包含标题和表头,虽然并非一定要使用。
标题/表头 | 说明 |
---|---|
caption | 放在table内,表示表格标题,默认居中显示 |
th | 放在第一个tr标签内,表示表头,默认加粗居中显示 |
表格标题caption用于table内部,表头th通常位于第一个tr标签内。
它们会以居中、加粗的形式显示。
<table border="1" width="500" height="300">
<caption>表格标题</caption>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>城市</th>
</tr>
<tr>
<td>小红</td>
<td>25</td>
<td>芜湖</td>
</tr>
<tr>
<td>小李</td>
<td>54</td>
<td>纽约</td>
</tr>
</table>
13.4、结构标签
表格的结构标签主要是为了将表格内部的内容分组,使语义更加明晰。它分为thead、tbody、tfoot,通常用于包裹tr标签。
和标题表头标签一样,它也可以省略不用(这是常态)
结构标签 | 说明 |
---|---|
thead | 表格头部 |
tbody | 表格主体 |
tfoot | 表格底部 |
<table border="1" width="500" height="300">
<caption>表格标题</caption>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>城市</th>
</tr>
</thead>
<tbody>
<tr>
<td>小红</td>
<td>25</td>
<td>芜湖</td>
</tr>
<tr>
<td>小李</td>
<td>54</td>
<td>纽约</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>姓名总结</td>
<td>年龄总结</td>
<td>城市总结</td>
</tr>
</tfoot>
</table>
13.5、合并单元格
合并单元格要遵循以下步骤:
- 明确合并哪几个单元格;
- 左上原则:==上下合并保留最上,删除其他;左右合并保留最左,删除其他==;
- 给保留的单元格设置rowspan 或 colspan 属性
属性 | 说明 |
---|---|
rowspan | 跨行合并单元格 |
colspan | 跨列合并单元格 |
注意:只有在统一结构标签内的单元格才能合并!
<table border="1" width="500" height="300">
<caption>表格标题</caption>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>城市</th>
</tr>
</thead>
<tbody>
<tr>
<td>小红</td>
<td rowspan="2">25</td>
<td>芜湖</td>
</tr>
<tr>
<td>小李</td>
<td>纽约</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">姓名总结</td>
</tr>
</tfoot>
</table>
14、表单标签
使用场景:提交、登录、注册
14.1、input系列标签
在网页中只要涉及用户输入信息的功能,就一定会使用到input系列标签,它的作用就是采集用户信息。
type
input通过设置不同type属性值,可以展示不同的效果,下面就是一些常用的type属性值:
标签名 | type属性值 | 说明 |
---|---|---|
input | text | 单行文本框 |
input | password | 密码框 |
input | radio | 单选按钮 |
input | checkbox | 多选按钮 |
input | file | 文件选择 |
input | submit | 提交表单按钮 |
input | reset | 重置按钮 |
input | button | 普通按钮,需配合js添加功能 |
<form action="post">
昵称:<input type="text"><br>
密码:<input type="password"><br>
性别: <input type="radio" name ="sex" value="男"> 男 <input type="radio" name="sex" value="女"> 女 <br>
爱好:<input type="checkbox" name="like" > JavaScript <input type="checkbox" name="like" > Java <input type="checkbox" name="like" > html <br>
文件: <input type="file" name="file"> <br>
<input type="submit" value="提交">
<input type="reset" value="重置">
<input type="button" value="普通按钮">
</form>
placeholer
input标签还有一个==常用属性placeholder==,它表示占位符,通常用来提示用户输入信息,输入框获取
焦点时,placeholder的提示文本会自动清除。比如:
昵称:<input type="text" placeholder="请输入用户名"><br>
单选和多选
当input标签的type值为radio或者checkbox值时,还需要再配合一个name属性值来使用.
它主要是用来分组。
以type = “radio”为例,只有name相同时,才能实现二选一的功能,通常还需要再配合checked属性使用,checked表示默认选择的意思。
radio/checkbox 属性 | 说明 |
---|---|
name | 分组,只有同一组的才能实现单选或多选 |
checked | 表示默认选择 |
性别:
<input type="radio" name ="sex" value="男" checked> 男
<input type="radio" name="sex" value="女"> 女 <br>
多个文件上传
input文件上传功能,默认只能选择一个文件上传,如果要是线多文件上传,需要添加一个multiple属性。选择文件时,按住ctrl或者shift键,就能选择多个文件上传了。
file 属性 | 说明 |
---|---|
multiple | 多文件上传 |
文件: <input type="file" name="file" multiple> <br>
按钮
form表单常见的按钮有一下三种:
type 属性(input) | 说明 |
---|---|
submit | 提交按钮,需要嵌套在form表单中才会有效 |
reset | 重置,清空表单所有输入内容,同样也需要配合form表单才会生效 |
button | 需要配合js才能生效 |
<form action="post">
<input type="submit" value="提交">
<input type="reset" value="重置">
<input type="button" value="普通按钮">
<button>普通按钮</button>
</form>
另外,button也可以作为双标签存在,配合type属性,它的作用等同于input按钮
标签名 | type属性值 |
---|---|
button | submit |
button | reset |
button | button |
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">按钮</button>
button按钮在chrome按钮中,默认是提交按钮;另外,由于是双标签,它很方便包裹其他如文字、图片等内容。
14.2、下拉菜单
在网页中提供多个选择项的下拉菜单表单控件。
标签 | 说明 |
---|---|
select | 下拉菜单的整体 |
option | 下拉项内容,默认选择添加selected属性 |
它们的嵌套关系是:select > option
<select name="city" id="city">
<option value="beijing">北京</option>
<option value="shanghai" selected>上海</option>
<option value="guangzhou">广州</option>
</select>
14.3、文本域
输入多行文本时就需要使用文本域标签textarea,它的常见属性有:
属性 | 说明 |
---|---|
cols | 宽度 |
rows | 行数 |
上述属性在开发中并不经常使用,开发人员一般通过CSS样式来控制文本域的样式
文本域可以通过拖拽右下角改变大小。
<textarea cols="30" rows="10"></textarea>
14.4、label标签
label标签常用于将内容与表单标签绑定,这样点击label标签也能触发表单控件的响应。它有两种绑定方法:
第一种是,label和表单控件平级,label的for属性等于表单控件的id。
<form>
性别:
<input type="radio" name ="sex" id="man" value="男" checked>
<label for="man">男 </label>
<label><input type="radio" name="sex" id="woman" value="女">
<label for="woman">女</label>
</form>
第二种是:label标签嵌套表单控件。这种方法比第一种要简单很多。
<form>
性别:
<label><input type="radio" name ="sex" value="男" checked> 男 </label>
<label><input type="radio" name="sex" value="女"> 女 </label>
</form>
#timeline A second event!
15、布局标签
无语义标签:div、span
之前在文本格式化标签说道,html基本每个标签都是有语义的。这样对人来说好理解、也方便记忆;对机器来说也有利于机器解析,对搜索引擎优化(SEO)有很大的帮助。
但是也存在无语义化标签,它们就是div、span。
这两个标签最大作用就是用来写网页布局用的,div是块标签,独占一行,而span标签是行标签,可以并排显示,它们不带任何特殊的效果。
早期的网页,写布局是使用Table表格,之后才发展到用div + css的方式来写网页布局,你也可以理解为:div、span标签的语义就是编写网页布局。
有语义标签:header、nav、footer、aside、section、article
在HTML5新版本中,推出了一些有语义的布局标签供开发者使用,他们主要在==手机网页==中使用。主要如下:
布局标签 | 语义 |
---|---|
header | 网页头部 |
nav | 导航栏 |
footer | 网页底部 |
aside | 网页侧边栏 |
section | 网页区块 |
article | 网页文章 |
<header>网页头部</header>
<nav> 导航栏</nav>
<footer>网页底部</footer>
<aside>网页侧边栏</aside>
<section>网页区块</section>
<article>网页文章</article>
16、字符实体
在网页中展示特殊字符效果(比如空格、货币符号、数学公式等),这时就需要使用到字符实体。
下面是一些常见字实体: