一、什么是html
html:超文本标记语言,不是编程语言,而是标记语言,描述网页的语言。使用标签描述网页中的图片,文本,音频等。
HTML标签:
标题镖旗啊<h1>标题<h1>
段落:<p> <p>
换行<br/><>
水平线<hr/>
粗体:<strong><strong>
斜体<em><em>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>第一个网页</title> </head> <body> <h1>静夜思<hr/></h1> <em>李白</em> <p>床前明月光<br/>疑似地上霜</p> <p><em>举头望明月</em></p> <p><strong>低头思故乡</strong></p> </body>
二、图像标签
常见图片格式:jpg、gif、bmp、png
<img src="图片路径(绝对路径/相对路径)" alt="替换文本"width="宽度"heigth="高度">
<img src="img/银魂.jpg" alt="图片出错了"width="200px"height="300px">
1、txt中如何定位s.txt
s.txt 相对路径
c:\1\2\3\4\s.txt 绝对路径
三、超链接
<a href="连接地址"target="目标窗口位置">文本或图像</a>
1、超链接的引用
a、页面键连接:A页到B页,网上常见链接
traget="_blank"就打开一个新的窗口
traget="_self"就在本场口打开新的网页
<a herf="http://www.baidu.com"traget="_self">跳转到百度,在本窗口打开</a>b、锚链接:跳至自身固定位置,或A页到B页固定位置
锚点标记目标:
<a herf="#名称">图片或文本</a>
任意跳转位置:
<a herf="网址地址/名称“>热点文本或图片</a>
c、功能性连接:电子邮件,qq,msn链接
<a herf="mailto:邮箱地址“>热点文本或图片</a>
四、引入视频元素
普通结构:<video src="视频路径"controls></video>
多种选择格式的写法:
<video controls autoply>
<source src = "../video/video.webm"type="video/webm">
<source srv = "../video/video.mp4"type="video/mp4">
</vidoe>
注: autoply提供自动播放功能 , controls提供开始,暂停,音量控制等控件 , 也可以继续加上width=“宽度”属性,他会自己匹配高度。页面布局分析:
页面头部;页面主体;页面底部
元素名
header 标题头部区域内容
footer 标题脚部区域内容
section Web网页中的一块独立区域
article 独立的文章内容
aside 相关内容和应用
nav 导航类辅助内容
<header>
<h2>网页头部<h2>
<header>
<section>
<h2>网页主体内容<h2>
<section>
<footer>
<h2>网页底部<h2>
<footer>
五、css
语法{ 声明1;
声明2;
声明3 }
例如:
h1{ color:red;
font-size:12px }
标签选择器:
用一个名字做选择器,然后用这个名字包起来的内容都将按照声明的格式显示
类选择器:
<style type="text/css">
.名字1{ 声明1; }
</sytle>
ID选择器:
<style type="text/css">
#名字2{ 声明1; }
</style>
调用:
<p id=”名字2“class="名字1”>
也可已在另一个网页创建css文件,将声明和标签都写在css中
例如:
p{ 声明1;
声明2;
}
h1{ 声明1;
声明2;
}
调用时在头部引入:
<link herf="路径"type="text/css"rel="stylesheet">
用import导入:
<style>
@import"路径"
</style>