HTML 初步
HTML
Hyper Text Markup Language(超文本标记语言)
1.W3C 标准
World Wide Web Consortium(万维网联盟)
成立于1994年 ，Web 技术领域最权威和具影响力的国际中立性技术标准机构
W3C标准包括
1.结构化标准语句(HTML`XML)
2.表现标准语句(CSS)
3.行为标准(DOM`ECAScript)
<!--DOCTYPE ：告诉浏览器，我们要使用什么规范-->
<!--HTML 注释 快捷键 CTRL +/-->
<!DOCTYPE html>
<html lang="en">
<!-- <head> 标签代表网页头部 -->
<head>
<!-- meta 描述性标签 ，他用来描述我们网站的一些信息-->
<!-- meta 一般用来SEO -->
<meta charset="UTF-8">
<meta name="description" content="第一个网站">
<!-- 关键字作用 -->
<meta name="keywords" content="第一个网站">
<!-- <title> 网页的标题-->
<title>第一个网页</title>
</head>
<!-- <body> 标签代表网页的主体 -->
<body>
Hello World
</body>
</html>
2.基本标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--标题标签-->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<!--段落标签-->
<p>如何让你遇见我在你最美丽的时刻</p>
<p>为这我已在佛前求了五百年</p>
<p>求他让我们结一段尘缘</p>
<p>佛于是把我化作一棵树</p>
<p>长在你必经的路旁</p>
<p>阳光下慎重地开满了花</p>
<p>朵朵都是我前世的盼望</p>
<p>当你走近请你细听</p>
<p>那颤抖的叶是我等待的热情</p>
<p>而当你终于无视地走过</p>
<p>在你身后落了一地的……朋友啊那不是花瓣</p>
<P>是我凋零的心</P>
<!--水平标签-->
<hr>
<!-- 换行标签-->
如何让你遇见我在你最美丽的时刻 <br>
为这我已在佛前求了五百年 <br>
求他让我们结一段尘缘 <br>
佛于是把我化作一棵树 <br>
长在你必经的路旁 <br>
阳光下慎重地开满了花 <br>
朵朵都是我前世的盼望 <br>
当你走近请你细听 <br>
那颤抖的叶是我等待的热情 <br>
而当你终于无视地走过 <br>
在你身后落了一地的……朋友啊那不是花瓣 <br>
是我凋零的心 <br>
<!--字体 标签-->
粗体 ：<strong>I love you</strong> <br>
斜体 ：<em>I love you</em> <br>
<!--特殊符号-->
空 格 <br>
空 格
</body>
</html>
3.图像标签
常见的图像格式
JPG GIF PNG BMP
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图像标签</title>
</head>
<body>
<!-- img 学习
src ：图片地址(必填)
相对地址(推荐使用)，绝对地址
../ --上一级目录
alt ：图片名字(必填)
-->
<img src="../resoureces/image/1.jpg" alt="表情包" title="悬停文字" width="300" height="500">
</body>
</html>
4.链接标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>链接标签学习</title>
</head>
<body>
<!-- a 标签学习
href：必填表示跳转到那个页面
target：表示窗口在那里打开
_blank 在新标签中打开
_self 在自己的网页中打开
-->
<!--锚链接 使用name 做标记-->
<a name="top">顶部</a>
<a href="我的第一个网页.html" target="_blank">点击我跳转到第一个页面</a>
<a href="http://www.baidu.com" target="_self">点击我跳转到百度</a>
<br>
<a href="我的第一个网页.html">
<img src="../resoureces/image/1.jpg" alt="表情包" title="悬停文字" width="300" height="500">
</a>
<!-- 锚链接
1.需要一个锚标记
2.跳转到标记
# 加标记名字
-->
<a href="#top">回到顶部</a>
<!-- 在别的也面做好标记 也可以跳转到别的页面 -->
<hr>
<!--功能链接
邮件链接：mailto：
QQ链接 qq推广
-->
<a href="mailto:2571057916@qq.com">点击联系我</a>
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=2571057916&site=qq&menu=yes">
<img border="0" src="http://wpa.qq.com/pa?p=2:2571057916:51" alt="点击加我领取小电影" title="点击加我领取小电影"/>
</a>
</body>
</html>
5.行内元素块元素
6.列表
什么是列表
列表就是信息资源的一种展示形式.它 可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷地获得相应的消息
列表的分类
无序列表
有序列表
定义列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表学习</title>
</head>
<body>
<!--有序列表
应用范围：试卷 ，问答
-->
<ol>
<li>java</li>
<li>python</li>
<li>运维</li>
<li>C/C++</li>
</ol>
<!--无序列表
应用：导航 ，侧边栏
-->
<ul>
<li>java</li>
<li>python</li>
<li>运维</li>
<li>C/C++</li>
</ul>
<!--自定义列表
dl：标签
dt：列表名称
dd：列表内容
-->
<dl>
<dt>学科</dt>
<dd>c</dd>
<dd>c++</dd>
</dl>
</body>
</html>
7.表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格学习</title>
</head>
<body>
<!--表格 table
行 tr rows
列 td
colspan 跨列
rowspan 跨行
-->
<table border="1px">
<tr>
<td>1-1</td>
<td>1-1</td>
<td>1-1</td>
<td>1-1</td>
</tr>
<tr>
<td>2-1</td>
</tr>
<tr>
<td>3-1</td>
</tr>
</table>
</body>
</html>
8.视频和音频
视频元素 ：video
音频元素：audio
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>视频和音频</title>
</head>
<body>
<!--
src：资源路径
controls：控制条
autoplay：自动播放
-->
<video src="../resoureces/audio/1.mp3" controls autoplay>点击播放</video>
<video src="../resoureces/video/1.qlv" controls autoplay></video>
</body>
</html>