一.HTML的基本结构
一.HTML的基本语法
1.<h1></h1>--<h6></h6>:标题标签,h1最大,h6最小。
2.<p></p>:段落标签
3.<em></em> :斜体标签
4.<strong></strong>:加粗标签
5.<br/>:换行标签
6.<hr/>:水平线标签
二.图像标签
1.图像标签:<img/>
2.图片格式:jpg,gif,bmp,png(常用的格式是jpg,gif)
3.结构<img str="图片路径"alt="替换文本"width=""height=""/>
str:路径
alt:文本替换,如果说路径不对,就会让文本替换(如果说图像显示不出来,就会让文字表示出来)。
width:图片的宽度
height:图片的高度
title:给图片做个标识,点击图像会出现图片的标识。
三.超链接(实现页面间的跳转)
1.超链接:<a></a>(<a>热点文本/图像</a>)
2.结构:<a href="链接地址"target="目标窗口位置"></a>
目标窗口位置:1._self:自身窗口 2。_blank:新建窗口
链接地址:可以是网址,也可以是路径
3.锚链接:页面内容非常长的时候,不好定位时,可以通过锚链接准确定位到想要定位的位置
关键词:<a name=""></a> 其中""与<a href="链接地址"></a>中de链接地址是一样的,且链接地
址前要加#键来准确定位,""里的名字可以任意取 ,例子:<a href="#register">新用户注册帮助</a> <a name="register">用户注册</a>
4.A页面跳转B页面:A:html1:<a href="html2#regist">新用户注册帮助</a>
B:htlm2:<a name="regist">用户注册</a>
四.媒体元素(视频,音频)
1.视频元素:video。
结构:<video src=“视频路径”controls></video>
controls:提供播放暂停和音量的控件
autoplay:自动播放
结构2:<video controls>
<source src="视频路径"/>
<video/>
视频格式:mp4,oog,webm;
2. 音频元素:audio
结构:<audio src=“音频路径”controls></audio>
结构2:<audio controls>
<source src="音频路径"/>
<audio/>
视频格式:mp3,oog,mepm;
五.css(美化)
1.结构:选择器{
声明1
声明2
声明3 .......
}
2选择器:标签选择器,ID选择器,类选择器
标签选择器:
例如:h1{
color:red
font-size:45px
......
})
**现在例子说明的是h1标签选择器,那么他就会指定h1这个标签;以此类推如果是p标签选择器,就会指定p标签
类选择器:(前面用"."修饰)
例如:.getClass{
color:red
font-size:45px
......
}
**: (.getClass)表示的是类选择器,一般用这个表示,当然也可用其他语法 表示,比如:.green,.red这些都是可以的,只要有意义就可,他作用于任何的标签,在作用于标签时需使用关键词:class="类选择器"(<p class="getClass"></p>)
id选择器:(前面用"#"修饰)
例如:#getcolor{
color:red
font-size:45px
......
}
**:(#getcolor)表示的是id选择器,一般用这个表示,当然也可用其他语法,表示,比如:#green,#red这些都是可以的,只要有意义就可,他在标签里只作用于一次,在作用于标签时需使用关键词:id="id选择器"(<p
id="getcolor"></p>)
3.样式表:
内部样式表:<style>声明...</style>
内联样式表:<style="声明;.."><>
外部样式表:1.创建一个外部的css文件
2.谁想要用这个样式,谁就引入这个样式的文件:
<link rel="stylesheet" href="样式文件路径"/>:链接式
<style>@import"样式文件路径"</style>:导入式
一.HTML的基本语法
1.<h1></h1>--<h6></h6>:标题标签,h1最大,h6最小。
2.<p></p>:段落标签
3.<em></em> :斜体标签
4.<strong></strong>:加粗标签
5.<br/>:换行标签
6.<hr/>:水平线标签
二.图像标签
1.图像标签:<img/>
2.图片格式:jpg,gif,bmp,png(常用的格式是jpg,gif)
3.结构<img str="图片路径"alt="替换文本"width=""height=""/>
str:路径
alt:文本替换,如果说路径不对,就会让文本替换(如果说图像显示不出来,就会让文字表示出来)。
width:图片的宽度
height:图片的高度
title:给图片做个标识,点击图像会出现图片的标识。
三.超链接(实现页面间的跳转)
1.超链接:<a></a>(<a>热点文本/图像</a>)
2.结构:<a href="链接地址"target="目标窗口位置"></a>
目标窗口位置:1._self:自身窗口 2。_blank:新建窗口
链接地址:可以是网址,也可以是路径
3.锚链接:页面内容非常长的时候,不好定位时,可以通过锚链接准确定位到想要定位的位置
关键词:<a name=""></a> 其中""与<a href="链接地址"></a>中de链接地址是一样的,且链接地
址前要加#键来准确定位,""里的名字可以任意取 ,例子:<a href="#register">新用户注册帮助</a> <a name="register">用户注册</a>
4.A页面跳转B页面:A:html1:<a href="html2#regist">新用户注册帮助</a>
B:htlm2:<a name="regist">用户注册</a>
四.媒体元素(视频,音频)
1.视频元素:video。
结构:<video src=“视频路径”controls></video>
controls:提供播放暂停和音量的控件
autoplay:自动播放
结构2:<video controls>
<source src="视频路径"/>
<video/>
视频格式:mp4,oog,webm;
2. 音频元素:audio
结构:<audio src=“音频路径”controls></audio>
结构2:<audio controls>
<source src="音频路径"/>
<audio/>
视频格式:mp3,oog,mepm;
五.css(美化)
1.结构:选择器{
声明1
声明2
声明3 .......
}
2选择器:标签选择器,ID选择器,类选择器
标签选择器:
例如:h1{
color:red
font-size:45px
......
})
**现在例子说明的是h1标签选择器,那么他就会指定h1这个标签;以此类推如果是p标签选择器,就会指定p标签
类选择器:(前面用"."修饰)
例如:.getClass{
color:red
font-size:45px
......
}
**: (.getClass)表示的是类选择器,一般用这个表示,当然也可用其他语法 表示,比如:.green,.red这些都是可以的,只要有意义就可,他作用于任何的标签,在作用于标签时需使用关键词:class="类选择器"(<p class="getClass"></p>)
id选择器:(前面用"#"修饰)
例如:#getcolor{
color:red
font-size:45px
......
}
**:(#getcolor)表示的是id选择器,一般用这个表示,当然也可用其他语法,表示,比如:#green,#red这些都是可以的,只要有意义就可,他在标签里只作用于一次,在作用于标签时需使用关键词:id="id选择器"(<p
id="getcolor"></p>)
3.样式表:
内部样式表:<style>声明...</style>
内联样式表:<style="声明;.."><>
外部样式表:1.创建一个外部的css文件
2.谁想要用这个样式,谁就引入这个样式的文件:
<link rel="stylesheet" href="样式文件路径"/>:链接式
<style>@import"样式文件路径"</style>:导入式