课程地址: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技术领域最具权威和影响力的国际中立性技术标准机构
http://www.w3.org/
http://www.chinaw3c.org/
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
:正则表达式