狂神说Java个人笔记-HTML
什么是HTML
Hyper Text Markup Language(超文本标记语言)
超文本包括：文字，图片，音频，视频，动画等
w3c标准
WOrld Wide Web Consortium(万维网联盟)
成立于1994年，Web技术领域最权威和具影响力的国际中立性技术标准机构
W3C标准包括
-
结构化标准语言（HTML、XML）
-
表现标准语言（CSS）
-
行为标准（DOM、ECMAScript）
<!--告诉浏览器，我们要是用什么规范 -->
网页基本标签
-
标题标签 <title> 标题</title>
-
段落标签 <p>一段话</p>
-
换行标签 一句话
-
水平线标签 <hr/>
-
字体样式标签 粗体 粗体 斜体
-
注释和特殊符号 <!-- 注释-->
<!--特殊符号-->
空 格：
大于号>
小于号<
©版权符号
图像标签
常见的图像格式
JPG
GIF
PNG
BMP
<img src="../resources/image/1.jpg" alt="我的图片" title="悬停文字" width="1366" height="768">
<!--img学习
src:图片地址
相对地址（推荐使用），绝对地址
../返回上一级目录 -->
alt 图片加载失败会显示的内容“”。
链接标签
<!-- a标签
href：必填，表示要跳转到那个页面
target：表示窗口在那里打开
_blank 在新标签中打开
_self 在自己的网页中打开
-->
超链接
页面间链接
从一个页面链接到另一个页面
锚链接
功能性链接
<body>
<!--使用name作为标记-->
<a name="top">顶部</a>
<!-- a标签
href：必填，表示要跳转到那个页面
target：表示窗口在那里打开
_blank 在新标签中打开
_self 在自己的网页中打开
-->
<a href="https://www.baidu.com" target="_blank">点击调转到百度
<img src="../resources/image/1.jpg" alt="图片加载失败">
</a>
<!--锚链接
1.需要一个锚标记
2.跳转到标记-->
<a href="#top">回到顶部</a>
<a name="down">底部</a>
<!--功能性连接
邮件连接：mailto
QQ链接-->
<a href="mailto:1395950933@qq.com">点击联系我</a>
</body>
</html>
行内元素和块元素
块元素：无论内容有多少，元素自己独占一行
例如：<p></p><hr/> <h1>
行内元素：内容撑开宽度，左右都是行内元素的可以排在一行
例如：<a><strong><em>
列表标签
什么是列表
列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷地获得相应的信息。
列表的分类：
-
无序列表
-
有序列表
-
定义列表
表格
视频和音频
<title>视频和音频学习</title>
</head>
<body>
<!--音频和视频
src：资源路径
controls：控制调
autoplay：自动播放-->
<video src="../resources/video/2.mp4" controls autoplay></video>
<audio src="../resources/audio/3.mp3" controls autoplay></audio>
</body>
</html>
<title>页面结构分析</title>
</head>
<body>
<header>
<h2>网页头部</h2>
</header>
<section>
<h2>网页主体</h2>
</section>
<footer>
<h2>网页脚步</h2>
</footer>
<!--导航 nav-->
<nav></nav>
</body>
</html>
iframe内联框架
<title>内联框架iframe</title> </head> <body> <!--iframe内联框架 src：地址 w-h：宽，高--> <iframe src="" name="change" frameborder="0" width="1000" height="800">点击跳转学习java</iframe> <a href="https://www.baidu.com" target="change" >点击跳转</a> </body> </html>
表单
<title>表单学习</title>
</head>
<body>
<h1>注册</h1>
<!--表单form
action:表单提交的位置，可以是网站，也可以是一个请求处理地址
method:post，get 提交方式
get方式提交：我们可以在url中看到我们提交的信息，不安全，但高效
post：比较安全，传输大文件-->
<form action="10.表单.html" method="post">
<!--文本输入框 Input type="text" submit提交按钮 reset重置按钮 -->
<p>名字：<input type="text" name="username"/></p>
<p>密码：<input type="password" name="pwd"/></p>
<p><input type="submit">
<input type="reset"></p>
</form>
<title>表单学习</title>
</head>
<body>
<h1>注册</h1>
<!--表单form
action:表单提交的位置，可以是网站，也可以是一个请求处理地址
method:post，get 提交方式
get方式提交：我们可以在url中看到我们提交的信息，不安全，但高效
post：比较安全，传输大文件-->
<form action="10.表单.html" method="post">
<!--文本输入框 Input type="text" name 输入框的名字
value 默认一个初始化值
maxlength 文本框最大输入字符
size 文本框长度
submit提交按钮 reset重置按钮
-->
<p>名字：<input type="text" name="username" value="帅" maxlength="8" size="10"/></p>
<p>密码：<input type="password" name="pwd"/></p>
<!--单选框按钮 name必须为一致，才能表示为同一组，才能只选择一个
input标签 类型是radio时，必须有value-->
<p>
<input type="radio" value="boy" name="sex"/>男
<input type="radio" value="girl"name="sex">女
</p>
<p><input type="submit">
<input type="reset"></p>
</form>
</body>
</html>
单选框多选框
<!--单选框按钮 input type="radio" name必须为一致，才能表示为同一组，才能只选择一个
input标签 类型是radio时，必须有value
checked 默认选中-->
<p>
<input type="radio" value="boy" name="sex"/>男
<input type="radio" value="girl"name="sex">女
<!-- 多选框标签 input type="checkbox" -->
<input type="checkbox" value="sleep" name="hobby"/>睡觉
<input type="checkbox" value="talk" name="hobby"/>聊天
<input type="checkbox" value="game" name="hobby" checked/>游戏
<input type="checkbox" value="eat" name="hobby"/>吃东西
</p>
按钮
<!-- 按钮
input type="button" 普通按钮
input type="image" 图片按钮
input type="submit" 提交按钮
input type="reset" 重置按钮
-->
<p><input type="button" name="btn1" value="按钮名字"/>
<input type="image" src="resources/image/1.jpg"/>
</p>
<p><input type="submit">
<input type="reset"></p>
下拉框
<!--下拉框 列表框
<select>
name是下拉框的名字
option value 是下拉框可以选择的值
selected是默认为那个列
-->
<p>国家
<select name="列表名称" >
<option value="china" selected>中国</option>
<option value="us">美国</option>
<option value="agt">阿根廷</option>
<option value="md">缅甸</option>
</select>
</p>
文本域、文件域
<!-- 文本域
cols="30" rows="10" 行，，，列
-->
<p>反馈：<textarea name="textarea" cols="30" rows="10">文本内容</textarea></p>
<!-- 文件域
-->
<p><input type="file" name="files">
<input type="button" value="上传" name="upload">
</p>
功能验证
<!-- 邮箱验证 -->
<p><input type="email" name="email"></p>
<!-- URL验证-->
<p><input type="url" name="url"></p>
<!-- 数字验证
max最大数量
min 最小数量
step 每次点击增加或减少的数量-->
<p><input type="number" name="num" max="100" min="1" step="1"></p>
<!--滑块-->
<p>音量<input type="range" name="voice" max="100" min="0" step="2" ></p>
<!-- 搜索框-->
<p><input type="search" name="search"></p>
表单的应用
只读：value="admin"（先给一个默认值） readonly
禁用：disabled
隐藏：hidden
单词：description 描述 content内容
<!-- 增强鼠标可用性-->
<p> <lable for="mark">点击</lable>
<input type="text" id="mark"/>
</p>
表单初级验证
placeholder="请输入用户名"<!--提示属性--> required 非空判断 pattern 正则表达式
基础汇总
<!--告诉浏览器使用的规范-->