html入门
Posted 临风而眠
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html入门相关的知识，希望对你有一定的参考价值。
html入门(2)
文章目录
freecodecamp入门课
https://www.youtube.com/watch?v=pQN-pnXPaVg&t=6544s
一.页面版式安排
一些用于structure 的tags
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="This is my first website">
<title>my first website</title>
</head>
<body>
<header>
<nav>
</nav>
</header>
<main>
<article>
<section>
<aside>
</aside>
</section>
<section>
</section>
</article>
</main>
<footer>
</footer>
</body>
</html>
1.header
<header>标签定义文档的页眉（介绍信息）
nav
<nav> 标签定义导航链接的部分
导航栏就放在<nav> <\\nav>之中
2.main
<main>标签规定文档的主要内容。
<main> 元素中的内容对于文档来说应当是唯一的
**注：**在一个文档中，不能出现一个以上的\\<main> 元素。\\<main> 元素不能是以下元素的后代：<article>、<aside>、<footer>、<header> 或 <nav>。
article
<article> 标签规定独立的自包含内容。
section
<section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分
aside
<aside>标签定义其所处内容之外的内容。
aside 的内容应该与附近的内容相关。
提示：<aside> 的内容可用作文章的侧栏。
3.footer
<footer> 标签定义文档或节的页脚。
<footer> 元素应当含有其包含元素的信息。
页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等。
可以在一个文档中使用多个 <footer> 元素。
二.最基本链接
链接想必都不陌生，可以是链接到网页，图片，视频，PDF，还有各种下载链接…不一而足
<a>标签
标签定义超链接，用于从一张页面链接到另一张页面。
元素最重要的属性是 href 属性，它指示链接的目标。
href属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="This is my first website">
<title>my first website</title>
</head>
<body>
<a href="http://baidu.com">百度一下，你就知道</a>
</body>
</html>
效果：
点击链接之后：
这时我们发现，原网页关掉了，跳到了新网页，而我们平时用浏览器的时候，很多时候都是保留原网页的情况下，跳转到了新网页，这就要用到
target属性
targert属性
标签的 target 属性规定在何处打开链接文档。
如果在一个 标签内包含一个 target 属性，浏览器将会载入和显示用这个标签的 href 属性命名的、名称与这个目标吻合的框架或者窗口中的文档。如果这个指定名称或 id 的框架或者窗口不存在，浏览器将打开一个新的窗口，给这个窗口一个指定的标记，然后将新的文档载入那个窗口。从此以后，超链接文档就可以指向这个新的窗口。
加入target属性
<a href="http://baidu.com" target="_blank">百度搜索引擎</a>
现在点击链接，新效果为：
其他的属性值
relative URL
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="This is my first website">
<title>my first website</title>
</head>
<body>
<a href="http://baidu.com" target="_blank"><h1>百度搜索引擎</h1></a>
<a href="dir1/page1.html" target="_blank"><h1>Page 1</h1></a>
</body>
</html>
dir1/page1.html就是相对路径的链接
此时若点击Page1，就能跳转到这个界面：
page1.html如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Page 1</title>
</head>
<body>
<h1>Page 1</h1>
<hr>
<a href="C:\\Users\\86171\\Desktop\\校长杯\\html\\index.html">Go back home</a>
</body>
</html>
此时点击Go back home ,就会跳转回原来的界面
除了链接到网页，还可以链接到图片
在index.html中写入
<a href="dir1/Lucyhe.jpg" target="_blank"><h2>泸溪河 破防专用糕点</h2></a>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="This is my first website">
<title>my first website</title>
</head>
<body>
<a href="http://baidu.com" target="_blank"><h1>百度搜索引擎</h1></a>
<a href="dir1/page1.html" target="_blank"><h1>Page 1</h1></a>
<a href="dir1/Lucyhe.jpg" target="_blank"><h2>泸溪河 破防专用糕点</h2></a>
</body>
</html>
点击泸溪河 那个链接，会跳转到：
三.图片
在网页中插入图片
<img>标签和源属性src
src：source，src=“url”,源属性的值是图像的URL地址
img没有闭合标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="description" content="学习html嵌入图片"
</head>
<body>
<h1> 非物质文化遗产 </h1>
<img src="https://cdn.jsdelivr.net/gh/xin007-kong/picture_new/img/20210803115322.jpeg"/>
</body>
</html>
显示效果为
本地图片：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="description" content="学习html嵌入图片" </head>
<body>
<h1> 破防专用 </h1>
<p>
<img src="dir1/Lucyhe.jpg" alt="泸溪河"
width="300" height="200" />
</p>
</body>
</html>
文本替换属性alt
- 当我把网络关掉时，如果源图片是网络图片，则效果如图：
而当我加入文本替换属性，就显示如下：
<img src="https://cdn.jsdelivr.net/gh/xin007-kong/picture_new/img/20210803115322.jpeg" alt="非物质文化遗产图片1"/>
当浏览器无法载入图像时，浏览器将显示这个替代性的文本而不是图像替换文本属性可告诉读者他们失去的信息,有助于读者了解信息
- 显然，图片的大小不合适
这时，就要用到width和height属性了
<img src="https://cdn.jsdelivr.net/gh/xin007-kong/picture_new/img/20210803115322.jpeg" alt="非物质文化遗产图片1" width="300" height="200" />
将图片作为一个链接
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="description" content="学习html嵌入图片"
</head>
<body>
<h1> 非物质文化遗产 </h1>
<p>
点击图片查看更多有关油纸伞的知识
<a href="https://baike.baidu.com/item/%E6%B2%B9%E7%BA%B8%E4%BC%9E/2851340">
<img src="https://cdn.jsdelivr.net/gh/xin007-kong/picture_new/img/20210803115322.jpeg" alt="非物质文化遗产图片1" width="300"
height="200" />
</a>
</p>
</body>
</html>
效果如图：
四.视频
视频需要<video>标签，像<img>标签一样，需要src源属性，也可以添加width、height属性，但和<img>标签不同的是，它需要</video>结束标签
那我们先来看这个效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" >
<meta name="description" content="在html中嵌入视频" />
</head>
<body>
<h1>打喷嚏搞笑视频</h1>
<p>
<video src="导出_194504_2.mp4" width="1000" height="600"></video>
</p>
</body>
</html>
emm…就是图片，没有视频的效果，那么下面我们就来学习<video>标签的其他属性
controls
如果出现该属性，则向用户显示控件，比如播放按钮
当我们加上controls属性之后，就可以播放了
<video src="导出_194504_2.mp4" width="1000" height="600" controls></video>
poster
poster=“url”
规定视频正在下载时显示的图像，直到用户点击播放按钮
loop
设置或返回视频是否应在结束时再次播放（循环播放）
<video src="导出_194504_2.mp4" poster="R-C.jfif" width="1000" height="600" controls loop></video>
写了loop就相当于loop=”true“，没写loop属性就相当于false
autoplay
设置或返回是否在就绪（加载完成）后随即播放视频（自动播放）
插入网页视频
以B站视频为例
点击B站视频下的分享按钮，在嵌入代码那里复制
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" >
<meta name="description" content="在html中嵌入视频" />
</head>
<body>
<h1>打喷嚏搞笑视频</h1>
<p>
<iframe src="http://player.bilibili.com/player.html?aid=376661360&bvid=BV1yo4y1X7Z6&cid=369034304&page=1" scrolling="no"
border="0" frameborder="no" framespacing="0" allowfullscreen="true">
</iframe>
</p>
</body>
</html>
此时要注意要在src前面加上http:
此处会在遇到的问题那里说明
五.遇到的问题
1.autoplay
写了autoplay但是打开网页之后，没有自动播放
原因：
2.loop
按理说我写了loop=“false”，它不应该循环，但是还是自动循环播放了…
不知道原因
3.插入b站视频
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" >
<meta name="description" content="在html中嵌入视频" />
</head>
<body>
<h1>打喷嚏搞笑视频</h1>
<p>
<iframe src="//player.bilibili.com/player.html?aid=376661360&bvid=BV1yo4y1X7Z6&cid=369034304&page=1" scrolling="no"
border="0" frameborder="no" framespacing="0" allowfullscreen="true">
</iframe>
</p>
</body>
</html>
找了半天不知道问题，幸好发现了这位大佬的博客
以上是关于html入门的主要内容，如果未能解决你的问题，请参考以下文章
Cg入门16：Fragment shader - 片段级光照