Web前端零基础入门——HTML5
【尚硅谷】Web前端零基础入门HTML5+CSS3基础教程丨初学者从入门到精通
html入门
index1
> <html>
<head>
<title>我是谁？</title>
</head>
<body>
<h1>朋友，多久没撸串了？</h1>
<p>我们知道，</p>
<p>这两年有太多的悲喜交叠、人世变幻</p>
<p>我们许多的老朋友也曾处境艰难，</p>
<p>也许一杯相逢的美酒，都未必能开心了</p>
<p>但再次出发，走遍南北东西，</p>
<p>我们惊喜地发现，</p>
<p>民间的生命，依旧饱满，</p>
<p>平凡的日子，仍然滚烫</p>
<p>大家都一样，</p>
<p>不过是图个不负年华，人生快意</p>
</body>
</html>
index2
<html>
<head>
<title>这是我的第二个网页</title>
</head>
<body>
<h1>这是我的第二个网页</h1>
<!--
html的注释，注释内容不会在网页中直接显示，但是可以在源码中查看注释。
注释还可以将一些不希望显示的内容隐藏
<img>
<img / >
<input>
<input />
标签一般成对出现，但是也存在一些自结束标签
-->
</body>
</html>
index3
<html>
<head>
<title>标签的属性</title>
</head>
<body>
<!--
属性，在标签（开始标签或自结束标签）中还可以设置属性
属性是一个名值对（x=y）
属性和标签名或其他属性应该用空格隔开
有些属性有属性值，有些没有。如果有，属性值使用引号。
-->
<h1>这是我的<font color='red' size='3'>第三个</font>网页!</h1>
</body>
</html>
index4
<!doctype html>
<html>
<head>
<title>网页的基本结构</title>
</head>
<body>
<!--
迭代 html4 html5……
文档声明-用来告诉浏览器当前网页的版本
<!doctype html> html5的文档声明
-->
<h1>这是我的<font color='red' size='3'>第三个</font>网页!</h1>
</body>
</html>
<!--可以通过meta标签来设置网页的字符集，避免乱码问题。-->
<meta charset='utf-8'>
index5
<!doctype html>
<html>
<head>
<!--可以通过meta标签来设置网页的字符集，避免乱码问题。-->
<meta charset='utf-8'>
<title>网页的基本结构</title>
</head>
<body>
<!--
迭代 html4 html5……
文档声明-用来告诉浏览器当前网页的版本
<!doctype html> html5的文档声明
-->
<h1>这是我的<font color='red' size='3'>第三个</font>网页!</h1>
</body>
</html>
index6 实体
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>实体</title>
</head>
<body>
<!-- 在网页中多个空格会被默认解析为一个空格
在html中有时不能直接书写一些特殊符号
比如，多个连续的空格，比如字母两侧的大于and小于号-->
转义字符——&实体的名字;
空格
>大于
<小于
©版权符号
<p>今天 天气真不错！
</p> 、
<p>
a<b>c
</p>
</body>
</html>
index7 meta标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--meta主要用来设置网页中的一些元数据，元数据不是给用户看的
charset 指定网页的字符集
name 指定的数据名称
content 指定数据的内容\
keywords 表示网站的关键字，可以同时指定多个关键字，
description 用于指定网站的描述，显示在搜索引擎的结果中
title标签的内容会作为搜索结果的超链接上的文字显示
<meta http-equiv="refresh" content="3,url=http://www.mozilla.org">
将页面重定向到另一个网站
-->
<meta name="keywords" content="HTML5,前端,CSS3">
<meta name="description" content="这是一个非常不错的网站"
<meta http-equiv="refresh" content="3;url=https://www.baidu.com">
<title>Document</title>
</head>
<body>
</body>
</html>
index8 语义化标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--
在网页中html专门用来负责网页的结构
所以在使用html标签时，应该关注的是标签的语义，而不是他的样式
标题标签：
h1-h6 一共有六级标题
一般情况下一个页面只有一个h1，标题标签（h1-h3）
在页面中独占一行的元素称为块元素(block element)
-->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<!--
hgroup用来为标题分组，可以将一组相关的标题同时放入group
-->
<hgroup>
<h1>回乡偶书二首</h1>
<h2>其一</h2>
</hgroup>
<!--
p标签表示页面中的一个段落
p也是一个块元素
-->
<p>p标签表示页面中的一个段落</p>
<p>p标签表示页面中的一个段落</p>
<!--
em标签用于表示语音语调的一个加重
在页面中不会独占一行的元素称为行内元素(inline element)
-->
<p>今天天气<em>真</em>不错！</p>
<!--
stong表示强调，重要内容！
-->
<p>你今天必须要完成<strong>完成作业</strong>！</p>
<!--
blockquote表示一个长引用
-->
鲁迅说：
<blockquote>
这句话我是从来没有说过！
</blockquote>
<!--
q表示一个短引用
-->
子曰：<q>学而时习之，乐呵乐呵！</q>
<!--
br表示换行
-->
<br>
<!--
块元素
在网页中一般通过块元素对页面进行布局
行内元素
-行内元素主要用来包裹文字
-一般情况下会在块元素中放行内元素，
而不会在行内元素中放块元素
-块元素中基本上什么都能放
-p元素中不能放任何的块元素
浏览器在解析网页时，会自动对网页中不符合规范的内容进行修正
比如：
标签卸载了根元素的外部
p元素中嵌套了块元素
根元素中出现了除head和body以外的子元素
-->
<!--
布局标签（结构化语句标签）
-->
<!--
header表示网页的头部
main表示网页的主体部分（一个页面中只有一个main）
footer 表示网页的底部
nav 表示网页中的导航
aside 和主体相关的其他内容（侧边栏）
article 表示一个独立的文章
section 表示一个独立的区块，上边的标签都不能使用的时候用section
div没有语义，就用来表示一个区块
span 是一个行内元素，没有任何的语义，一般用来在网页中选中文字
-->
<header></header>
<main></main>
<footer></footer>
<nav></nav>
<aside></aside>
<article></article>
<section></section>
<div></div>
<span></span>
</body>
</html>
index9 列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--
列表(list)
1.铅笔
2.尺子
3.橡皮
在html中也可以创建列表，html列表中一共有三种
1.有序列表
2.无序列表
3.定义列表
有序列表，使用ul标签来创建有序列表
使用li表示列表项
有序列表，用ol标签来创建有序列表
使用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>
</dl>
<ul>
<li>
aa
<ul>
<li>aa-1</li>
<li>aa-2</li>
</ul>
</li>
</ul>
</body>
</html>
index10 超链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--
超链接可以让我们从一个页面跳转到另一个页面，
或者是当前页面的指定位置
使用a标签来定义超链接
属性：
href指定跳转的目标路径
-值可以是外部网站的地址
-也可以是内部页面的地址
超链接也是一个行内元素，在a标签中可以嵌套除它自身外的任何元素
-->
<a href="https://www.baidu.com">超链接</a>
<br><br>
<!--
当我们需要跳转一个服务器内部的页面时，一般我们都会使用相对路径
相对路径使用.或..开头
./
../
./可以省略不写，如果没写./也不写../则相当于写了./
./表示当前文件所在的目录
../表示当前文件所在所在目录的上一级目录
-->
<a href="./index.html">超链接2</a>
<!--
target属性，用来指定超链接打开的位置
可选值：
_self 默认值 在当前页面中打开超链接
_blank 在一个新的页面中打开超链接
-->
<a href="./index3.html" target="_blank">超链接n</a>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos ex vero architecto ut voluptatum. Ad, qui voluptate saepe sint incidunt eveniet, hic natus expedita accusamus odio autem laboriosam, atque earum!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos ex vero architecto ut voluptatum. Ad, qui voluptate saepe sint incidunt eveniet, hic natus expedita accusamus odio autem laboriosam, atque earum!</p>
<p id="p3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos ex vero architecto ut voluptatum. Ad, qui voluptate saepe sint incidunt eveniet, hic natus expedita accusamus odio autem laboriosam, atque earum!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos ex vero architecto ut voluptatum. Ad, qui voluptate saepe sint incidunt eveniet, hic natus expedita accusamus odio autem laboriosam, atque earum!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos ex vero architecto ut voluptatum. Ad, qui voluptate saepe sint incidunt eveniet, hic natus expedita accusamus odio autem laboriosam, atque earum!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos ex vero architecto ut voluptatum. Ad, qui voluptate saepe sint incidunt eveniet, hic natus expedita accusamus odio autem laboriosam, atque earum!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos ex vero architecto ut voluptatum. Ad, qui voluptate saepe sint incidunt eveniet, hic natus expedita accusamus odio autem laboriosam, atque earum!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos ex vero architecto ut voluptatum. Ad, qui voluptate saepe sint incidunt eveniet, hic natus expedita accusamus odio autem laboriosam, atque earum!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos ex vero architecto ut voluptatum. Ad, qui voluptate saepe sint incidunt eveniet, hic natus expedita accusamus odio autem laboriosam, atque earum!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos ex vero architecto ut voluptatum. Ad, qui voluptate saepe sint incidunt eveniet, hic natus expedita accusamus odio autem laboriosam, atque earum!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos ex vero architecto ut voluptatum. Ad, qui voluptate saepe sint incidunt eveniet, hic natus expedita accusamus odio autem laboriosam, atque earum!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos ex vero architecto ut voluptatum. Ad, qui voluptate saepe sint incidunt eveniet, hic natus expedita accusamus odio autem laboriosam, atque earum!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos ex vero architecto ut voluptatum. Ad, qui voluptate saepe sint incidunt eveniet, hic natus expedita accusamus odio autem laboriosam, atque earum!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos ex vero architecto ut voluptatum. Ad, qui voluptate saepe sint incidunt eveniet, hic natus expedita accusamus odio autem laboriosam, atque earum!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos ex vero architecto ut voluptatum. Ad, qui voluptate saepe sint incidunt eveniet, hic natus expedita accusamus odio autem laboriosam, atque earum!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos ex vero architecto ut voluptatum. Ad, qui voluptate saepe sint incidunt eveniet, hic natus expedita accusamus odio autem laboriosam, atque earum!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos ex vero architecto ut voluptatum. Ad, qui voluptate saepe sint incidunt eveniet, hic natus expedita accusamus odio autem laboriosam, atque earum!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos ex vero architecto ut voluptatum. Ad, qui voluptate saepe sint incidunt eveniet, hic natus expedita accusamus odio autem laboriosam, atque earum!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos ex vero architecto ut voluptatum. Ad, qui voluptate saepe sint incidunt eveniet, hic natus expedita accusamus odio autem laboriosam, atque earum!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos ex vero architecto ut voluptatum. Ad, qui voluptate saepe sint incidunt eveniet, hic natus expedita accusamus odio autem laboriosam, atque earum!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos ex vero architecto ut voluptatum. Ad, qui voluptate saepe sint incidunt eveniet, hic natus expedita accusamus odio autem laboriosam, atque earum!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos ex vero architecto ut voluptatum. Ad, qui voluptate saepe sint incidunt eveniet, hic natus expedita accusamus odio autem laboriosam, atque earum!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos ex vero architecto ut voluptatum. Ad, qui voluptate saepe sint incidunt eveniet, hic natus expedita accusamus odio autem laboriosam, atque earum!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos ex vero architecto ut voluptatum. Ad, qui voluptate saepe sint incidunt eveniet, hic natus expedita accusamus odio autem laboriosam, atque earum!</p>
<!--
可以直接将超链接的href属性设置为#，这样点击超链接以后
页面不会发生跳转，而是转到当前页面的顶部位置
可以跳转到页面的指定位置，只需将herf属性设置 #目标元素的id属性值
id属性（唯一不重复的）
每一个标签都可以添加一个id属性（元素唯一表示）
同一个页面中不能重复出现id属性
-->
<a id="bottom" href="#">回到顶部</a>
<a href="#bottom">去底部</a>
<a href="#p3">去第三自然段</a>
<!--
在开发中，可以将#作为超链接的路径的占位符
-->
<a href="#">这是一个新的超链接</a>
<br><br>
<!--
可以使用javascript：；来作为href的属性，此时点击这个超链接什么也不会发生
-->
<a href="javascript:;">这是一个新的超链接</a>
</body>
</html>
index11 图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--
图片标签用于向当前页面中引入外部图片
使用img标签来引入外部图片，img标签是一个自结束标签
img这种元素属于替换元素（基于块和行内元素之间，具有两种元素的特点）
属性：
src 属性指定的是外部图片的路径
alt 图片的描述，默认情况下不会显示，有些浏览器会在图片无法加载时显示
搜索引擎会根据alt中的内容来识别图片
width （单位是像素）
height
-宽度和高度中只修改了一个，则另一个会等比例缩放
注意：
在一般情况下pc端，不建议修改图片的大小
在移动端，经常需要对图片进行缩放（大图缩小）
图片的格式：
jpeg(jpg)
-支持的颜色比较丰富，不支持透明效果，不支持动图
-一般用来显示照片
gif
-支持的颜色比较少，支持简单透明，支持动画
-颜色单一的图片，动图
png
-支持的颜色丰富，支持复杂透明，不支持动图
-颜色丰富，复杂透明（专为网页而生）
webp
-谷歌新推出的专门用来表示网页中的图片的一种格式
-具备其他图片格式的所有优点，而且文件还特别的小
-缺点：兼容性不好
base64
-将图片使用base64编码，这样可以将图片转换为字符，通过字符的形式来引入图片
-一般都是一些需要和网页一起加载的图片才会使用base64
效果一样，用小的；效果不一样，用效果好的。
-->
<img width="500" src="./img.jpg" alt="图片1">
index12 内联框架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
内联框架，用于向当前页面中引入一个其他页面
src 指定要引入的网页的路径
framborder 指定内联框架的边框
-->
<iframe src="https://www.qq.com" frameborder="1" width="800" height="600"></iframe>
</body>
</html>
index13 音视频播放
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
audio 标签用来向页面中引入一个外部的音频文件
音视频文件引入时，默认情况下不允许用户自己控制播放停止
属性：
controls是否允许用户控制播放
autoplay 音频文件是否自动播放
-如果设置了autoplay，则音乐在打开页面时会自动播放
但是目前来讲大部分浏览器都不会自动对音乐进行播放
loop 音乐是否循环播放
-->
<audio src="./source/audio.mp3" controls loop></audio>
<!-- 除了通过src来指定外部文件的路径以外，还可以通过source来指定文件 -->
<audio contols>
对不起，您的浏览器不支持播放音频！请升级浏览器！
<source src="./source/audio.mp3">
<source src="./source/audio.ogg">
<embed src="./source/audio.mp3" type="audio/mp3" width="200" height="10 0">
</audio>
<!--
使用video标签来向文档中引入视频
-使用方式和audio基本上是一样的
-->
<video controls
<source src="./source/flower.webm">
</video>
</body>
</html>