HTML随堂笔记【狂神说JAVA】
课程地址：https://www.bilibili.com/video/BV1x4411V75C?p=1
演示代码：https://pan.baidu.com/s/18ik8cTJT75_CVFuM-m12mQ
提取码：apzm
HTML是什么？
HTML (Hyper Text Markup Language)超文本标记语言
超文本包括：文字，图片，音频，视频，动画等
HTML 5提供了一些新的元素和一些有趣的新特性，同时也建立了一些新的规则。这些元素、特性和规则的建立，提供了许多新的网页功能，如使用网页实现动态渲染图形、图表、图像和动画，以及不需要安装任何插件直接使用网页播放视频等。
HTML的优势
- 世界知名浏览器厂商对对HTML5的支持
- 市场的需求
- 跨平台
W3C标准
W3C
World Wide Web Consortium (万维网联盟)
成立与1994年，Web技术领域最具权威和影响力的国际中立性技术标准机构
W3C标准内容
- 结构化标准语言（HTML，XML)
- 表现标准语言(CSS)
- 行为标准语言（DOM,ECMAScript)
常见IDE
- 记事本
- DreamWeaver
- IDEA
- WebStorm
- ......
HTML基本结构
网页基本信息
<!--DOCTYPE:告诉浏览器，我们要使用什么规范 -->
<!DOCTYPE html>
<html lang="en">
<!--head标签代表网页头部-->
<head>
<!--meta 描述性标签，它用来描述一些网站信息 -->
<!--meta一般用来做SEO -->
<meta charset="UTF-8">
<meta name="keywords" content="HTML笔记">
<meta name="description" content="一起学习，共同进步">
<!-- title是网页标题 -->
<title>Title</title>
</head>
<!--body是网页主体-->
<body>
Hello World!!
</body>
</html>
网页基本标签
-
标题标签
h1,h2 ,h3,h4,h5,h6
-
段落标签
<p>我是段落标签</p> -
换行标签
<br/> -
水平线标签
<hr/> -
字体样式标签
加粗：
<strong>code is poetry</strong>斜体：
<em>code is poetry</em> -
注释和特殊符号
注释：
<!--注释内容-->特殊符号
空格： 大于号：> 小于号:< 版权符号：©
图形标签
常见的图像格式
- JPG
- GIF
- PNG
- BMP
- ......
使用
src:图片地址（绝对地址/相对地址）（必填）
../一级目录
alt :图片加载失败后显示的文字（必填）
链接标签
- 文本超链接
- 图像超链接
使用
href：必填，表示要跳转到的页面地址
target:表示窗口在哪里打开
_blank:在新窗口中打开被链接文档。
_self:默认。在相同的框架中打开被链接文档。
_parent:在父框架集中打开被链接文档。
_top:在整个窗口中打开被链接文档。
framename:在指定的框架中打开被链接文档。
超链接
- 页面间链接
- 锚链接
- 标记位置
<a name="top">我是文章顶部</a> - 跳转链接(可跨页面跳转)
<a href="#top">点击跳转至文章顶部</a>
- 标记位置
- 功能性链接
- 邮件链接：
<a href="mailto:an_shiguang@163.com">点击联系我</a> - QQ链接：https://shang.qq.com/v3/widget.html
行内元素和块元素
块元素
无论内容有多少，始终独占一行显示
p,h1~h6
行内元素
内容撑开元素，左右都是行内元素的可以排在一行
a,strong,em
列表
定义
列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷地获得相应的信息
分类
-
有序列表
<ol> <li>java</li> <li>c++</li> <li>php</li> <li>python</li> </ol> -
无序列表
<ul> <li>java</li> <li>c++</li> <li>php</li> <li>python</li> </ul> -
自定义列表
<dl> <dt>语言</dt> <dd>java</dd> <dd>c++</dd> <dd>python</dd> <dd>php</dd> </dl>
表格
优点
- 简单通用
- 结构简单
基本结构
-
单元格
-
行
-
列
-
跨行
-
跨列
<table border="1px"> <tr> <td colspan="3">学生成绩</td> </tr> <tr> <td rowspan="2">狂神</td> <td>语文</td> <td>100</td> </tr> <tr> <td>数学</td> <td>100</td> </tr> <tr> <td rowspan="2">秦疆</td> <td>语文</td> <td>100</td> </tr> <tr> <td>数学</td> <td>100</td> </tr> </table>
视频和音频
- 视频元素 video
- 音频元素 audio
src：资源路径
controls:控制条
autoplay:自动播放
页面结构分析
iframe内联框架
src:地址
width:宽度
height：高度
name:框架标识名
表单
action:表单提交的位置，可以是网站，也可以是请求处理地址
method:有get和post两种方式，提交方式
-
get提交方式
可以在url看到提交的信息，不安全，高效
-
post提交方式
比较安全，传输大文件
表单元素格式
增强鼠标可用性
<label for="mark">点我输入</label>
<input type="text" id="mark">
表单简单验证
<!-- 邮箱验证-->
<input type="email" name="email">
<!-- URL验证-->
<input type="url" name="url">
<!-- 数字验证 min为最小值 max为最大值 step为每次增加或减小的数值大小-->
<input type="number" min="20" max="1000" step="10">
<!-- 滑块-->
<input type="range" name="voice" min="0" max="100" step="3">
<!--搜索框-->
<input type="search" name="search">
表单的应用
- 隐藏域
hidden - 只读
readonly - 禁用
disabled
表单初级验证
常见形式
placeholder:提示信息
required：非空判断
pattern:正则表达式