HTML基本标签和图片音频链接和css

如若要做图片的链接在引入图片时我们可以给图片定义ID号，就跟锚链接的名字是一样的道理

例如：<a id=f1 src="地址" alt=""></a>

<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引用地址就可以了<img src="地址">

其实影像和图片一样都只需要加个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基本标签：

标题标签：<H1>~<H6>

段落标签：<p></p>

换行标签：<br/>

水平线标签：<hr/>

字体加粗标签：<strong></strong>

斜体标签：<em></em>

引入图像（images)

实例：

超链接

1页面间的链接：从A业跳转到B页

<a herf="地址"traget="目标窗口位置">热点文本或图片</a>

实例：<a herf="http://www.baidu.com"traget="_blank">跳转到百度，打开一个新的窗口</a>

<a herf="http://www.baidu.com"traget="_self">跳转到百度，在本窗口打开</a>

traget="_blank"就打开一个新的窗口

traget="_self"就在本场口打开新的网页

2锚链接：跳至自身固定位置，或A页跳至B页固定位置，需锚点标记

锚点标记目标：

<a herf="#名称">图片或文本</a>

任意跳转位置：

<a herf="网址地址/名称“>热点文本或图片</a>

3.功能链接：

<a herf="mailto：邮箱地址“>热点文本或图片</a>

引入视频元素：

普通结构：<video src="视频路径"controls></video>

多种选择格式的写法：

</vidoe>

注：autoply提供自动播放功能，controls提供开始，暂停，音量控制等控件，也可以继续加上width=“宽度”属性，他会自己匹配高度。

引入音频文件：

</audio>

页面布局分析：

页面头部；页面主体；页面底部

元素名

header 标题头部区域内容

footer 标题脚部区域内容

section Web网页中的一块独立区域

article 独立的文章内容

aside 相关内容和应用

nav 导航类辅助内容

<h2>网页主体内容<h2>

css

语法{ 声明1；

声明2；

声明3 }

例如：

h1{ color:red；

font-size:12px }

标签选择器：

用一个名字做选择器，然后用这个名字包起来的内容都将按照声明的格式显示

类选择器：

.名字1{ 声明1； }

</sytle>

ID选择器：

#名字2{ 声明1； }

</style>

调用：

也可已在另一个网页创建css文件，将声明和标签都写在css中

例如：

p{ 声明1；

声明2；

}

h1{ 声明1；

声明2；

}

调用时在头部引入：

用import导入：

<style>

@import"路径"

</style>

link：
某html文件的head中有：

<link rel="stylesheet" type="text/css" href="sheet.css">

link是一个比较老的html的标签在任何浏览器下都可以很好的工作，link的作用是将外部文件引入到当前文件中，可以引入除去css文件之外别的类型的文件。但是只能位于head中。

rel = “stylesheet”表示的是当前文档与引用的文档之间的关系。
type=“text/css”表示引用的文档是文本类型的css文件。
href=“URL”指明引用文件的URL。

@import：
某css文件如下：

@import url(sheet.css);
.content{
  /* 
  ………………
   */
}

@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却不可以。

HTML基本标签和图片音频链接和css

猜你喜欢