概述
-
什么是HTML
超文本标记语言 ( Hyper Text Markup Language )
超文本 : 文字 , 图片 , 音频 , 视频 , 动画 ,… -
发展历史
-HTML2.0 --> 文字 , 特别丑的文本框
HTML 5 ---- > 动画 , 渲染… -
HTML的优势
所有的浏览器都支持
市场的需求—从C/S—>b/s架构
跨平台 -
W3C标准
万维网联盟( World Wide Web Consortium )
三个标准
结构化=标准—>HTML , xml等
表现=标准—>CSS
行为=标准 —> ( ECMA Script )
网页编辑工具
记事本
Notpat++
Hbuilder
IDEA
WebStorm
VScode
HTML的基本结构
- Html注释 :
<!-- 注释 -->
- Html的基本结构 :
<!--声明 : 告诉浏览器使用什么规范-->
<!DOCTYPE html>
<html lang="en">
<!--标签是成对出现-->
<!--头部标签-->
<head>
<meta charset="UTF-8">
<!--网页标题-->
<title>狂神说Java</title>
</head>
<!--网页主体-->
<body>
Hello,World!
</body>
</html>
-
< title > 标签 : 网页的标题
-
< meta > 标签 : 关键字标签
<!--网页编码-->
<meta charset="UTF-8">
gb2312 ----> 包含全部的中文字符
utf-8 ---->包含了全世界所有地方的文字和符号
<!--搜索关键字-->
<meta name="keywords" content="狂神,Java,Python,linux,大数据">
<!--网页的描述-->
<meta name="description" content="狂神有点cool!">
网页的基本标签
- 标题标签
<!--标题标签-->
<!--H1最大 , H6最小-->
<h1>一级标题</h1>
<h2>一级标题</h2>
<h3>一级标题</h3>
<h4>一级标题</h4>
<h5>一级标题</h5>
<h6>一级标题</h6>
- 段落标签
<!--段落标签-->
<!--p:表示段落标签-->
<h1>段落标签</h1>
<p>两只老虎 两只老虎</p>
<p>跑得快 跑得快</p>
<p>一只没有耳朵 一只没有尾巴</p>
<p>真奇怪 真奇怪</p>
<p>两只老虎 两只老虎</p>
<p>跑得快 跑得快</p>
<p>一只没有耳朵 一只没有尾巴</p>
<p>真奇怪 真奇怪</p>
- 换行标签
<!--换行标签-->
<!--br:单标签-->
<h1>换行标签</h1>
两只老虎 两只老虎<br/>
跑得快 跑得快<br/>
一只没有耳朵 一只没有尾巴<br/>
真奇怪 真奇怪<br/>
两只老虎 两只老虎<br/>
跑得快 跑得快<br/>
一只没有耳朵 一只没有尾巴<br/>
真奇怪 真奇怪<br/>
- 水平线标签
<!--水平线标签-->
<!--hr表示水平线标签-->
<h1>水平线标签</h1>
<hr/>
两只老虎 两只老虎<br/>
跑得快 跑得快<br/>
一只没有耳朵 一只没有尾巴<br/>
真奇怪 真奇怪<br/>
两只老虎 两只老虎<br/>
跑得快 跑得快<br/>
一只没有耳朵 一只没有尾巴<br/>
真奇怪 真奇怪<br/>
- 字体标签
<!--字体加粗 , 斜体-->
<!--strong : 粗体-->
<!--em : 斜体-->
<h1>字体字体样式</h1>
I love you
加粗后 : <strong>I love you</strong>
斜体 : <em>I love you</em>
- 特殊符号
<!--特殊符号-->
<h1>特殊符号</h1>
<p>大于号 : > </p>
<p>小于号 : < </p>
<p>空格 : 你 好 | 你 好</p>
<p>引号 : ""</p>
<p>版权符号 : © 版权所有狂神</p>
<!--& + 符号字符 + 分号结束-->
图像标签
- 图像标签
常见的图像格式 :jpg/png/bmp /位图/gif
<!--图像标签-->
<!--
src = 图片的路径 (必填)
title = 鼠标悬停显示
alt = 图片的名字
w h->高
-->
<!--
相对路径
上一级路径表示方式 ../
绝对路径 : 不推荐使用
-->
<img src="../resources/images/tx.jpg" title="鼠标悬停说:狂神cool" alt="狂神头像" width="300px" height="300px">
链接标签
- 超链接
<!--a:表示超链接-->
<!--
href : 表示连接的地址 : 必填
-->
<a href="https://www.baidu.com">点击跳转</a>
<!--图像链接-->
<a href="https://www.baidu.com"> <img src="../resources/images/tx.jpg"> </a>
- 锚链接
<!--锚链接-->
<!--
可以从一个地方跳到锚指定的地方
需要的东西: 标记 ..跳转
-->
<!--创建一个标记-->
<a name="mark">锚链接标记</a>
<!--跳转到标记-->
<a href="#mark">点击跳转</a>
<a href="demo.html#top3">跳转到demo页标记三</a>
- 功能性链接
<!--功能性链接 -->
<a href="mailto:24736743@qq.com">发送邮件</a>
<!--QQ点击联系
地址 : https://shang.qq.com/v3/widget.html
-->
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=24736743&site=qq&menu=yes">
<img border="0" src="http://wpa.qq.com/pa?p=2:24736743:53" alt="给狂神发消息" title="给狂神发消息"/>
</a>
- target
target 目标跳转的网页打开方式
_blank : 打开新的网页
_self : 在本网页打开
-->
<p>
<a target="_blank" href="1.第一网页.html">打开第一个网页_在新网页中打开</a>
<a target="_self" href="1.第一网页.html">打开第一个网页_在自己网页中打开</a>
</p>
行内元素和块元素
- 独占一行的标签 : 块标签
p
h1~h6 - 只有自己那一部分 , 可以在行内定义多个的标签 : 行内标签
a
strong
img
em - 开放标签—>闭合标签
<p> </p>
<p> </p>
<p> </p>
<p> </p>
自闭合标签
<br/>
列表
<!--无序列表-->
<!--
<ul> -> 无序列表
<li> -> 选项
-->
<h1>无序列表</h1>
<ul>
<li>java</li>
<li>C/C++</li>
<li>Linux</li>
<li>Python</li>
</ul>
<!--有序列表-->
<!--
<ol> -> 有序列表
<li> -> 选项
-->
<h1>有序列表</h1>
<ol>
<li>java</li>
<li>C/C++</li>
<li>Linux</li>
<li>Python</li>
</ol>
<!--自定义列表-->
<!--
<dl> -> 自定义列表
<dt> -> 列表标题
<dd> -> 列表选项
-->
<h1>自定义列表</h1>
<dl>
<dt>Java</dt>
<dd>OOP</dd>
<dd>Annotation</dd>
<dd>Reflection</dd>
<dt>Python</dt>
<dd>数据分析</dd
<dd>数据挖掘</dd>
<dd>...</dd>
</dl>
表格
为什么使用表格 ?
- 简单通用
- 结构稳定
表格结构
- 单元格
- 行
- 列
HTML表格的创建
<!--表格-->
<!--
table : 表格
tr : 行 table rows
td : 列
-->
<table border=1px>
<tr>
<!--colspan=跨列-->
<td colspan="3">1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>
<tr>
<!--colspan=跨行-->
<td rowspan="3">2-1</td>
<td>2-2</td>
<td>2-3</td>
<td>2-4</td>
<td>2-5</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
<td>3-4</td>
</tr>
<tr>
<td>4-1</td>
<td>4-2</td>
<td>4-3</td>
<td>4-4</td>
</tr>
</table>
视频/音频
思考 : 如何在网页上播放视频和音频 ?
结论 : 应该有一个标签控制音频或者视频 .
video , audio
<!--播放视频-->
<!--前端要考虑问题 : 浏览器兼容性-->
<!--
video标签
src -> 视频路径 (必填)
controls -> 给视频增加控制播放的按钮
autoplay -> 自动播放视频
w-h -> 视频窗口大小
-->
<video src="../resources/video/多线程01:概述.mp4" controls width="1280px" height="720px" autoplay></video>
<!--音频标签-->
<!--
src -> 音频路径
controls -> 给音频增加控制播放的按钮
autoplay -> 自动播放视频
....
-->
<audio src="../resources/video/Human%20Legacy%20-%20Ivan%20Torrent.mp3" controls autoplay></audio>
网页结构分析
头部
导航
主体内容
底部
<header> 头部 </header>
<footer> 尾部 </footer>
<nav> 导航 </nav>
<article> 放文章 </article>
<code> 代码 </code>
<section>独立区域</section>
.......
内联框架
- iframe 内联框架
<!--iframe内联框架-->
<!--
作用:在一个网页中嵌入另外一个网页
-->
<!--<iframe src="https://www.baidu.com" frameborder="0" width="960" height="540"></iframe>-->
<!--在网页中实现容器的效果,实现页面内容加载-->
<iframe name="markup" src="" frameborder="0"></iframe>
<a href="https://www.baidu.com" target="markup">test</a>
<a href="2.HTML的标签.html" target="markup">test</a>
<a href="3.图像标签.html" target="markup">test</a>
<a href="4.超链接.html" target="markup">test</a>
<iframe src="//player.bilibili.com/player.html?aid=54171171&cid=95552484&page=17"
scrolling="no"
border="0"
frameborder="no"
framespacing="0"
allowfullscreen="true">
</iframe>
表单元素
什么叫表单 ?
登录 , 注册 …
常见表单元素
文本框 密码框 按钮 单选框 多选框 文本域 下拉框 文件域
邮箱 网址 数字 滑块 搜索框
<!--form为表单元素-->
<!--
action : 提交地址
method : 提交方式 : post/get
-->
<h1>注册</h1>
<!--
input属性:
type=类型
name: 名字 , 可以重复
id: 不能重复,保证全代码唯一
disabled: 禁用文本框
-->
<!--
post : 安全 效率低 能提交无限大的文件
get : 不安全 效率高 一次请求的文件量特别小 .
温馨提示 : 网页中一般使用post方式提交
-->
<form action="1.第一网页.html" method="get">
<!--文本框 : input type=text-->
<p>用户名 : <input type="text" name="username"> </p>
<!--密码框 : input type=password -->
<p>密码 : <input type="password" name="password"> </p>
<p>确认密码 : <input type="password" name="password"> </p>
<p>
<!--文件域-->
<input type="file">
</p>
<p>
<!--radio单选框-->
<!--name:绑定同一个组-->
<!--checked 默认选中-->
<!--
注意事项:
1. 若是要提交 , 则必须要有 name 和value属性
k=v&k=v&k=v&k=v&k=v&k=v
2. name就是key 提交的键 , vlaue就是提交的信息
-->
性别
<input type="radio" value="boy" name="group1">男
<input type="radio" value="girl" name="group1">女
<input type="radio" value="!boygirl" name="group1">人妖
</p>
<p>
<!--
注意事项:
1. 若是要提交 , 则必须要有 name 和value属性
k=v&k=v&k=v&k=v&k=v&k=v
2. name就是key 提交的键 , vlaue就是提交的信息
-->
爱好
<!-- checkbox多选框-->
<input type="checkbox" value="movie" name="hobby"/>看电影
<input type="checkbox" value="music" name="hobby"/>听歌
<input type="checkbox" value="road" name="hobby"/>压马路
<input type="checkbox" value="code" name="hobby"/>敲代码
</p>
<hr/>
<!--下拉框-->
<!--selected 选中-->
<select name="列表名称">
<option value="选择的值1">一</option>
<option value="选择的值2">二</option>
<option value="选择的值3" selected>三</option>
</select>
<select name="国家">
<option value="美国">美国</option>
<option value="中国" selected>中国</option>
<option value="印度">印度</option>
</select>
<select name="中国">
<option value="西安">西安</option>
<option value="重庆">重庆</option>
<option value="新疆" selected>新疆</option>
</select>
<p>
<!--按钮-->
<input type="button" value="我的第一个button按钮">
<!--图片按钮-->
<!--<input type="image" src="../resources/images/tx.jpg">-->
</p>
<p>
<!--
文本域
多行的文本框
-->
<textarea name="textarea" cols="20" rows="10">
文本内容
</textarea>
</p>
<hr/>
<!--邮箱表单简单验证-->
邮箱 : <input type="email" name="email"/> <br/>
<!--url简单验证-->
url : <input type="url" name="url"> <br/>
<!--数字的简单验证-->
数字 : <input type="number"> <br/>
<!--滑块,值得范围0~100-->
滑块 : <input type="range" name="range" value="30">
<!--搜索框-->
搜索框 : <input type="search" name="search">
<!--提交按钮 : input type=submit-->
<!--重填按钮 : type="reset"-->
<!--
提交会产生事件 , 会将表单的内容提交到action请求的地址 ,方法为method指定的方法
submit默认文字是提交 , 手动给按钮赋值使用 value
-->
<p>
<input type="submit">
<input type="reset">
</p>
</form>
表单其他应用
- 隐藏域 , 只读 , 禁用
hidden : 隐藏域
readonly : 只读
disabled : 禁用
思考?为什么要表单验证
降低服务器压力
保证数据的安全性
表单验证需要哪些东西 ?
- 提示信息
placeholder-->默认提示信息
<p>用户名 : <input type="text" name="username" placeholder="请输出用户名"> </p>
- 非空判断 (必填项)
required-->必须填写此项
<p>密码 : <input type="password" name="password" required> </p>
- 正则表达式验证
pattern-->正则表达式
自定义验证 : <input type="text" pattern=" RE "/>