HTML5【狂神说Java笔记】
视频地址: 【狂神说Java】HTML5完整教学通俗易懂
1.什么是HTML
-
HTML
- Hyper Text Markup Language(超文本标记语言)
-
W3C
- World Wide Web Consortium
- 成立于1994年,Web技术领域最权威和具影响力的国际中立性技术标准机构
- http://www.w3.org/
- http://www.chinaw3c.org/
-
w3C标准包括
- 结构化标准语言(HTML、XML)
- 表现标准语言(Css)
- 行为标准(DOM、ECMAScript )
-
常见IDE
- 记事本
- Dreamweaver
- IDEA(咱们用IDEA)
- WebStorm
- …等等
2.网页基本信息
<!--!DOCTYPE html:告诉浏览器,我们要使用什么规范-->
<!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</title>
</head>
<!--body:网页主体-->
<body>
<h1> 狂神</h1>
</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>
<!--段落标签-->
<p>跑得快跑得快</p>
<p>一只没有耳朵</p>
<p>一只没有尾巴</p>
<p>真奇怪真奇怪</p>
<p>两只老虎两只老虎</p>
<!--<hr/>:水平线标签-->
<hr/>
<!--换行标签 <br/>: 自闭合标签-->
跑得快跑得快<br/>
一只没有耳朵<br/>
一只没有尾巴<br/>
真奇怪真奇怪<br/>
两只老虎两只老虎<br/>
<!--粗体,斜体-->
<p>粗体:<strong>i love you</strong></p>
<p>斜体:<em>i love you</em></p>
<br/>
<!--特殊符号-->
<p>空格: 空格</p>
<!-- → 空格符号-->
<p>空格: 空格</p>
<!--> → ">" -->
<p>></p>
<!--< →" < "-->
<p><</p>
<!--© → "©" -->
<p>©版权所有符号</p>
<br/>
<hr/>
<!--特殊符号记忆方式
& ;
-->
</body>
</html>
4.图像标签
- 图像标签
- 常见的图像格式
- JPG
- GIF (动图)
- PNG
- BMP(位图,不常用)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3.图片标签学习</title>
</head>
<body>
<!--img 学习
src : 图片地址
相对地址 ../ 上一级目录
绝对地址(写死): D:\work\Springboot_Example\JAVA_study\HTML\src\main\resources\images\善逸子.jpg
alt:图像的替代文字,图像找不到时会显示alt写的内容(必填)
title: 鼠标悬停提示文字
width :图像宽度
height : 图像高度
-->
<img src="../images/善逸子.jpg" alt="善逸子" title="我妻善逸" width="1000" height="600">
</body>
</html>
5.超链接标签应用
-
链接标签
-
文本超链接
-
图像超链接
-
超链接
-
页面间链接:从一个页面跳转到另一个页面
-
锚链接
-
功能性链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>链接