HTML基本标签和图片音频链接和css
如若要做图片的链接在引入图片时我们可以给图片定义ID号，就跟锚链接的名字是一样的道理
<img id="f1" src="../image1/timg.jpg"alt="这是月亮图片"width="300"height="300"title="月亮"><br/>
<a href="../Test1/Test3.html#f1">月亮a>
如何用一个图片做超链接的入口：
<a href="../Test1/Test3.html#f1"><img src="../image1/timg.jpg"width="100">a>
直接用img引用地址就可以了
其实影像和图片一样都只需要加个ID属性表示他的名称就可以了
下面实现ABC三个页面图片和图片和文字之间的跳转：
A页
<a href="../Test1/Test2.html#B1"><img id="A1" src="../image/img1.png" alt="0"width="50"/>a>
B页
<a href="../Test1/Test3.html#C1"><img id="B1" src="../image/img1.png" alt="0"/>a>
C页
<a href="#C1"><a href="../Test1/Test1.html#A1">这是第一幅图对应的话a>a>
HTML基本标签：
标题标签：~
段落标签：
换行标签：
水平线标签：
字体加粗标签：
斜体标签：
引入图像（images)
<img src=”路径“alt=”图片加载错误的替代文字“width=”宽度“height=”高度“>
实例：
<img src= "../images/jin.jpg"alt="这是一幅月亮图片"width="300"height="300">
超链接
1页面间的链接：从A业跳转到B页
<a herf="地址"traget="目标窗口位置">热点文本或图片
traget="_blank"就打开一个新的窗口
traget="_self"就在本场口打开新的网页
2锚链接：跳至自身固定位置，或A页跳至B页固定位置，需锚点标记
锚点标记目标：
任意跳转位置：
3.功能链接：
引入视频元素：
普通结构：<video src="视频路径"controls>
多种选择格式的写法：
<source src = "../video/video.webm"type="video/webm">
<source srv = "../video/video.mp4"type="video/mp4">
注：autoply提供自动播放功能，controls提供开始，暂停，音量控制等控件，也可以继续加上width=“宽度”属性，他会自己匹配高度。
引入音频文件：
<audio src="音频路径"controls>
<audio controls auqutoply>
<source src="../music/music.mp3"type="audio/mpeg">
<source src="../music/music.ogg"type="audio/ogg">
页面布局分析：
页面头部；页面主体；页面底部
元素名
header 标题头部区域内容
footer 标题脚部区域内容
section Web网页中的一块独立区域
article 独立的文章内容
aside 相关内容和应用
nav 导航类辅助内容
网页头部
网页主体内容
网页底部
css
语法{ 声明1；
声明2；
声明3 }
例如：
h1{ color:red；
font-size:12px }
标签选择器：
用一个名字做选择器，然后用这个名字包起来的内容都将按照声明的格式显示
类选择器：
调用：
id=”名字2“class="名字1”>
也可已在另一个网页创建css文件，将声明和标签都写在css中
例如：
p{ 声明1；
声明2；
}
h1{ 声明1；
声明2；
}
调用时在头部引入：
<link herf="路径"type="text/css"rel="stylesheet">
用import导入：
link：
某html文件的head中有：
"stylesheet" type="text/css" href="sheet.css">- 1
link是一个比较老的html的标签在任何浏览器下都可以很好的工作，link的作用是将外部文件引入到当前文件中，可以引入除去css文件之外别的类型的文件。但是只能位于head中。
rel = “stylesheet”表示的是当前文档与引用的文档之间的关系。
type=“text/css”表示引用的文档是文本类型的css文件。
href=“URL”指明引用文件的URL。
@import：
某css文件如下：
@import url(sheet.css);
.content{
/*
………………
*/
}- 1
- 2
- 3
- 4
- 5
- 6
@import是css的一个属性，代表着引入css文件到当下css文件中，且只能引入css文件。@import只能位于文件的顶部，这降低了灵活性。
在解析Dom。html文件的时候，遇到link标签，那么就会通知资源加载器加载style.css资源，但是注意并不会阻塞html文件的解析，接下来又会遇到要加载style2.css文件，所以又通知资源加载器加载style2.css资源，此时html文件继续解析知道生成DOM树触发DOMcontent事件。同时会发现，这两个css文件的请求是在解析html的时候一并发出的，也就是说这两个css文件是并行加载的，这无疑是节约了时间。一般情况下，要在html解析完成并且生成DOM树之后，才会进行css解析工作，所以只要在这一过程中得到css文件即可。
在前面介绍过通过link方式引入多个css样式表，他们之间是并行加载的，所以之间不会有影响。但是在@import中且不是这样的，在解析DOM。html时候遇到link，会通知资源加载器加载style.css文件，然后继续解析HTML直到完成。值得注意的是，在加载style.css文件的时候是很消耗时间的比如要建立链接，解析DNS等等工作。直到style.css加载完之后，对css文件开始解析的时候发现有@import url(style2.css);开始加载style2.css。然后在给资源加载器发送请求加载这个文件。所以可以看出这两个文件的加载时串行的，所以是消耗时间的性能不好
link因为是html元素，可以通过js DOM动态的添加样式，但是@import却不可以。