首页 > 编程札记 > 编程

java学习（五）——初识HTML

阅读：评论：0

java学习（五）——初识HTML

HTML5

初识HTML

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

W3C :World Wide Web Consortium(万维网联盟)

W3C标准包括：

结构化标准语言（HTML、XML）
表现标准语言（CSS）
行为标准（DOM、ECMAScript）

HTML基本结构

网页基本信息

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

网页基本标签

标题标签

段落标签

换行标签

水平线标签

字体样式标签

注释和特殊符号标签

<!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><!--水平线标签-->
<hr/><!--换行标签-->
那年长街春意正浓<br/>策马同游 烟雨如梦<br/>檐下躲雨<br/>望进一双深邃眼瞳<br/><!--粗体，斜体-->
<h1>字体样式标签</h1>
粗体： <strong>i love you</strong><br/>
斜体： <em>i love you</em><!--特殊符号-->
<br/>
空        格：
空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格：<br/>
&gt;
<br/>
&lt;
<br>
&copy;版权所有shanliang<!--
特殊符号记忆方式
&+   ；
查百度
--></body>
</html>

图像、超链接、网页布局

常见的图像格式：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/photo_2.bmp" alt="狂神头像" title="Saber！">
</body>
</html>

链接标签

超链接：

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

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>链接标签学习</title>
</head>
<body><!--使用name作为标记-->
<a name="top">顶部</a><!--a标签
href：必填，表示要调到那个页面
target:表示窗口在那里打开_blank    在新标签中打开_self     在自己的标签打开
--><a href="1.我的第一个网页.html" target="_blank">点击我跳转到页面一</a>
<a href="" target="_self">点击我跳转到页面二</a>
<br/>
<!--图片超链接-->
<a href="1.我的第一个网页.html"><img src="../resources/image/photo_2.bmp" alt="狂神头像" title="Saber！">
</a><!--锚链接
1. 需要一个锚标记
2. 跳转到标记
-->
<a href="#top">回到顶部</a><a name="dowm">down</a><!--功能性标签
邮件链接：mailto
QQ链接
-->
<a href="mailto:1215156554@qq">点击联系我</a><a target="_blank" href="=3&uin=&site=qq&menu=yes"><img border="0" src="=2::52" alt="你好，点我获得java学习资料" title="你好，点我获得java学习资料"/>
</a></body>
</html>

行内元素和块元素

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

列表、表格、媒体元素

列表的分类：

无序列表
有序列表
定义列表

表格

为什么使用表格

简单通用
结构稳定

基本结构

1. 单元格
2. 行
3. 列
4. 跨行、跨列

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>表格学习</title>
</head>
<body><!--表格table
行 tr  rows
列 td
-->
<table border="1px"><tr>
<!--    colspan 跨列--><td colspan="3">1-1</td></tr><tr>
<!--    rowspan 跨行--><td rowspan="2">2-1</td><td>2-2</td><td>2-3</td></tr><tr><td>3-1</td><td>3-2</td></tr>
</table></body>
</html>

媒体元素

视频元素：video

音频元素：audio

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>媒体元素学习</title>
</head>
<body><!--音频和视频
src:资源路径
controls：控制条
autoplay：自动播放
-->
<video src="../resources/video/2.mp4" controls autoplay></video><audio src="../resources/audio/GEM.mp3" controls autoplay></audio></body>
</html>

页面结构分析

元素名	描述
header	标题头部区域的内容（用于页面或页面中的一块区域）
footer	标记脚部区域的内容（用于整个页面或页面的一块区域）
section	Web页面中的一块区域
article	独立的文章内容
aside	相关内容或应用（常用于侧边栏）
nav	导航类辅助内容

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

iframe内联框架

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>内联框架</title>
</head>
<body><!--iframe内联框架
src：地址
w-h：宽度高度
name：框架标识名
-->
<iframe src="" name="hello" frameborder="0" width="1000" height="800"></iframe>
<a href="" target="hello">点击跳转</a></body>
</html>