HTML 笔记
- 初识HTML
- 网页基本标签
- 图像(超链接)网页布局
- 列表,表格,媒体元素
- 表单及表单应用
- 表单初级验证
初识HTML
什么是HTML?
- Hyper Text Markup Language(超文本标记语言) ----> 超文本包括:文字,图片,音频,视频,动画等
HTML5 2013-5-6
HTML5 的优势?
- 主浏览器都支持
- 市场的需求
- 跨平台
W3C 标准是什么?
- World Wide Web Consortium(万维网联盟)
- 成立于1994年。Web技术领域最权威和具影响力的国际中立性技术标准机构
- https://www.w3.org/
- https://www.chinaw3c.org/
W3C 标准包括:
- 结构化标准语言(HTML,XML)
- 表现标准语言(CSS)
- 行为标准(DOM(文档对象模型),ECMAScript(JavaScript))
常用IDE
- 记事本
- Dreamweaver
- IDEA
- WebStorm
HTML 基本结构
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-w1a0fEDs-1650806120317)(C:\Users\17,\AppData\Roaming\Typora\typora-user-images\image-20220405202057852.png)]
, 等成对的标签,分别叫 **开放标签**和**闭合标签**,单独呈现的标签(空元素),如
意为用 / 来关闭空元素
网页基本信息
- DOCTYPE 声明
- title 标签
- meta 标签
<!-- DOCTYPE: 告诉浏览器,我们要使用什么规范 -->
<!DOCTYPE html>
<html lang="en">
<!-- head标签代表网页头部 -->
<head>
<!-- meta 描述性标签,它用来描述我们网站的一些信息 -->
<!-- meta 一般用来做SEO -->
<meta charset="UTF-8">
<meta name="keywords" content="学习HTML5">
<!-- title 网页标签 -->
<title>Title</title>
</head>
<!-- body标签 代表网页主体 -->
<body>
hello,world!
</body>
</html>
网页基本标签
- 标题标签
- 段落标签
- 换行标签
- 水平线标签
- 字体样式标签
- 注释和特殊符号
<!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>
<!--水平线标签-->
<hr/>
<!--换行标签-->
俩只老虎 俩只老虎 <br/>
跑得快 跑得快 <br/>
一只没有耳朵 一只没有尾巴 <br/>
真奇怪 真奇怪 <br/>
<!--粗体,斜体-->
<br/>
粗体: <strong>i love you</strong> <br/>
斜体: <em>i love you</em>
<!--特殊符号-->
<br/>
空 格 <br/>
大于>号 <br/>
小于<号 <br/>
版权符号© <br/>
<!--
特殊符号记忆
& ;
-->
</body>
</html>
图像标签
- 常见的图像格式
- JPG
- GIF
- PNG
- BMP
- …
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
img 学习
src : 图片地址(必填)
相对地址(推荐使用),绝对地址
../ 代表上一级目录
alt : 图片名称(必填)
title:悬停文字
width:图片宽度
height:图片高度
hidden:隐藏
-->
<img src="../resources/image/01.jpg" alt="图片名字" title="悬停文字" width="500px" height="300px" hidden="hidden">
</body>
</html>
链接标签
-
文本超链接
-
图像超链接
-
页面链接 (从一个页面调转到另一个页面)
-
锚链接
-
功能链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>链接标签</title>
</head>
<body>
<!--
链接标签学习
href:跳转到哪里(必填)
target:
_blank 在另一个页面打开
_self 在本页面打开
-->
<a name="top">顶部</a> <br/>
<a href="1.我的第一个HTML.html" target="_blank">跳转到1.我的第一个HTML.html</a> <br/>
<a href="https://www.baidu.com" target="_self">跳转到百度</a> <br/>
<!--图片跳转-->
<a href="1.我的第一个HTML.html">
<img src="../resources/image/01.jpg" alt="图片名字" title="悬停文字" width="500px" height="300px">
</a>
<p><img src="../resources/image/01.jpg" alt="图片名字" title="悬停文字" width="500px" height="300px"></p>
<p><img src="../resources/image/01.jpg" alt="图片名字" title="悬停文字" width="500px" height="300px"></p>
<p><img src="../resources/image/01.jpg" alt="图片名字" title="悬停文字" width="500px" height="300px"></p>
<p><img src="../resources/image/01.jpg" alt="图片名字" title="悬停文字" width="500px" height="300px"></p>
<!--锚链接-->
<a href="#top">回到顶部</a> <br/>
<a href="3.图像标签.html#down">down</a> <br/>
<!--
功能性标签
邮件链接:mailto
QQ链接:
-->
<a href="mailto:2902987351@qq.com">点击联系我</a> <br/>
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=2902987351&site=qq&menu=yes">
<img border="0" src="http://wpa.qq.com/pa?p=2:2902987351:52" alt="你好,咨询" title="你好,咨询" width="50px" height="50px"/>
</a>
</body>
</html>
行内元素和块元素
- 块元素
- 无论内容多少,该元素独占一行
- (p,h1-h6,…)
- 行内元素
- 内容撑开宽度,左右都是行内元素的可以排在一行
- (a,strong,em,…)
列表
- 什么是列表
- 列表就是信息资源的一种展示形式。它可以使信息结构化和条理化,并以列表的样式显示出来,以便浏览器能更快捷地获得相应的信息
- 列表的分类
- 无序列表
- 有序列表
- 自定义列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
无序列表
应用范围:试卷,问答...
-->
<ol>
<li>Java</li>
<li>Python</li>
<li>Linux</li>
<li>JavaScript</li>
</ol>
<!--
有序列表
应用范围:导航,侧边栏....
-->
<ul>
<li>Java</li>
<li>Python</li>
<li>Linux</li>
<li>JavaScript</li>
</ul>
<!--
自定义列表
dl:标签
dt:列表名称
dd:列表内容
应用范围:公司网站底部
-->
<dl>
<dt>学科</dt>
<dd>Java</dd>
<dd>Python</dd>
<dd>Linux</dd>
<dd>JavaScript</dd>
</dl>
</body>
</html>
表格标签
- 为什么使用表格
- 简单通用
- 结构稳定
- 基本结构
- 单元格
- 行
- 列
- 跨行
- 跨列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
表格标签 table
表头 th (head)
行 tr (rows)
列 td (data)
-->
<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>
</html>
媒体元素
- 视频元素
- video
- 音频元素
- audio
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
音频和视频
src :资源路径
controls : 控制条
autoplay : 自动播放
muted : 静音
-->
<video src="../resources/video/2.mp4" controls autoplay></video>
<audio src="../resources/audio/3.mp3" controls autoplay></audio>
</body>
</html>
页面结构分析
元素名 | 描述 |
---|---|
header | 标题头部区域的内容(用于页面或页面中的一块区域) |
footer | 标记脚部区域的内容(用于整个页面或页面的一块区域) |
section | Web页面中的一块独立区域 |
article | 独立的文章内容 |
aside | 相关内容或应用(常用于侧边栏) |
nav | 导航类辅助内容 |
iframe 内联框架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
iframe 内联框架
src : 地址
w-h : 宽度,高度
-->
<iframe src="" frameborder="0" name="hello"></iframe>
<a href="1.我的第一个HTML.html" target="hello">点击跳转</a>
</body>
</html>
初识表单post和get提交
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
表单 form
action :表单提交的位置,可以是网站,也可以是一个请求处理地址
method :post , get 提交方式
get :我们可以在url中看到我们提交的信息,不安全,高效
post : 比较安全,传输大文件
-->
<h1>注册</h1>
<form action="1.我的第一个HTML.html" method="post">
<!-- 文本输入框 input type="text"-->
<p>名字:<input type="text" name="username"></p>
<!-- 密码框 input type="password"-->
<p>密码:<input type="password" name="pwd"></p>
<p>
<!-- 提交 input type="submit"-->
<input type="submit">
<!-- 重置 input type="reset"-->
<input type="reset">
</p>
</form>
</body>
</html>
表单元素
属性 | 说明 |
---|---|
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 时,指定按钮是否被选中 |
表单的应用
- 隐藏域 hidden
- 只读 readonly
- 禁用 disabled
表单初级验证
为什么需要表单验证?
因为可以减轻服务器的压力
- 常用方法
- placeholder 提示信息
- required 非空判断
- pattern 正则表达式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
表单元素 name 要写上
input
type:
text 文本框
password 密码框
submit 提交按钮
reset 重置按钮
radio 单选按钮 name(分组) checked 默认选择 需要分到一个组中
checkbox 多选按钮 checked 默认选择
button 普通按钮
image 图片按钮
file 文件域
emil 邮件验证
url URL验证
number 数字 max最大 min最小 step步长
range 滑块
search 搜索框
value: 初始值
maxlength: 可以输入的最长字符个数
select 下拉框
option 列表框 selected 默认选择
textarea 文本域 cols 行 rows 列
label 增强鼠标可用性(简明:点到文字也可以选中文本框)
属性
readonly 只读
disabled 禁用
hidden 隐藏域
表单初级验证
placeholder 提示信息
required 非空判断
pattern 正则表达式
-->
<form action="1.我的第一个HTML.html" method="get" >
<p>名字:<input type="text" name="username" value="mingZi" ></p>
<p>密码:<input type="password" name="pwd" maxlength="8" placeholder="请输入密码"></p>
<p>性别:
<input type="radio" name="sex" value="boy" checked>男
<input type="radio" name="sex" value="girl">女
</p>
<p>爱好:
<input type="checkbox" name="sleep">睡觉
<input type="checkbox" name="game">游戏
<input type="checkbox" name="code" checked>写代码
<input type="checkbox" name="chat">聊天
</p>
<p>按钮:
<input type="button" name="btn1" value="点击变长">
<input type="image" src="../resources/image/01.jpg" width="50px" height="50px" formtarget="_blank">
</p>
<p>
<input type="file" name="files">
<input type="button" value="上传" name="upload">
</p>
<p>
<textarea name="textarea" id="textarea" cols="50" rows="10"></textarea>
</p>
<p>
<label for="mark">你点我试试</label>
<input type="text" id="mark">
</p>
<p>
<!--pattern 正则表达式 可以去搜索-->
<input type="text" name="diyEmil" pattern="">
</p>
<p>国家:
<select name="列表名称" id="">
<option value="CN">中国</option>
<option value="US">美国</option>
<option value="CH" selected>瑞士</option>
</select>
</p>
<!--邮件验证-->
<p>邮箱:
<input type="email" name="email" required>
</p>
<!--URL-->
<p>URL:
<input type="url" name="url">
</p>
<!--数字-->
<p>商品数量:
<input type="number" name="num" max="100" min="0" step="1">
</p>
<!--滑块-->
<p>滑块:
<input type="range" name="volume" min="0" max="100" step="2">
</p>
<!--搜索框-->
<p>搜索框:
<input type="search" name="search">
</p>
<p>
<input type="submit">
<input type="reset" value="清空表单">
</p>
</form>
</body>
</html>
</select>
</p>
<!--邮件验证-->
<p>邮箱:
<input type="email" name="email" required>
</p>
<!--URL-->
<p>URL:
<input type="url" name="url">
</p>
<!--数字-->
<p>商品数量:
<input type="number" name="num" max="100" min="0" step="1">
</p>
<!--滑块-->
<p>滑块:
<input type="range" name="volume" min="0" max="100" step="2">
</p>
<!--搜索框-->
<p>搜索框:
<input type="search" name="search">
</p>
<p>
<input type="submit">
<input type="reset" value="清空表单">
</p>
```