1.初识HTML
Hyper Text Markup Languge(超文本标记语言)
超文本包括文字、视频、音频、图片、动画等。
HTML优势
世界知名浏览器厂商都对HTNL5支持
市场需求
可跨平台
W3C标准
World Wide Web Consortium(万维网联盟)
包括：
结构化标准语言：HTML XML
表现标准语言：CSS
行为标准：DOM/ECMAScript
常见IDE
记事本、Dreamweaver、IDEA、WebStorm
2.网页基本信息
1.注释的写法：快捷键：Ctrl键+/
2.DOCTYPE：告诉浏览器，我们要使用什么规范
3.html:大标签，总标签
4.头部标签head标签代表网页头部
5.body标签代表网页主体
6.title标签代表网页标题
7.meta描述性标签，它用来描述我们网站的一些信息
一般用来做SEO
3.网页基本标签
1.标题标签
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
2.段落标签
<p>于海洋是傻逼</p>
<p>于海洋是傻逼</p>
<p>于海洋是傻逼</p>
<p>于海洋是傻逼</p>
<p>于海洋是傻逼</p>
<p>早</p>
<p>上</p>
<p>好</p>
p*3再按Tab键会直接生成3个段落标签
3.换行标签
于海洋是傻逼<br/>
于海洋是傻逼<br/>
于海洋是傻逼<br/>
于海洋是傻逼<br/>
于海洋是傻逼<br/>
行间距较短
4.水平线标签
<hr/>
5.字体样式标签
粗体：<strong>i love you </strong>
斜体：<em>i love you </em>
6.注释和特殊符号
空 格：
<br/>
大于号：>
<br/>
小于号：<
版权符号：©版权所有王凯琴
多行注释:
<!--
-->
4.图像标签
常见的图像格式：jpg,gif,png,bmp(位图)
常用：jpg,png,gif
img学习
src:图片地址（必填）
有相对地址（推荐使用）或绝对地址。绝对地址是指存在盘中的地址
../ 上一级目录
alt:图片名字（必填）
<img src="../resources/image/1.jpg" alt="表情包" title="悬停文字"width="300" height="400">
5.链接标签
a标签
herf必填，表示要跳转到哪个页面
target:表示窗口在哪里打开
_blank在新标签中打开
_self在自己的页面打开
<body>
<a href="https://www.baidu.com/?tn=15007414_8_dg">点击我跳转到百度</a>
<br/>
<a href="初识HTML.html" target="_blank">点击我跳转到我的第一个网页</a>
<br/>
<br/>
<a href="初识HTML.html"><img src="../resources/image/1.jpg" alt="表情包" title="点击图片跳转到我的第一个网页"width="300" height="400"></a>
<br/>
<br/>
<a href="初识HTML.html"><img src="../resources/image/1.jpg" alt="表情包" title="点击图片跳转到我的第一个网页"width="300" height="400"></a>
<br/>
<br/>
<a href="初识HTML.html"><img src="../resources/image/1.jpg" alt="表情包" title="点击图片跳转到我的第一个网页"width="300" height="400"></a>
<br/>
<br/>
<a href="初识HTML.html"><img src="../resources/image/1.jpg" alt="表情包" title="点击图片跳转到我的第一个网页"width="300" height="400"></a>
<br/>
<br/>
<a href="初识HTML.html"><img src="../resources/image/1.jpg" alt="表情包" title="点击图片跳转到我的第一个网页"width="300" height="400"></a>
</body>
锚链接
1.需要一个锚标记
2.跳转到标记
<body>
<a id="top">顶部</a>
<a href="#top" id="top">回到顶部</a>
</body>
在其他页面中时
<a id="down">底部</a>
<a href="链接标签学习.html#down" id="down" target="_blank">回到上个页面的底部</a>
功能性链接
邮件链接 mailto
<a href="mailto:3266251669@qq.com">点击联系我</a>
QQ链接
qq推广关了
6.块元素和行内元素
块元素
无论内容多少，该元素独占一行
例如p,h1-h6...
行内元素
内容撑开宽度，左右都是行内元素的可以排在一行
a.strong.em..
7.列表标签
定义：
列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷地获得相应的信息
分类
无序列表
应用范围：导航，侧边栏
<ul>
<li>java</li>
<li>python</li>
<li>运维</li>
<li>前端</li>
</ul>
有序列表
应用范围：试卷，问答
<ol>
<li>java</li>
<li>python</li>
<li>运维</li>
<li>前端</li>
</ol>
自定义列表
应用范围：网页最后
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>
<dd>你家</dd>
</dl>
8.表格标签
为什么使用表格
简单通用，结构稳定
基本结构
单元格，行，列，跨行，跨列
表格table
行tr ,列td
<table border="1px">
<tr>
<!-- colspan扩列-->
<td colspan="3">1-1</td>
</tr>
<!-- rowspan跨行-->
<tr>
<td rowspan="3">2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
</tr>
<tr>
<td>4-1</td>
<td>4-2</td>
</tr>
</table>
