html
初识html
什么时HTML
- HTMl
- Hyper Text Markup Language （超文本标记语言）
为什么学习HTML
- 市场需求
- 跨平台
- 微软
- 苹果
- Opera
- Mozilla
W3c 百度了解。用有道
html的基本结构
<html></html> 这个叫网页头部
<body> 开放标签
这个叫主体部分
</body>闭合标签
<hr/> 自闭和标签
网页基本信息
html 的自带的几个标签的基本信息
<!--DOCTYPE:告诉浏览器，我们要使用什么规范
html： 使用的规范
去掉这一行也行<!DOCTYPE html> ，因为默认时html，这行只是告诉我们用什么规范
-->
<!DOCTYPE html>
<!--html总标签-->
<html lang="en">
<!--head网页头部-->
<head>
<!--meta描述标签，它用来描述我们网站的一些信息-->
<!--meta 一般用来做SEO-->
<!--属性
name:标题
content：信息
description：描述
-->
<meta charset="UTF-8">
<meta name="yinbangchi" content="尹帮炽学java">
<meta name="description" content="尹帮炽，静态动态">
<!--网页标题-->
<title>第一个html</title>
</head>
<!--body网页主体-->
<body>
Hoold hoda
</body>
</html>
html 中的几个简单标签
<!--标题标签-->
<h1></h1>
<h2></h3>
<!--段落标签-->
<p>
这个行之间的间隔比较大
</p>
<!--换行标签 行之间的间隔紧密-->
<br/>
<!--字体样式标签-->
<strong>粗体</strong>
<em>斜体</em>
<!--符号-->
空格
>大于号
< 小于号
©版权符号
<!---->
<!---->
<!---->
<!---->
<!---->
图标标签
<!--
src： 路径
两个路径
绝对路径：E:\IdeaMaven\HTML\resoucess\images\1.png
1. 创建个资源目录：resoucess，图片目录images
相对路径： ../resoucess/images/1.png
建议使用相对路径
alt：图片路径错误或图片不存在等，返回数据
title：鼠标停留在图片上时出现字段。
-->
<img src="../resoucess/images/1.png" alt="图片不存在" title="悬停字段">
链接标签
<!--
href： 路径
target: 表示窗口在那里打开
_blank： 打开一个新窗口
_self:本地刷新
-->
<a href="1.我的第一个html.html" target="_blank">字段链接</a>
<a href="1.我的第一个html.html" target="_self">字段链接</a>
<!--使用·图片链接-->
<a href="1.我的第一个html.html" target="_self">
<img src="../resoucess/images/1.png" alt="图片不存在" title="悬停字段">
</a>
<!--锚链接 可以跳页面-->
<a name="namm"></a>
<a href="#name"></a>
<!--邮件链接
mailto: 邮件地址
-->
<a href="mailto:[email protected]">点击联系我</a>
<!--QQ链接
百度搜素qq推广，登录 推广
-->
列表
列表
<ol>
<li>有序</li>
</ol>
<ul>
<li>无序</li>
</ul>
<!--自定义列表
dl：标签
dt：列表名称
dd:列表内容
-->
<dl>
<dt></dt>
<dd></dd>
<dd></dd>
</dl>
表格
<!--table
tr: 行
td： 列
属性：
border="1px"
colspan="4" 跨列:站四个格子
rowspan="2" 跨行
-->
音频视频
音频视频
- 视频元素
- video
- 音频元素
- audio
<!--
src： 资源路径
controls：控制条
autoplay:自动播放
-->
<video src="../resoucess/video/【狂神说Java】HTML5完整教学通俗易懂%20-%2018.HTML18：表单初级验证(Av55631961,P18).mp4" controls ></video>
<!--同理 属性基本一样-->
<audio src="" controls></audio>
页面结构分析
页面结构结构分析
| 元素名 | 描述 |
|---|---|
| header | 标题头部区域的内容（用于页面或页面中的一块区域） |
| footer | 标记脚部区域的内容（用于整个页面或页面的一块区域） |
| section | Web页面中的一块独立区域 |
| article | 独立的文章内容 |
| aside | 相关内容或应用（常用于侧边栏） |
| nav | 导航类助内容 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>页面结构分析</title>
</head>
<body>
<header>
<h2>网页头部</h2>
</header>
<section>
<h2>网页主体</h2>
</section>
<footer>
<h2>网页脚部</h2>
</footer>
</body>
</html>
iframe 内联框架
哔哩哔哩有自动生成的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内联框架</title>
</head>
<body>
<!--
scr：可以内嵌的窗口路径
name：可以点击链接确定内嵌的窗口的窗口不过iframe的src必须为空
w-h： 可设置大小
-->
<iframe src="内联frame.html" ></iframe>
<iframe src="" name="htllo"></iframe>
<a href="内联frame.html" target="htllo"></a>
</body>
</html>
表单
表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
p： 块元素
get:可以看到数据，不安全，高效，用于测试
post:比较安全，传输大文件。比get安全。不过也可以看到。
-->
<form action="视频.html" method="get">
<!--
value: 默认值
maxlength：限制字符数
size：大小
reset：重置
-->
<!--
checked： 默认
-->
<p>名字： <input type="text" name="username"></p>
<p>密码： <input type="password" name="pwd"></p>
<!--
name：表示组
valu：单选框的值
-->
<p>性别：
<input type="radio" value="boy" name="sex"/>男
<input type="radio" value="gifl" name="sex"/>女
</p>
<!--图片按钮-->
<p>
<input type="image" scr/>
</p>
<p>
<input type="submit">
<input type="reset">
</p>
</form>
</body>
</html>
下拉框
<!--
checked： 默认
-->
<p>
<select name="列表名称">
<option value="1">dfao</option>
<option value="2">dfao</option>
<option value="3">dfao</option>
<option value="4">dfao</option>
<option value="5">dfao</option>
</select>
</p>
文件域与文本域
<!--
textarea:文本域
cols: 列
rows： 行
-->
<p>反馈：
<textarea name="textarea" cols="10" rows="20">文本内容</textarea>
</p>
<!--文件域
上传文件
-->
<p>
<input type="file" name="files">
</p>
验证
<p>邮箱：
<input type="email"name="email">
</p>
<!--必须时邮箱格式-->
<!--
验证属性：
email： 邮箱
url： 网址
-->
<!--
number:数字验证
max：最大值
min：最小值·
step：在10的之内的初始值和未尾值 如：0 10 20 30等也可用于商品增加
-->
<p>数字：
<input type="number"name="num" max="100" min="0" step="10">
</p>
滑块
<!--滑块
range
-->
<p>音量：
<input type="range" name="audio" max="100" min="0" step="2">
</p>
搜索
<!--搜素-->
<p>搜索：
<input type="search" name="search">
</p>
input 中的极大标签
readonly: 只读 只能看，不能改
disabled：禁用。 用于选择时，如不能选择男，如按钮
hidden： 隐藏
required： 不能为空
pattern：正则表达式
placeholder=“请输入用户名”
pattern：正则表达式
<p>
<input type="text" name="tdd">
</p>
鼠标的可用性
<p>
<label for="kk">你点</label>
</p>
<!--
再到text文本跨中添加一个 id=“kk”
鼠标点击你点，就会移动打扫text文本框中。
-->
正则表达式网址：
