网页分成3个部分:
- 结构:HTML
- 样式:CSS
- 行为:JavaScript
HTML
超文本标记语言,用来表述网页,可通过HTML格式化文本,添加图片,创建链接,输入表单,框架和表格等;浏览器可以读取和显示.html文件
1、什么是HTML
- 不是一种编程语言,而是一种编辑语言
- 标记语言是一套标记标签
- HTML使用标记标签来描述网页和内容
- HTML文档包含了HTML标签和文本内容
- HTML文档也叫web页面
2、 HTML文本文件结构
- < !DOCTYPE html> :声明文档类型为html5
- < html>xxx< /html>:根元素(根标签),所有网页的内容都写在根标签中。
- < head>xxx< /head>:根标签的子标签,网页的头部,head标签中的内容不在网页中显示。
例如:网页的标题< title>xxx< /title>,< meta>标签设置的网页中的元数据。 - < body>xxx< /body>:根标签的子标签,网页的主体,网页中所有可见内容都写在body标签中。
3、示例解释
<!--定义文档类型为html5-->
<!DOCTYPE html>
<!--设置网页语言属性lang的值为中文,英文为en -->
<html lang="zh">
<head>
<!--设置网页中元数据编码属性charset的值为UTF-8 -->
<meta charset="UTF-8">
<!--设置网页的标题为Document,在网页的标题栏显示 -->
<title>Document</title>
</head>
<body>
<!--h1表示 一级标题-->
<h1>学习<h1>
<!--p表示一个段落, 表示一个空格实体,相当于空格的转义字符-->
<p>好好 学习</p>
<!--自结束标签,有两种写法
自结束标签只有一个开始标签,没有匹配的结束标签
-->
<input>
<input />
</body>
</html>
4、实体–转义字符
一些情况下需要在HTML文件中写入一些特殊字符,比如:多个连续的空格;字母两侧的大于号和小于号。多个连续的空格会被浏览器解析为一个空格,而a< b >c这种,大于小于的符号会被解析为标签的括号。
如果我们需要在网页中书写这些特殊的符号,则需要使用html中的实体(转义字符)。
实体的语法:&实体的名字;
空格
> 大于号
< 小于号
© 版权符号
eg:
<p>今天 天气真不错!</p>
<p>a<b>c</p>
5、meta标签
meta标签主要用于设置网页中的一些元数据,元数据不是给用户看的,而是告诉浏览器该如何显示:
5.1 meta标签常用属性:
charset 指定网页的字符集
name 指定的数据的名称
content 指定的数据的内容
http-equiv 将网页进行重定向
- name = “keywords”
keywords 表示网站的关键字,可以同时指定多个关键字,关键字间使用,隔开。
将具体的关键字作为content属性的值。搜索引擎会根据用户搜索的关键字找到含有此关键字的所有网页。
<meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东"/>
<meta name="keywords" content="网购,网上购物,在线购物,网购网站,网购商城,购物网站,网购中心,购物中心,卓越,亚马逊,卓越亚马逊,亚马逊中国,joyo,amazon">
- name = “description”
description 用于指定网站的描述,网站的描述会显示在搜索引擎的搜索的结果中。
<meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务,为您提供愉悦的网上购物体验!"/>
- http-equiv
http-equiv用于将网页进行重定向
<!--打开网页3s后,自动跳转到url指定的网页-->
<meta http-equiv="refresh" content="3;url=https://www.mozilla.org">
- title
title标签的内容会作为搜索结果的超链接上的文字显示。
6、语义化标签
在网页中HTML专门用来负责网页的结构,所以在使用html标签时,应该关注的是标签的语义,而不是它的样式。
先来介绍两个概念:
-
块元素(block element):在页面中独占一行的元素,在网页中一般通过块元素来对页面进行布局。
-
行内元素(inline element): 在页面中不会独占一行的元素,行内元素主要用来包裹文字。
一般情况下会在块元素中放行内元素,而不会在行内元素中放块元素。 块元素中基本上什么都能放。 p元素中不能放任何的块元素
6.1 常用语义化标签
-
标题标签:块元素
h1 ~ h6 一共有六级标题 从h1~h6重要性递减,h1最重要,h6最不重要 h1在网页中的重要性仅次于title标签,一般情况下一个页面中只会有一个h1 一般情况下标题标签只会使用到h1 ~ h3,h4~h6很少用
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
- 标题分组标签–hgroup标签:
可以将一组相关的标题同时放入到hgroup
<hgroup>
<h1>回乡偶书二首</h1>
<h2>其一</h2>
</hgroup>
- 段落标签–p标签:块元素
p标签表示页面中的一个段落
<p>在p标签中的内容就表示一个段落</p>
<p>在p标签中的内容就表示一个段落</p>
- em标签:inline element
表示语音语调的加重(斜体)
<p>今天天气<em>真</em>不错!</p>
- strong标签:inline element
表示强调(加粗)
<p>你今天必须要<strong>完成作业</strong>!</p>
- blockquote标签:块元素
表示一个长引用,长引用部分自动换行缩进。
鲁迅说:
<!-- blockquote 表示一个长引用 -->
<blockquote>
这句话我是从来没有说过的!
</blockquote>
- q标签:行内元素
表示一个短引用,短引用不会换行,直接跟在前面内容的后面。
<!-- q表示一个短引用 -->
子曰<q>学而时习之,乐呵乐呵!</q>
- br标签:
br标签表示页面中的换行
今天天气真不错
<br>
是吗?
浏览器在解析网页时,会自动对网页中不符合规范的内容进行修正。
比如:
标签写在了根元素的外部
p元素中嵌套了块元素
根元素中出现了除head和body以外的子元素
... ...
6.2 布局标签
<body>
<header>表示网页的头部</header>
<main>表示网页的主体部分(一个页面中只会有一个main)</main>
<footer>表示网页的底部</footer>
<nav>表示网页中的导航</nav>
<aside>和主体相关的其他内容(侧边栏)</aside>
<article>表示一个独立的文章</article>
<section>表示一个独立的区块,上边的标签都不能表示时使用section</section>
<div>没有语义,就用来表示一个区块,目前来讲div还是我们主要的布局元素</div>
<span>行内元素,没有任何的语义,一般用于在网页中组合行内元素</span>
</body>
7、列表
在html中也可以创建列表,列表之间可以互相嵌套,html列表一共有三种:
- 有序列表
有序列表,使用ol标签来创建,使用li表示列表项 。
- 无序列表
无序列表,使用ul标签来创建无序列表,使用li表示列表项。
- 定义列表
定义列表,使用dl标签来创建一个定义列表,使用dt来表示定义的内容,使用dd来对内容进行解释说明。
- 列表的嵌套
<!-- 无序列表 -->
<ul>
<li>结构</li>
<li>表现</li>
<li>行为</li>
</ul>
<!-- 有序列表 -->
<ol>
<li>结构</li>
<li>表现</li>
<li>行为</li>
</ol>
<!-- 自定义列表 -->
<dl>
<dt>结构</dt>
<dd>结构表示网页的结构,结构用来规定网页中哪里是标题,哪里是段落</dd>
<dd>结构表示网页的结构,结构用来规定网页中哪里是标题,哪里是段落</dd>
<dd>结构表示网页的结构,结构用来规定网页中哪里是标题,哪里是段落</dd>
</dl>
<!-- 列表的嵌套-->
<ul>
<li>
aa
<ul>
<li>aa-1</li>
<li>aa-2
<ul>
<li>aa-1</li>
<li>aa-2</li>
</ul>
</li>
</ul>
</li>
</ul>
8、超链接–行内元素
超链接可以让我们从一个页面跳转到其他页面,或者是当前页面的其他的位置。使用 a 标签来定义超链接。
8.1 超链接到其他页面
-
a标签的href属性–指定跳转的目标路径
href 指定跳转的目标路径
- 值可以是一个外部网站的地址
- 也可以写一个内部页面的地址
超链接a是也是一个行内元素,在a标签中可以嵌套除它自身外的任何元素。
写内部页面地址时,默认在当前页面所在路径下查找:./ 表示当前页面所在路径,…/表示当页面所在路径的上一级路径。
<a href="https://www.baidu.com">超链接</a>
<br><br>
<a href="07.列表.html">超链接2</a>
-
a标签的target属性–指定超链接打开的位置
target指定超链接打开的位置(是占用当前页面的位置打开 or 新页面打开)
可选值:
- _self 默认值,在当前页面中打开超链接
- _blank,在一个新的页面中打开超链接
超链接是也是一个行内元素,在a标签中可以嵌套除它自身外的任何元素。
<!--点击“超链接”,跳转到百度 -->
<a href="https://www.baidu.com">超链接</a>
<br><br>
<!--点击“超链接2”,跳转到本地页面:07.列表.html -->
<a href="07.列表.html">超链接2</a>
8.2 超链接到当前页面其他位置
-
href="#",点击超链接以后转到当前页面的顶部的位置,将#作为超链接的路径的占位符使用;
-
href="#bottom",点击超链接以后转到当前页面的底部的位置;
-
href = #目标元素的id属性值,跳转到页面的指定位置;
-
id属性(唯一不重复的)
- 每一个标签都可以添加一个id属性;
- id属性就是元素的唯一标识,同一个页面中不能出现重复的id属性 ; -
href=“javascript:;” ,点击这个超链接什么也不会发生 ;
<!--点击“超链接”,跳转到跳转到本地页面:07.列表.html,并在一个新页面中打开目标页面 -->
<a href="07.列表.html" target="_blank">超链接</a>
<br><br>
<a href="#bottom">去底部</a>
br><br>
<a href="#p3">去第三个自然段</a>
<br><br>
<!-- 使用 javascript:; 来作为href的属性,此时点击这个超链接什么也不会发生 -->
<a href="javascript:;">这是一个新的超链接</a>
<p ></p>
<p ></p>
<p id="p3"></p>
<p ></p>
9、引入图片标签img–是一个自结束标签
图片标签用于向当前页面中引入一个外部图片,使用img标签来引入外部图片,img标签是一个自结束标签。img这种元素属于替换元素(块和行内元素之间,具有两种元素的特点)。
-
img元素属性:
src属性:指定的是外部图片的路径(路径规则和超链接是一样的); alt属性:图片的描述,这个描述默认情况下不会显示,有些浏览器会图片无法加载时显示;搜索引擎会根据alt中的内容来识别图片,如果不写alt属性则图片不会被搜索引擎所收录; width属性: 图片的宽度 (单位是像素) height属性:图片的高度 - 宽度和高度中如果只修改了一个,则另一个会等比例缩放
注意:
一般情况在pc端,不建议修改图片的大小,改小浪费内存,改大显示不清晰,需要多大的图片就裁多大;但是在移动端,经常需要对图片进行缩放(大图缩小)。
- 图片的格式
jpeg(jpg)、 gif、png、 webp、 base64 (通过base64编码将图片转为字符,通过字符形式引入。)
<img src = "https://d2ggl082rr1mkp.cloudfront.net/category/IronMan_preview_1521810286_220_310.jpeg" alt="钢铁侠" width="200">
10、内联框架–iframe标签
iframe标签用于在当前页面中引入其他页面,属性值为:
src 指定要引入的网页的路径
frameborder 指定内联框架的边框
<body>
<!--
内联框架,用于向当前页面中引入一个其他页面
src 指定要引入的网页的路径
width 指定引入页面的宽度
height 指定引入页面的高度
frameborder 指定内联框架的边框
-->
<iframe src="https://www.qq.com" width="800" height="600" frameborder="0"></iframe>
</body>
11、引入音视频标签–audio和video
11.1 引入外部音频文件–audio标签
audio 标签用来向页面中引入一个外部的音频文件,音视频文件引入时,默认情况下不允许用户自己控制播放停止。
audio 标签的属性:
src:指定音频文件路径
controls 是否允许用户控制播放,没有属性值,添加该属性表示允许用户控制;
autoplay 音频文件是否自动播放,没有属性值,添加该属性表示音乐在打开页面时会自动播放;
- 但是目前来讲大部分浏览器都不会自动对音乐进行播放
loop 音乐是否循环播放,没有属性值,添加该属性表示循环播放;
<!--使用 src指定音频文件路径 -->
<audio src=="./source/audio.mp3" controls autoplay loop></audio>
<!--使用source标签指定音频文件路径 -->
<audio controls>
<source src="./source/audio.mp3">
<source src="./source/audio.ogg">
<!-- embed标签适用所有浏览器 -->
<embed src="./source/audio.mp3" type="audio/mp3" width="300" height="100">
</audio>
对于同种类型的音频文件,浏览器只加载第一个。
11.2 引入外部视频文件–video标签
使用video标签来向网页中引入一个视频:
- 使用方式和audio基本上是一样的
还可使用内联框架引入一个外部网页上的视频.
<!--使用 src指定文件路径 -->
<video src=="./source/audio.mp3" controls autoplay loop></video>
<!--使用source标签指定文件路径 -->
<video controls>
<source src="./source/flower.webm">
<source src="./source/flower.mp4">
<embed src="./source/flower.mp4" type="video/mp4">
</video>
<iframe frameborder="0" src="https://v.qq.com/txp/iframe/player.html?vid=b00318l66nt" allowFullScreen="true" width="500" height="300"></iframe>
12、表格–table标签
在现实生活中,我们经常需要使用表格来表示一些格式化数据:课程表、人名单、成绩单…;同样在网页中我们也需要使用表格,我们通过table标签来创建一个表格。
12.1 简单表格
在table中tr表示表格中的一行: ;
td表示一个单元格:A1
<table>
<tr>
<td>John</td>
<td>Doe</td>
</tr>
<tr>
<td>Jane</td>
<td>Doe</td>
</tr>
</table>
-
table的常用属性
align:枚举属性,指示表在文档中的对其位置,属性值有left,right,center。 border:和样式相关(CSS),表格边框值 width: 和样式相关(CSS),表格的宽度; bgcolor: 和样式相关(CSS),表格的背景颜色;
-
td的属性
colspan:指示横向的合并单元格列数。默认值是1; rowspan:指示纵向的合并单元格列数。默认值是1;
<body>
<table border="1" width='50%' align="center">
<!-- 在table中使用tr表示表格中的一行,有几个tr就有几行 -->
<tr>
<!-- 在tr中使用td表示一个单元格,有几个td就有几个单元格 -->
<td>A1</td>
<td>B1</td>
<td>C1</td>
<td>D1</td>
</tr>
<tr>
<td>A2</td>
<td>B2</td>
<td>C2</td>
<!-- rowspan 纵向的合并单元格 ,即合并第2行和第三行的第四列-->
<td rowspan="2">D2</td>
</tr>
<tr>
<td>A3</td>
<td>B3</td>
<td>C3</td>
</tr>
<tr>
<td>A4</td>
<td>B4</td>
<!--
colspan 横向的合并单元格
-->
<td colspan="2">C4</td>
</tr>
</table>
</body>
12.2 长表格
可将一个表格分为三部分:
- 头部(thread)、 主体(tbody)、 底部(tfoot);
- th 表示头部的单元格
<table>
<!-- 表格的头部 -->
<thead>
<tr>
<th>日期</th>
<th>收入</th>
<th>支出</th>
<th>合计</th>
</tr>
</thead>
<!-- 表格的主体 -->
<tbody>
<tr>
<td>2020.8.31</td>
<td>500</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>2020.8.31</td>
<td>500</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>2020.8.31</td>
<td>500</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>2020.8.31</td>
<td>500</td>
<td>200</td>
<td>300</td>
</tr>
</tbody>
<!-- 表格的底部 -->
<tfoot>
<tr>
<td></td>
<td></td>
<td>合计</td>
<td>300</td>
</tr>
</tfoot>
</table>
13、表单–form标签
在现实生活中表单用于提交数据,在网页中也可以使用表单,网页中的表单用于将本地的数据提交给远程的服务器,使用form标签来创建一个表单。
- form标签的属性
action属性:指定表单要提交的服务器的 URL; - input标签(行内元素-自结束标签): 元素用于为表单创建交互式控件,以便接受来自用户的数据;可以使用各种类型的输入数据。
输入元素的type属性:
date,email,text,file,image,month,number,password,submit,url......
注意:数据要提交到服务器中,必须要为元素指定一个name属性值。
<form action = "target.html">
<!-- 文本框
注意:数据要提交到服务器中,必须要为元素指定一个name属性值
-->
文本框 <input type="text" name="username">
<br><br>
<!-- 密码框 -->
密码框 <input type="password" name="password">
<br><br>
<!--单选按钮
- 像这种选择框,必须要指定一个value属性,value属性最终会作为用户的填写的值传递给服务器
- checked 可以将单选按钮设置为默认选中
-->
单选按钮 <input type="radio" name="hello" value="a">
<input type="radio" name="hello" value="b" checked>
<br><br>
<!-- 多选框 -->
多选框 <input type="checkbox" name="test" value="1">
<input type="checkbox" name="test" value="2">
<input type="checkbox" name="test" value="3" checked>
<br><br>
<!-- 下拉列表 -->
<select name="haha">
<option value="i">选项一</option>
<option selected value="ii">选项二</option>
<option value="iii">选项三</option>
</select>
<br><br>
<!-- 提交按钮 -->
<input type="submit" value="注册">
input标签的其他属性:
autocomplete="off" 关闭自动补全
readonly 将表单项设置为只读,数据会提交
disabled 将表单项设置为禁用,数据不会提交
autofocus 设置表单项自动获取焦点.
<form action="target.html">
<input type="text" name="username" value="hello" readonly>
<br><br>
<input type="text" name="username" autofocus>
<br><br>
<input type="text" name="b">
<br><br>
<!-- 两种实现button的方式 -->
<input type="submit" >
<input type="reset">
<input type="button" value="按钮">
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">按钮</button>
</form>