HTML
- HTML(Hyper Text Markup Language)超文本标志语言
- HTML5+CSS3
- W3C
- World Wide Web Consortium(万维网联盟),Web技术领域最权威和具影响力的国际中立性技术标准机
- 结构化标准语言(HTML、XML)
- 表现标准语言(CSS)
- 行为标准(DOM、ECMAScript)
<!--!DOCTYPE使用什么规范-->
<!DOCTYPE html>
<!--总标签-->
<html lang="en">
<!--head网页头部-->
<head>
<!--meta描述性标签,用来描述网站信息-->
<!--charset字符编码信息-->
<meta charset="UTF-8">
<meta name="keywords" content="关键字">
<meta name="description" content="描述">
<!--title网页标题-->
<title>我的第一个网页</title>
</head>
<!--body网页主体-->
<body>
HelloWorld!
</body>
</html>
基本标签
<!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,换行标签br-->
<h1>静夜思</h1>
<p>
李白 〔唐代〕<br>
床前明月光,疑是地上霜。<br>
举头望明月,低头思故乡。</p>
<!--水平分割线hr-->
<hr>
<!--字体样式-->
<strong>粗体</strong><br>
<em>斜体</em><br>
<!--特殊符号
通过&调用
-->
空 格
<br>
大于><br>
小于<<br>
©版权所有yjj<br>
</body>
</html>
图像标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图像标签学习</title>
</head>
<body>
<!--img学习
src:图片地址
相对地址 or 绝对地址
../ 上一级目录
alt:图片不存在时会显示,作为图片的替代
title:鼠标悬停提示文字
-->
<img src="../resources/image/1.png" alt="图片" title="Muse Dash" width="300" height="300">
</body>
</html>
链接标签
</head>
<body>
<!--锚标记-->
<a name="top">顶部</a>
<a href="#down">回到底部</a>
<br>
<!--a标签超链接
href:跳转页面
target:表示窗口在哪打开
(_blank:新标签页打开
_self:在自己网页中打开)
-->
<a href="我的第一个网页.html" target="_blank">我的第一个网页</a>
<br>
<a href="https://www.baidu.com" target="_self">百度</a>
<br>
<a href="https://baike.baidu.com/item/Muse%20Dash/22587569">
<img src="../resources/image/1.png" alt="图片" title="Muse Dash" width="850" height="500">
</a>
<br>
<img src="../resources/image/2.png" alt="图片" title="Muse Dash" width="850" height="500"><br>
<img src="../resources/image/3.png" alt="图片" title="Muse Dash" width="850" height="500"><br>
<img src="../resources/image/4.png" alt="图片" title="Muse Dash" width="850" height="500"><br>
<img src="../resources/image/5.png" alt="图片" title="Muse Dash" width="850" height="500"><br>
<img src="../resources/image/6.png" alt="图片" title="Muse Dash" width="850" height="500"><br>
<a name="down">底部</a>
<!--锚链接
1、设置锚标记
2、跳转到标记,用#
-->
<a href="#top">回到顶部</a>
<!--功能性链接
邮件链接:mailto:
-->
<a href="mailto:1660271734@qq.com">点击联系我</a>
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes">
<img border="0" src="http://wpa.qq.com/pa?p=2::53" alt="点击加我QQ" title="点击加我QQ"/>
</a>
</body>
</html>
行内元素和块元素
-
块元素
- 无论内容多少,该元素独占一行
- 例如(p段落标签、h1-h6级标签…)
-
行内元素
- 内容撑开宽度,左右都是行内元素,可以排在一排
- 例如(a功能性标签、strong粗体、em斜体…)
简单来说,不会换行的就是行内元素,换行的就是块元素,在CSS里比较重要
列表
- 有序列表
- 无序列表
- 自定义列表
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表学习</title>
</head>
<body>
<!--有序列表 ordered list
应用范围:试卷,问答等
-->
<ol>
<li>Java</li>
<li>Python</li>
<li>C/C++</li>
<li>前端</li>
<li>GO</li>
</ol>
<!--分割线-->
<hr/>
<!--无序列表 unsorted list
应用范围:导航,侧边栏等
-->
<ul>
<li>Java</li>
<li>Python</li>
<li>C/C++</li>
<li>前端</li>
<li>GO</li>
</ul>
<!--分割线-->
<hr/>
<!--自定义列表
dl:标签
dt:列表名称
dd:列表内容
应用范围:网站底部
-->
<dl>
<dt>学科</dt>
<dd>Java</dd>
<dd>Python</dd>
<dd>C/C++</dd>
<dd>前端</dd>
<dd>GO</dd>
<dt>位置</dt>
<dd>中国</dd>
<dd>广东省</dd>
<dd>珠海市</dd>
</dl>
</body>
</html>
表格
-
优点
- 简单通用
- 结构稳定
-
基本结构
- 单元格
- 行
- 列
- 跨行
- 跨列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格标签学习</title>
</head>
<body>
<!--表格 table
行 tr
列 td
-->
<!--border:表格加边框-->
<table border="1px">
<tr>
<!-- colspan:跨列-->
<td colspan="4"> a1-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>
媒体元素
-
视频元素
- video
-
音频元素
- audio
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>媒体元素学习</title>
</head>
<body>
<!--controls:控制选项,有这个才能播放
autoplay: 自动播放
-->
<video src="../resources/video/KleeWP.mp4" controls autoplay></video>
<audio src="../resources/audio/Whiskey.mp3" controls autoplay></audio>
</body>
</html>