Java后端程序员学习前端之html
什么是html
Hyper Text Markup Language(超文本标记语言)
超文本包括:文字、图片、音频、视频、动画等
组织：W3C
World Wide Web Consortium(万维网联盟)。
成立子1994年，Web技术领域最权威和具影响力的国际中立性技术标准机构
http://www.w3.org!
http://www.chinaw3c.org
W3C标准包括
结构化标准语言(HTML、XML)
表现标准语言(CSS)
行为标准(DOM、ECMAScript)
基本结构：
网页基本信息：
<!DOCTYPE html>
<html lang="en"><!-- head标签代表网页头部 -->
<head><!-- meta描述性标签，它用来描述我们网站的一些信息 --><!-- meta一般用来做SEO --><meta charset="UTF-8"><meta name="keyword" content="加油"><!-- title网页标题 --><title>我的第一个网页</title>
</head><!-- body标签代表网页主体 -->
<body>HelloWorld
</body>
</html>网页基本标签：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><!-- 标题标签 --><h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5>五级标题</h5><h6>六级标题</h6><!-- 段落标签 --><p>窗外的麻雀 在電線桿上多嘴</p><p>你說這一句 很有夏天的感覺</p><p>手中的鉛筆 在紙上來來回回</p><p>我用幾行字形容你是我的誰</p><p>秋刀魚的滋味 貓跟你都想瞭解</p><p>初戀的香味就這樣被我們尋回</p><p>那溫暖 (的陽光) 像剛摘的 (鮮豔草莓)</p><p>你說你捨不得吃掉這一種感覺</p><p>雨下整夜 我的愛溢出就像雨水</p><p>院子落葉 跟我的思念厚厚一疊</p><p>幾句是非 也無法將我的熱情冷卻</p><!-- 水平线标签 --><hr /><!-- 换行标签 -->窗外的麻雀 在電線桿上多嘴<br />你說這一句 很有夏天的感覺<br />手中的鉛筆 在紙上來來回回<br />我用幾行字形容你是我的誰<br />幾句是非 也無法將我的熱情冷卻<br /><!-- 粗体，斜体 --><h1>字体样式标签</h1>粗体: <strong>i love you</strong>斜体: <em>i love you</em><br /><!-- 特殊符号 --><!-- 空格 -->空 格 <br /><!-- 大于 -->> <br /><!-- 小于 -->< <br /><!-- 版权符号 -->© <br /><!-- 注册符号 -->® <br /></body></html>图像标签
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body>
<!-- img学习
src:图片地址（必填）相对地址（推荐使用），绝对地址../ 上一级目录
alt: 图片名字（必填）
title: 悬停文字
--><img src="../resource/image/2.jpg" alt="张润" title="张润">
</body>
</html>链接标签
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body>
<!-- a标签
href: 必填，表示要跳转到哪个页面
target： 表示窗口在哪里打开_blank 在新标签打开_self 在自己网页打开
-->
<a href="1.我的第一个网页.html" target="_blank" title="悬停文字" width="100px" height="100px">点击我跳转到页面一</a>
<a href="https://www.baidu.com" target="_self"> 点击我跳转到百度</a>
<br><a href="1.我的第一个网页.html"><img src="../resource/image/2.jpg" alt="张润" width="100" height="100">
</a>
<br><!-- 锚链接
1.需要一个锚标记
2.跳转到标记
#
--><a href="#top">回到顶部</a>
<a name="down">回到底部</a>
<br><!-- 功能性链接 --><a href="mailto:123456789@qq.com">联系我</a>
</body>
</html>行内元素和块元素
- 块元素
- 无论内容多少，该元素独占一行
- (p、h1-h6...)
- 行内元素
- 内容撑开宽度，左右都是行内元素的可以在排在一行
- a . strong .em ...)
列表标签
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- 有序列表应用范围:试卷，问答... --><ol><li>苹果</li><li>香蕉</li><li>橙子</li></ol><hr><!-- 无序列表应用范围:导航，菜单，列表... --><ul><li>苹果</li><li>香蕉</li><li>橙子</li></ul><hr><!-- 自定义列表dl:定义列表dt:定义列表的标题dd:定义列表的内容应用范围:定义列表，术语列表... --><dl><dt>水果</dt><dd>苹果</dd><dd>菠萝</dd><dd>橙子</dd><dt>蔬菜</dt><dd>西红柿</dd><dd>黄瓜</dd><dd>茄子</dd></dl>
</body>
</html>表格标签
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- 表格标签table:定义表格tr:定义表格的行td:定义表格的单元格th:定义表格的表头--><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>页面结构分析
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><header><h2>网页头部</h2></header><section><h2>网页主体</h2></section><footer><h2>网页脚部</h2></footer>
</body>
</html>媒体元素
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- 音频和视频src: 资源路径controls:控制条autoplay:自动播放--><video src="视频地址" controls autoplay></video><audio src="音频地址" controls autoplay></audio>
</body>
</html>iframe内联框架
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- iframe内联框架src：地址w-h：宽度高度 --><iframe src="https://www.baidu.com" frameborder="0" width="1000px" height="800px"></iframe>
</body>
</html>初始表单get和post提交
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><h2>注册页面</h2><!-- form表单action:表单提交的位置，可以是网站，也可以是一个请求处理地址method：post，get提交方式get：我们可以在url中看见我们提交的信息，不安全，高效post：比较安全，传输大文件--><form action="1.我的第一个网页.html" method="post"><!-- 文本输入框：input type="text" --><p>名字：<input type="text" name="username" placeholder="请输入名字"></p><!-- 密码输入框：input type="password" --><p>密码：<input type="password" name="password" placeholder="请输入密码"></p><p><input type="submit"><input type="reset"></p></form>
</body>
</html>文本框和单选框
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><h2>注册页面</h2><!-- form表单action:表单提交的位置，可以是网站，也可以是一个请求处理地址method：post，get提交方式get：我们可以在url中看见我们提交的信息，不安全，高效post：比较安全，传输大文件--><form action="1.我的第一个网页.html" method="post"><!-- 文本输入框：input type="text" --><p>名字：<input type="text" name="username" placeholder="请输入名字"></p><!-- 密码输入框：input type="password" --><p>密码：<input type="password" name="password" placeholder="请输入密码"></p><!-- 单选框标签input type="radio">男name：单选框的名称，同一组单选框的name值必须相同value：单选框的值checked：默认选中--><p><input type="radio" name="sex" value="男" checked>男<input type="radio" name="sex" value="女">女</p><p><input type="submit"><input type="reset"></p></form>
</body>
</html>按钮和多选框
<!-- 多选框input type="checkbox"--><p> 爱好：<input type="checkbox" value="sleep" name="hobby">睡觉<input type="checkbox" value="eat" name="hobby">吃饭<input type="checkbox" value="play" name="hobby">打游戏</p><!-- 按钮input="button" 普通按钮input="image" 图片按钮input="submit" 提交按钮input="reset" 重置按钮--><p><input type="button" name="btn1" value="点击变长"><input type="image" src="../resource/image/2.jpg"></p>列表框文本域和文件域
<!-- 下拉框，列表框--><p>国家<select name="列表名称"><option value="china">中国</option><option value="us">美国</option><option value="eth">瑞士</option><option value="yingdu">印度</option></select></p><!-- 文本域cols="50" rows="10" --><p> 反馈：<textarea name="textarea" cols="50" rows="10">文本内容</textarea></p><!-- 文件域input type="file" name="files" --><p><input type="file" name="files"><input type="button" value="上传" name="upload"></p>搜索滑块和简单验证
<!-- 邮箱验证 --><p>邮箱：<input type="email" name="email"></p><!-- url --><p>url<input type="url" name="url"></p><!-- 数字 --><p>商品数量<input type="number" name="num" max="100" min="10" step="1"></p><!-- 滑块 --><p>音量<input type="range" name="voice" max="100" step="2"></p><!-- 搜索框 --><p><input type="search" name="search"></p>表单的应用
- 隐藏域 hidden
- 只读 readonly
- 禁用 disabled
表单初级验证
- placeholder 提示信息
- required 非空判断
- pattern 正则表达式