初识HTML
什么是HTML
HTML
- Hyper Text Markup Language（超文标记语言）
带你进入HTML的世界！(初始HTML和网页基本标签)含代码
HTML发展史
带你进入HTML的世界！(初始HTML和网页基本标签)含代码 HTML的优势
- 世界知名的浏览器厂商对HTML5的支持
- 微软
- Google
- 苹果
- Opera
- Mozilla
- 市场的需求
- 跨平台
W3C标准
- W3C
- World Wide Web Consortium（万维网联盟）
- 成立于1994年，Web技术领域最权威和具有影响力的国际中立性技术标准机构
- http://www.w3.org/
- http://www.chinaw3c.org/
- W3C标准包括
- 结构化标准语言（HTML、XML）
- 表现标准语言（CSS）
- 行为标准（DOM、ECMAAScript）
常见的IDE
- 记事本
- Dreamweaver
- IDEA
- WebStorm
- ......
HTML基本结构
带你进入HTML的世界！(初始HTML和网页基本标签)含代码 网页基本信息
代码
<!--DOCTYPE:告诉浏览器，我们要使用什么规范 -->
<!DOCTYPE html>
<html lang="en">
<!-- head标签代表网页头部 --><!-- 快捷键ctrl+/ -->
<head>
<!-- meta描述性标签，用来描述我们网站的一些信息 -->
<!-- meta一般用来做SEO -->
<meta charset="UTF-8">
<meta name:="keywords" content="锁子哥的个人主页">
<meta name:="description" content="分享自己的学习心得">
<!-- title网页标题 -->
<title>我的第一个网页</title>
</head>
<!-- body标签代表网页主体 -->
Hello，World！
<body>
</body>
</html>
网页基本标签
空 格：
空 格：
<br/>
>
<br/>
<
<br/>
版权符号：
©版权所有：韩锁
代码（基本标签）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本标签学习</title>
</head>
<body>
<!-- 标题标签 -->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
<!-- 段落标签 -->
<p>两只老虎 两只老虎</p>
<p>跑得快 跑得快</p>
<p>一只没有耳朵 一只没有尾巴</p>
<p>真奇怪 真奇怪</p>
<!-- 水平线标签 -->
<hr/>
<!-- 换行标签 -->
两只老虎 两只老虎<br/>
跑得快 跑得快<br/>
一只没有耳朵 一只没有尾巴<br/>
真奇怪 真奇怪<br/>
<!-- 粗体 ，斜体标签 -->
<h1>字体样式标签</h1>
粗体： <strong>i love you</strong>
斜体： <em>i love you</em>
<!-- 特殊符号 -->
</br>
空 格：
空 格：
<br/>
>
<br/>
<
<br/>
版权符号：
©版权所有：韩锁
<!--
特殊符号记忆方式
& ;
-->
</body>
</html>
带你进入HTML的世界！(初始HTML和网页基本标签)含代码 图像标签
带你进入HTML的世界！(初始HTML和网页基本标签)含代码 链接标签
<!--a标签
href:必填，表示要跳转到那个页面
target：表示窗口在哪里打开
_blank:在新标签中打开
-->
<a href="1.我的第一个网页.html" target="_blank">点击我跳转到页面1</a>
<a href="https://www.baidu.com" target="_self">点击我跳转到百度</a>
带你进入HTML的世界！(初始HTML和网页基本标签)含代码 视频和音频
代码(图片跳转)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图像标签学习</title>
</head>
<body>
<!--img学习
src：图片地址（必填）
相对地址，绝对地址
../ --代表上一级目录
alt：图片名字（必填）
-->
<img src="../resources/image/1.jpg" alt="带象" title="菀菀公主" width="270" height="480">
<a href="4.链接标签.html#down">跳转</a>
</body>
</html>
超链接
代码（锚链接以及功能链接）
<!-- 锚链接
1.需要一个锚标记
2.跳转到标记
#
-->
<a href="#top">回到顶部</a>
<a name="down">down</a>
<!-- 功能性链接
邮件链接：mailto;
QQ链接
-->
<a href="mailto:[email protected]">点击联系我</a>
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=925351628&site=qq&menu=yes">
<img border="0" src="http://wpa.qq.com/pa?p=2:925351628:41" alt="你好，加我领取小电影" title="你好，加我领取小电影"/></a>
图片如下：
带你进入HTML的世界！(初始HTML和网页基本标签)含代码 行内元素和块元素
- 块元素有
- 无论内容多少，该元素独占一行
- （p，h1-h6...）
- 行内元素
- 内容撑开宽度，左右都是行内元素的可以排在一行
- （a，strong，em...）
列表
- 什么是列表
- 列表就是信息资源的一种展示形式。它可以使信息结构化和条例化，并以列表的样式显示出8来，一遍浏览者能更快捷的获得相应的信息
- 列表的分类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表学习</title>
</head>
<body>
<!--有序列表
应用范围：试卷，问答...
-->
<ol>
<li>Java</li>
<li>Python</li>
<li>运维</li>
<li>前端</li>
<li>C/C++</li>
</ol>
<hr/>
<!--无序列表
应用范围：导航、侧边栏...
-->
<ul>
<li>Java</li>
<li>Python</li>
<li>运维</li>
<li>前端</li>
<li>C/C++</li>
</ul>
<!--自定义列表
dl：标签
dt：列表名称
dd：列表内容
应用范围：公司网站底部
-->
<dl>
<dt>学科</dt>
<dd>Java</dd>
<dd>Python</dd>
<dd>Linux</dd>
<dd>C</dd>
<dt>位置</dt>
<dd>西安</dd>
<dd>重庆</dd>
<dd>新疆</dd>
</dl>
</body>
</html>
带你进入HTML的世界！(初始HTML和网页基本标签)含代码 表格
代码（列表）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格学习</title>
</head>
<body>
<!--表格table
行 tr
列 td
-->
<table border="1px">
<tr>
<!-- colspan 跨列-->
<td colspan="4">1-1</td>
</tr>
<tr>
<!-- rowspan 跨行-->
<td rowspan="2">2-1</td>
<td>2-2</td>
<td>2-3</td>
<td>2-4</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
</tr>
</table>
</body>
</html>
带你进入HTML的世界！(初始HTML和网页基本标签)含代码
<body>
<!--音频和视频
src:资源路径
controls：控制条
-->
<!--<video muted src="..\resources\video\Xman.mp4" controls autoplay></video>-->
<audio muted src="..\audio\Blazo - Rain of Love.mp3" controls autoplay></audio>
</body>
