Java（HTML01）

参考视频：HTML5完整教学通俗易懂（狂神）

1. 初识HTML

1.1 什么是HTML

HTML
- Hyper Text Markup Language（超文本标记语言）

1.2 HTML发展史

1.3 HTML5的优势

世界知名浏览器厂商对HTML5的支持
- 微软（Microsoft）
- 谷歌（Google）
- 苹果（Apple）
- 欧朋（Opera）
- 火狐（Mozilla）
市场的需求
跨平台

1.4 W3C标准

W3C
- World Wide Web Consortium （万维网联盟）
- 成立于1994年，Web技术领域最权威和具影响力的国际中立性技术标准机构
- http://www.w3.org/
- http://www.chinaw3c.org/
W3C标准包括
- 结构化标准语言（HTML、XML）
- 表现标准语言（CSS）
- 行为标准（DOM、ECMAScript）

1.5 常见IDE

记事本
Dreamweaver
IDEA
WebStorm
… …

示例一：

2. 网页基本信息

2.1 HTML基本结构

<body>、</body>等成对的标签，分别叫开放标签和闭合标签
单独呈现的标签（空元素)，如<hr/>；意为用/来关闭空元素

2.2 网页基本信息

DOCTYPE声明
<title>标签
<meta>标签

示例一：


<!-- DOCTYPE：告诉浏览器，我们要使用什么规范 -->
<!DOCTYPE html><html lang="en"><!-- head标签代表网页头部 -->
<head><!--  meta描述性标签，它用来描述我们网站的一些信息  --><!--  meta一般用来做SEO  --><meta charset="UTF-8"><meta name="keywords" content="狂神说Java，西部开源"><meta name="description" content="来这个地方可以学习Java"><!--  title网页标题  --><title>我的第一个网页</title>
</head><!-- body标签代表网页主题 -->
<body>Hello World！
</body>
</html>

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><h7>七级标签</h7>
<h8>八级标签</h8>
没有标签<!--段落标签-->
<p>七里香</p>
<p>雨下整夜我的爱溢出就像雨水</p>
<p>院子落叶跟我的思念厚厚一叠</p>
<p>几句是非也无法将我的热情冷却</p>
<p>你出现在我诗的每一页</p><!--水平线标签-->
<hr/><!--换行标签-->
七里香<br/>
雨下整夜我的爱溢出就像雨水<br/>
院子落叶跟我的思念厚厚一叠<br/>
几句是非也无法将我的热情冷却<br/>
你出现在我诗的每一页<br/><!--粗体，斜体-->
<h1>字体样式标签</h1>
粗体：<strong>i o u</strong>
斜体：<em>i o u</em><br/>
<!--特殊符号-->
空     格
<br/>
空&emsp;&emsp;&emsp;&emsp;格
<br/>
空&nbsp;&emsp;&emsp;&emsp;格
<br/>
&gt;
<br/>
&lt;
<br/>
&copy;版权所有zach<!--
特殊符号记忆方式
&   ;--></body>
</html>

结果一：

4. 图像标签

常见的图像格式
- JPG
- GIF（动图）
- PNG
- BMP（位图）
- … …

示例一：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>图像标签学习</title>
</head>
<body>
<!--img学习
src:图片地址相对地址，绝对地址../ --上一级目录alt:图片名字（必填）
-->
<img src="../resources/image/1.jpg"alt="zach头像" title="悬停文字-柯南" width="300" height="300"></body>
</html>

5. 超链接标签及应用

文本超链接
图像超链接

超链接

页面间链接
- 从一个页面链接到另一个页面
锚链接
功能性链接

示例一：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>链接标签学习</title>
</head>
<body><!--使用name作为标记-->
<a href="top">顶部</a><!--a标签
href:必填，表示要跳转到哪个页面
target:表示窗口在哪里打开
_black:在新标签页面打开
_self:在自己的页面中打开（默认）-->
<a href="1.我的第一个网页.html" target="_blank">点击跳转到页面一</a>
<br>
<a href="https://www.baidu.com" target="_self">点击跳转到百度</a>
<br>
<a href="1.我的第一个网页.html"><img src="../resources/image/1.jpg"alt="zach头像" title="悬停文字-柯南" width="200" height="200">
</a><p><a href="1.我的第一个网页.html"><img src="../resources/image/1.jpg"alt="zach头像" title="悬停文字-柯南" width="200" height="200"></a>
</p><p><a href="1.我的第一个网页.html"><img src="../resources/image/1.jpg"alt="zach头像" title="悬停文字-柯南" width="200" height="200"></a>
</p><p><a href="1.我的第一个网页.html"><img src="../resources/image/1.jpg"alt="zach头像" title="悬停文字-柯南" width="200" height="200"></a>
</p><p><a href="1.我的第一个网页.html"><img src="../resources/image/1.jpg"alt="zach头像" title="悬停文字-柯南" width="200" height="200"></a>
</p><!--锚链
1. 需要一个锚标记
2. 跳转到标记
#top（但是会在网址栏尾部加#top）
-->
<a href="#top">回到顶部</a><a href="down">底部</a><!--功能性链接
邮件链接：mailto
QQ链接：百度搜索qq推广
-->
<a href="mailto:525266345@qq.com">点击联系我</a>
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=525266345&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:525266345:53" alt="行不行啊" title="行不行啊"/>
</a></body>
</html>

6. 块元素和行内元素

块元素（块级元素）
- 无论内容多少，该元素独占一行
- （p、h1-h6…）
行内元素
- 内容撑开宽度，左右都是行内元素的可以排在一行
- （a.strong.em…）

7. 列表标签

什么是列表
- 列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷地获得相应的信息。
列表的分类
- 无序列表
- 有序列表
- 定义列表

示例一：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>列表学习</title>
</head>
<body>
<!--有序列表
应用范围：试卷，问答...
-->
<ol><li>Java开发</li><li>Python开发</li><li>C开发</li><li>运维</li><li>前端</li><li>测试</li>
</ol><!--分割线-->
<hr><!--无序列表
应用范围：导航，侧边栏...
-->
<ul><li>Java开发</li><li>Python开发</li><li>C开发</li><li>运维</li><li>前端</li><li>测试</li>
</ul><!--自定义列表
dl:标签
dt:列表名称
dd:列表内容 definition description ？公司网站底部
-->
<dl><dt>岗位</dt><dd>Java开发</dd><dd>Python开发</dd><dd>C开发</dd><dd>运维</dd><dd>前端</dd><dd>测试</dd><dt>工作地点</dt><dd>国内</dd><dd>国外</dd><dd>江苏</dd><dd>北京</dd><dd>火星</dd><dd>撒哈拉</dd>
</dl></body>
</html>

8. 表格标签

为什么使用表格
- 简单通用
- 结构稳定
基本结构
- 单元格
- 行
- 列
- 跨行
- 跨列

示例一：

<!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>

9. 媒体元素

视频和音频

视频元素
- video
音频元素
- audio

示例一：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>媒体元素学习</title>
</head>
<body><!--音频和视频
src:资源路径
controls:视频控件
autoplay:自动播放
--><video src="../resources/video/FriendsS01E01.mp4" controls></video><audio src="../resources/audio/周杰伦%20-%20七里香.flac" controls></audio></body>
</html>

10. 页面结构分析

示例一：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>页面结构分析</title>
</head>
<body><header><h2>网页顶部</h2>
</header><section><h2>网页主体</h2>
</section><footer><h2>网页底部</h2>
</footer></body>
</html>

11. iframe内联框架

示例一：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>iframe</title>
</head>
<body><!--iframe内联框架
src:地址
w-h:宽度、高度
-->
<iframe src="" name="4399" frameborder="0"width="1000" height="600"></iframe><a href="https://www.4399.com" target="4399">点击跳转</a><iframe src="https://www.bilibili.com" frameborder="0"width="800" height="600"></iframe><iframe src="//player.bilibili.com/player.html?aid=52007558&bvid=BV1B4411Y7bD&cid=91024770&page=1"scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"width="800" height="600">
</iframe>
</body>
</html>

结果一：

—————— THE END ——————

Java（HTML01）相关推荐

MongoDB和Java（4）：Spring Data整合MongoDB（XML配置）
最近花了一些时间学习了下MongoDB数据库,感觉还是比较全面系统的,涉及了软件安装.客户端操作.安全认证.副本集和分布式集群搭建,以及使用Spring Data连接MongoDB进行数据操作,收获很 ...
Effective Java（1）-创建和销毁对象
Effective Java(1)-创建和销毁对象转载于:https://www.cnblogs.com/Johar/p/10556218.html
菜鸟学Java（六）——简单验证码生成(Java版)
转载自菜鸟学Java(六)--简单验证码生成(Java版) 验证码大家都知道,它的作用也不用我多说了吧.如果不太清楚请参见百度百科中的解释,一般验证码的生成就是随机产生字符(数字.字母或者汉字等) ...
Java（enum）枚举用法详解
转载自 Java(enum)枚举用法详解本篇文章主要介绍了Java 枚举用法详解,枚举的好处:可以将常量组织起来,统一进行管理.有兴趣的可以一起来了解一下. 概念 enum的全称为 enumerat ...
MongoDB和Java（5）：Spring Data整合MongoDB（注解配置）
最近花了一些时间学习了下MongoDB数据库,感觉还是比较全面系统的,涉及了软件安装.客户端操作.安全认证.副本集和分布式集群搭建,以及使用Spring Data连接MongoDB进行数据操作,收获很 ...
appium+java（五）微信小程序自动化测试实践
前言: 上一篇<appium+java(四)微信公众号自动化测试实践>中,尝试使用appium实现微信公众号自动化测试,接着尝试小程序自动化,以学院小程序为例准备工作 1.java-cl ...
【零基础学Java】—初识Java（一）
[零基础学Java]- 初识Java(一)
零学Java（7）之数据类型，小AD竟然solo不过小朋友
作者简介本文章为转载,原作者名:编程界明世隐,仅用来学习简介:CSDN博客专家,从事软件开发多年,精通Java.JavaScript,博主也是从零开始一步步把学习成长.深知学习和积累的重要性,喜欢 ...
小闫陪你入门 Java （三）
意气风发啊骑上我快乐的小摩托良心公众号啊!我上墙了你开始了嚯嚯嚯嚯嚯哈哈哈哈哈皮皮虾我们走可乐在厨房红牛在冰箱6666666 看弹幕,点关注 " First say to yourself ...

Java（HTML01）

Java（HTML01）

1. 初识HTML

1.1 什么是HTML

1.2 HTML发展史

1.3 HTML5的优势

1.4 W3C标准

1.5 常见IDE

2. 网页基本信息

2.1 HTML基本结构

2.2 网页基本信息

3. 网页基本标签

4. 图像标签

5. 超链接标签及应用

6. 块元素和行内元素

7. 列表标签

8. 表格标签

9. 媒体元素

10. 页面结构分析

11. iframe内联框架

Java（HTML01）相关推荐

最新文章

热门文章