什么是HTML?
Hyper Text Markup Language(超文本标记语言)
W3C:World Wide Web Consortium(万维网联盟)
W3C标准包括:
-
结构化标准语言(HTML、XML)
-
表现标准语言(CSS)
-
行为标准(DOM、ECMAScript)
网页的基本标签
1、标题
2、段落
3、换行
4、水平线
5、字体样式
6、注释和特殊符号
<body>
<!-- 标题标签 -->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
<!-- 段落标签 -->
<p>两只老虎,两只老虎,</p>
<p>跑得快,跑得快,</p>
<p>一只没有眼睛,</p>
<p>一只没有尾巴,</p>
<p>真奇怪!真奇怪!</p>
<!-- 水平线标签 -->
<hr/>
<!-- 换行标签 -->
两只老虎,两只老虎,
跑得快,跑得快,<br/>
一只没有眼睛,<br/>
一只没有尾巴,<br/>
真奇怪!真奇怪!<br/>
<!-- 粗体,斜体标签 -->
<h1> 字体样式标签</h1>
粗体:<strong> i love you </strong><p/>
斜体:<em> i love you </em>
<br/>
<!-- 注释和特殊符号标签 -->
空 格:
空 格:
<br/>
>
<br/>
<
©版权所有大仙
<!--
特殊符号记忆方式
& ;
查百度
-->
</body>
图像标签
常见格式
-
JPG
-
GIF
-
PNG
-
BMP
<body>
<!-- img学习
src:图片地址
相对路径,绝对路径
../ -- 上一级目录
alt:
-->
<img src="../resource/img/1.jpg" alt="大仙头像" title="悬停文字" width="300" height="300">
</body>
链接标签
-
文本超链接
-
图像超链接
超链接
-
页面间链接
-
一个页面链接接到另外一个页面
-
-
锚链接
-
功能性链接
<body>
<!-- 使用name作为标记 -->
<a name="top">顶部</a>
<!-- a 标签
href:必填,表示要跳转的目的地页面
_blank:在新标签中打开
_self:在自己页面的打开
-->
<a href="1.我的第一个网页.html" target="_blank">点击我跳转到页面一</a>
<a href="http://www.baidu.com" target="_self">点击我跳转到百度</a>
<br/>
<a href="1.我的第一个网页.html">
<img src="../resource/img/1.jpg" alt="大仙头像" title="悬停文字" width="300" height="300">
</a>
<!-- 锚链接
1.需要一个锚标记
2.跳转到标记
#
-->
<a href="#top">回到顶部</a>
<a name="down"></a>
<!-- 功能性链接
邮件链接:mailto:
-->
<a href="mailto:17805241979@163.com">点击联系我</a>
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=340508942&site=qq&menu=yes">
<img border="0" src="http://wpa.qq.com/pa?p=2:340508942:53" alt="你好,加我领取小电影" title="你好,加我领取小电影"/></a>
</body>
行内元素和块元素
-
块元素
-
无论内容多少,该元素独占一行
-
(p、h1--h6......)
-
-
行内元素
-
内容撑开宽度,左右都是行内元素的可以排在一行
-
(a、strong、em......)
-
列表
1、什么是列表
-
列表就是信息资源的一种展现形式。他可以使信息结构化和条理化,并以列表的样式显示出来,以便浏览者能更快捷的获得相应的信息
2、列表的分类
-
无序列表
-
有序列表
-
定义列表
<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>
<hr/>
<!-- 定义列表
dl:标签
dt:列表名称
dd:列表内容
应用范围:公司底部、
-->
<dl>
<dt>学科</dt>
<dd>Java</dd>
<dd>Python</dd>
<dd>Linux</dd>
<dd>C/C++</dd>
<dt>位置</dt>
<dd>西安</dd>
<dd>重庆</dd>
<dd>新疆</dd>
<dd>江苏</dd>
</dl>
</body>
</html>
表格
1、为什么使用表格
-
简单通用
-
结构稳定
2、基本结构
-
单元格
-
行
-
列
-
跨行
-
跨列
练习表格
<body>
<!-- 表格table
tr:行
td:列
-->
</body>
<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>
<hr/>
<table border="1px">
<tr>
<td colspan="3" align="center">学生成绩</td>
</tr>
<tr>
<td rowspan="2">大仙</td>
<td>语文</td>
<td>100</td>
</tr>
<tr>
<td>数学</td>
<td>100</td>
</tr>
<tr>
<td rowspan="2">王立尧</td>
<td>语文</td>
<td>100</td>
</tr>
<tr>
<td>数学</td>
<td>100</td>
</tr>
</table>
视频和音频
1、视频元素
-
Video
2、音频元素
-
audio
<body>
<!-- 音频和视频
src:资源路径
controls:控制条
autoplay:自动播放
-->
<video src="../resource/video/张艺兴%20-%20梦不落雨林.mp4" controls autoplay></video>
<audio src="../resource/audio/张芸京%20-%20偏爱.mp3" controls autoplay></audio>
</body>
页面结构分析
iframe内联框架
<body>
<!-- iframe 内联框架
src:地址
w-h:宽度、高度
-->
<iframe src="" name="hello" frameborder="0" width="700px" height="700px"></iframe>
<a href="1.我的第一个网页.html" target="hello">点击跳转</a>
<!--<iframe src="//player.bilibili.com/player.html?aid=55631961&bvid=BV1x4411V75C&cid=97257627&page=10"-->
<!-- scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true">-->
<!--</iframe>-->
</body>