HTML5基础
一、初始HTML
1、现在普遍使用的是HTML5
- 世界知名浏览器厂商对HTML5的支持
- 市场需求
- 可以跨平台
2、W3C标准
- 万维网联盟
- W3C标准包括:
- 结构化标准语言(HTML,XML)
- 表现标准语言(CSS)
- 行为标准(DOM、ECMAScript)
3、开发软件
- 记事本
- Dreamweaver
- IDEA
- VScode
二、网页基本信息
- html超文本标记语言
- 标签有成对标签和自结束标签(不用成对出现)
<!--注释
DOCTYPE:告诉浏览器,我们要使用什么规范
<head> 网页头部</head>
<body> 网页主体</body>
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的网站</title>
</head>
<body>
hello,world
</body>
</html>
- 标签
标题标签
段落标签
换行标签
-
特殊符号:  ;表示空格 >; 表示大于号 <;表示小于号 ©(版权符号)
-
语义化标签:目的不是用户看到的形式而是让网站知道你要表达什么,比如一级标题二级标题,虽然样式有加粗但这不是关键,真正含义是一级标签内的内容更重要。关注的不是样式,而是语义。
-
在页面中独占一行的元素叫块元素(block element),不会独占一行的叫做行内元素。
-
粗体:
-
斜体:
三、列表
- 列表: 是信息资源的一种展示形式,它可以使信息结构化和条理化,并以列表的样式显示出来,以便浏览者能更快捷地获得相应的信息
<!--无序列表 用点标记的-->
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>梨子</li>
<li>橙子</li>
</ul>
<!--有序列表 按1234排序-->
<ol>
<li>苹果</li>
<li>香蕉</li>
<li>梨子</li>
<li>橙子</li>
</ol>
<!--自定义类别
dl:标签
dt:列表名称
dd:列表内容
-->
<dl>
<dt>长安忆(内容)</dt>
<dd>忆长安(注释)</dd>
</dl>
- 列表之间可以相互嵌套
四、图像标签
1、img标签
<!--
src:图片地址(必填)
相对地址,绝对地址
../ 上一级目录
title:悬停文字
可以设置大小
alt(必填)
-->
<img src="../resources/image/1.jpeg" alt="plmm"title="美女"width="300"height="300">
2、图片种类:
- jpg:颜色比较丰富,不支持透明,一般用来显示照片
- gif:支持颜色单一,简单透明,动图
- png:颜色丰富,复杂透明
- webp:表示网页中的图片的一种格式(具备上面三个的所有优点,但是兼容性不好)
- base64:将图片使用base64编码,将图片转换为字符
五、超链接标签
<!--
href:必填,表示要跳转的网页
target:表示窗口可以在哪里打开
_blank:在新标签中打开
_self:在自己的网页中打开
-->
<a href="4.图像标签.html"target="_blank">点击我看图片</a><br>
<a href="https://www.baidu.com">点击我去百度</a>
1、超链接应用
- 回到顶部:herf=“#”
- 回到底部:在元素前加id,然后herf=“#id”有了id后,可以跳转到页面的指定位置,只需将herf属性设置#目标元素的id,是不能重复的,唯一标识。
<a href="" id="顶部">顶部</a>
<a href="#顶部">回到顶部</a>
- 路径:
- 绝对路径:像某网站的固定网址一样就是绝对路径
- 相对路径:跳转到服务器内部的页面,用相对路径./文件名(同一目录下)…/文件名(当前文件所在目录的上一级目录里)既向上退一层,以此类推,…/,…/等
2、功能性链接
邮件链接:mailto
六、 块元素和行内元素
1、块元素:
- 无论内容多少,该元素独占一行
- (p、h1-h6)
2、行内元素
- 内容撑开宽度,左右都是行内元素的可以排在一行
- (a,strong,em)
七、表格标签
1、简单通用,结构稳定
2、基本结构:
- 单元格
- 行
- 列
- 跨行
- 跨列
<body>
<!--
表格table
行 tr
列 td
-->
<table border="1px">
<tr>
<!-- colspan:跨列-->
<td colspan="4">1-1</td>
</tr>
<tr >
<!-- rowspan:跨行-->
<td rowspan="2">2-1</td>
<td>2-2</td>
<td>2-3</td>
<td>2-4</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
</tr>
</table>
</body>
八、视频和音频
<!--
src:资源路径
controls:控制条
autoplay:自动播放
audio 音频
video 视频
-->
<audio src="../resources/MP3/纯纯的夏天.mp3"controls autoplay></audio>
- autoplay:是否自动播放 loop 循环播放
九、页面结构分析
-
布局标签:
header 网页头部,标题头部区域
main网页主体
section:Web页面中的一块独立区域
footer 网页底部
nav 网页中的导航
aside 侧边栏(和主体相关的其他内容)
article 文章
span 也是内容
十、内联框架
- 内联框架:用于向当前网页引入一个其他网页
十一、表单
1、表单网页中的表单用于将本地的数据提交给远程的服务器
2、form标签来创建:
- type:指定元素的类型:text、password、checkbox、radio、submit、reset、file、hidden、image、button,默认为text
- name:指定表单元素的名称
- value:元素的初始值,type为radio(单选框)时必须指定的一个值
- size:指定表单元素的初始宽度。当type为text或password时,表单元素的大小以字符为单位,对于其他类型,宽度以像素为单位
- maxlength:type为text或password时,输入的最大字符数
- checked:type为radio或checkbox时,指定按钮是否是被选中。(默认选项)
3、一些属性和操作
-
表单form
-
action:表单提交的位置,可以是网站,也可以是一个请求处理地址
-
method:post,get提交方式
- get方式提交:我们可以在url中看到我们提交的信息,不安全,但是高效。不能传输大文件
- post提交:比较安全,可以传输大文件
-
文本输入框:input type = “text”
-
密码框:input type = “password”
-
maxlength=“8”:最长能写几个字符 value=“开学”:初始值
-
input type=“radio” :单选框 必须写value,name一样就是一个组
<p>性别:
<input type="radio"value="boy"name="sex"/>男
<input type="radio"value="girl"name="sex"/>女
- input type=“checkbox”:多选框
<p>爱好
<input type="checkbox"value="sleep"name="hobby">睡觉
<input type="checkbox"value="code"name="hobby">敲代码
<input type="checkbox"value="chat"name="hobby">聊天
<input type="checkbox"value="play"name="hobby">玩耍
</p>
-
input type=“button”:按钮
-
image:图片按钮
-
reset:重置按钮
-
submit:提交按钮 用value可以修改按钮名称
-
下拉框,列表框
-
下拉框,select name=“列表名称”
<p>国家 <select name="类表名称" > <option value="cha">中国</option> <option value="us">美国</option> <option value="eng">英国</option> <option value="rus">俄国</option> </select> </p>
-
-
文本域 textarea
<!--文本域-->
<p>反馈:
<textarea name="textarea" cols="10" rows="50">文本内容</textarea>
</p>
- 文件域 file
<!-- 文件域
input type="file"-->
<p>
<input type="file"name="files">
<input type="button"value="上传"name="upload">
</p>
- 搜索框
<!-- 搜索框-->
<p>搜索框
<input type="search"name="search">
</p>
- 增强鼠标可用性
<!-- 增强鼠标可用性-->
<p> <lablel for="mark">你点我试试</lablel>
<input type="text"id="mark"></p>
4、表单的应用
属性:
- readonly:只读,不能做修改
- disable:禁用
- hidden:隐藏
5、验证格式
<!--验证格式-->
<!-- 邮箱验证-->
<p>邮箱:
<input type="email"name="emil">
<input type="submit">
</p>
<!-- URL验证-->
<p>URL:
<input type="url"name="url">
</p>
<!-- 数字验证-->
<p>数字
<input type="number"name="num"max="100"min="0"step="10">
</p>
<!-- 滑块-->
<p>滑块
<input type="range"name="voice"min="0"max="100"step="10">
</p>
6、表单初级验证
- 保护数据安全性,减轻压力
- 常用方式(属性)
- placeholder:默认提示信息
- required:元素不能为空,必须要填
- pattern:正则表达式