1.1 W3C标准
W3C
-
World Wide Web Consortium(万维网联盟)
-
成立于1994年，Web技术领域最权威和具影响力的国际中立性技术标准机构
W3C标准包括
-
结构化标准语言(HTML、XML)
-
表现标准语言(CSS)
-
行为标准(DOM、ECMAScript)
1.2 网页基本信息
<!--DOCTYPE: 告诉游览器，我们要使用什么规范-->
<!DOCTYPE html>
<html lang="en">
<!--head 网页头部-->
<head>
<!--meta 描述性标签，用于描述网站信息-->
<meta charset="UTF-8">
<meta name="keywords" content="Java,前端学习">
<meta name="desciption" content="好好学习，天天向上">
<!--title 网页标题-->
<title>我的第一个网页</title>
</head>
<!--body网页主体-->
<body>
Hello world!
</body>
</html>1.3 网页基本标签
-
标题标签
-
段落标签
-
水平线标签
-
换行标签
-
字体标签（粗体，斜体）
-
特殊符号
<!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>
<p>真奇怪！真奇怪！</p>
<!--水平线标签-->
<hr>
<!--换行标签-->
两只老虎，两只老虎，<br/>
跑得快，跑得快，<br/>
一只没有眼睛，<br/>
一只没有尾巴，<br/>
真奇怪！真奇怪！<br/>
<!--粗体，斜体-->
<h1>字体样式标签</h1>
粗体：<strong>I love you!</strong><br/>
斜体：<em>I love you!</em>
<!--特殊符号-->
空 格
空 格
<br/>
大于号>
<br/>
小于号<
<br/>
作者©
</body>
</html>1.4 图像标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图像标签</title>
</head>
<body>
<!--
src（必选） 图像地址：相对地址（推荐）和绝对地址 ../ 表示上一级地址
alt（必选） 表示错误返回值
title(可选) 鼠标悬停提示文字
width/height（可选） 宽度和高度
-->
<img src="../resource/image/1.jpg" alt="ifeng头像" title="提示文字" width="400" height="400">
</body>
</html>1.5 链接标签
图片标签和超链接标签：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>链接标签</title>
</head>
<body>
<!--锚链接跳转到顶部-->
<a id="top"></a>
<!--a标签
href:必选，表示要跳转的网页
target: 表示窗口在哪里打开
_blank 新标签中打开
_self 当前页面打开
-->
<a href="1.我的第一个网页.html" target="_blank">点击我跳转到网站1</a><br/>
<a href="https://www.baidu.com" target="_self">点击我跳转到百度</a><br/>
<!--跳转网页可以嵌套图片-->
<h><a href="1.我的第一个网页.html" target="_blank">
<img src="../resource/image/1.jpg" alt="ifeng头像" title="提示文字" width="400" height="400">
</a></h>
<br/>
<!--锚链接跳转到顶部
锚链接：需要一个锚标记和跳转标记
-->
<a href="#top">回到顶部</a>
<!--功能性链接
邮件：mailto
QQ信息：搜索QQ推广，去官网找代码
-->
<a href="mailto:2726651967@qq.com">点击发送邮件</a>
</body>
</html>1.6 块元素和行内元素
1.6.1 块元素
无论内容多少，该元素独占一行 (p、h1-h6...)
1.6.2 行内元素
内容撑开宽度，左右都是行内元素的可以在排在一行 (a 、strong 、em …)
1.7 列表标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表</title>
</head>
<body>
<!--有序列表 ordered list-->
<ol>
<li>java</li>
<li>前端</li>
<li>大数据</li>
<li>C、C++</li>
<li>算法</li>
</ol>
<hr>
<!--无序列表-->
<ul>
<li>java</li>
<li>前端</li>
<li>大数据</li>
<li>C、C++</li>
<li>算法</li>
</ul>
<hr>
<!--自定义列表
dl 标签
dt 表名
dd 内容
-->
<dl>
<dt>科目</dt>
<dd>java</dd>
<dd>大数据</dd>
<dd>算法</dd>
<dt>位置</dt>
<dd>上海</dd>
<dd>杭州</dd>
<dd>南京</dd>
</dl>
</body>
</html>1.8 表格标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<!--
table 表标签
tr 横向
td 纵向
border设置边框，默认1px，idea显示废弃
-->
<table border>
<tr>
<td colspan="3">学生成绩</td>
</tr>
<tr>
<td rowspan="2">Yaof</td>
<td>语文</td>
<td>99</td>
</tr>
<tr>
<td>数学</td>
<td>100</td>
</tr>
<tr>
<td rowspan="2">Wangy</td>
<td>语文</td>
<td>59</td>
</tr>
<tr>
<td>数学</td>
<td>20</td>
</tr>
</table>
</body>
</html>1.9 媒体元素
视频 video 音频 audio controls: 控制台 autoplay: 自动播放
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>媒体元素</title>
</head>
<body>
<!--
视频 video
音频 audio
controls: 控制台
autoplay: 自动播放
-->
<!--<video src="../resource/video/**.mp4" controls autoplay></video>-->
<audio src="../resource/audio/White-Lie.mp3" controls autoplay></audio>
</body>
</html>总结
<!-- div分模块, span小分隔, p段落, <转义<, 转义空格, <hr>分隔线, <br>换行, <h1>一级标题</h1> <h2>二级标题</h2>, 设置id，然后使用#实现跳转,href=#目标id, --> <!-- <ul>无序列表, <ol>有序列表, <dl>自定义列表 <dt>为表头 table 新建表 <thead>表头 <tbody>表主体 <tr>行内容</tr>-->
588
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
