JavaSE——HTML之基本标签、图片标签、超链接及锚链接
1. 定义
- HTML 是用来描述网页的一种语言。
- 指的是超文本标记语言 (Hyper Text Markup Language)
- 文本:文字、有格式的文本
- 超文本:文字,图片,音频,视频,动画、定位…
- 标记语言 : <>
- HTML 标签是由尖括号<>包围的关键词
- HTML 标签通常是成对出现的
- 标签对中的第一个标签是开始标签,第二个标签是结束标签
2. 发展史及优势
2.1 发展史
- HTML 1993年
- HTML2.0 1995年
- HTML3.2 1996年 (W3C推荐标椎)
- HTML4.0HTML4.01 (微小改进)
- XHTML1.0 2000年
- XHTML2.0 由于改动过大,学习成本高了,胎死腹中!
- HTML5 (最新版) 2004 2007正式纳入新成立的HTML工作团队!
- 2013 HTML 5.1 草案~
2.2 优势
- 所有知名浏览器厂商都支持 :微软、谷歌、苹果、Opera、Mozilla firefox。很多杂的浏览器,并不支持 HTML5
- 市场的需求
- 跨平台(浏览器)
3. W3C标准
-
W3C: 万维网联盟
– 万维网联盟创建于1994年,是Web技术领域最具权威和影响力的国际中立性技术标准机构。
– http://www.chinaw3c.org/
.com 国际的 .cn 中国 .org开源的 -
W3C标准
– 结构化标准 (XHTML、HTML)
– 表现标准 (CSS)
– 行为标准 (Dom、ECMAScript标准==> JavaScript)
– 很多浏览器还停留在ES5规范上,但是开发人都使用的是ES6规范 - 案例:在网页上打印一首诗
– 案例代码
– 运行结果 -
常见的前端开发工具
– 记事本
– Notepad++
– Sublime
– VScode(前端专业)
– WebStorm(前端专业)IDEA
– HBuilder (专业)
……
4. HTML的基本结构
- 所有的HTML 标签 都以 <> 开始 </> 结尾
- 正常网页的所有内容都需要放在 < body> 标签中
- DOCTYPE文档类型,默认声明:表示告诉浏览器这个网页使用什么规范,我们默认使用的是HTML
- Title 标签,就是网站的小标题名称
- meta 描述信息
- SEO:网站搜索
- 建议规范编码,统一使用UTF-8(全世界) gb2312:包含了所有的中文字符
5. 网站的基本标签
5.1 标题标签
-
h1~h6+tab键
5.2 段落标签
-
p+tab键
5.3 水平线标签
-
hr+tab键
5.4 换行标签
-
br+tab键
5.5 字体样式标签
-
斜体:em+tab键、粗体:strong+tab键
5.6 特殊符号标签
-
空格: 大于:> 小于:< 版权符号:©
6. 图片标签
- 常见的图片格式: .png .jpg .jpeg .bmp .gif …
- png 会有浏览器兼容问题,一般使用 .jpg .gif多一点
- 图片:静态资源 单独放 statics\images
- 相对路径,绝对路径
- 相对路径 …/…/
绝对路径 https://150.109.117.44:443/usr/themes/PureLoveForTypecho/images/banner2.jpg -
src: 资源图片 : 图片的路径
alt: 图片加载失败,表示图片的问题,也即图片描述
title: 鼠标放在图片上的悬浮提示
width: 宽
height:高
– 案例代码
– 运行结果
7. 超链接
- 超链接:表示从一个地方跳转到另外一个地方
-
href:要跳转地址
target: 目标打开的窗口,在自己这个当前页面打开,还是在新的页面打开
_self : 在自己的窗口打开
_blank: 在新窗口中打开 - 和图片嵌套使用
– 案例代码
– 运行结果
8. 锚链接
- 用于页面间指定位置跳转 : 快速定位目录
- 可以在同一页页面中跳转
- 也可以在不同页面中跳转
– 案例一:在同一页页面中跳转
– 运行结果
– 案例二:在不同页页面中跳转
– 运行结果
9. 块元素和行内元素
- 块元素:无论内容多少,都独占一行(p,h1~h6)
- 行内元素:只根据内容的长度来扩展 (a,strong,em….)
- 案例代码
- 运行结果