概念
超文本标记语言
目前网络上应用最为广泛的语言，也是构成网页文档的主要语言
网页的架构多数采用B/S架构(Browser/Server，浏览器/服务器模式)
对于JAVA工程师来讲，我们将更加关注HTML中的一些常用标签的使用
三大基石:
统一资源定位符（URL，Uniform Resource Locator） 定位资源
超文本传输协议（HTTP，HyperText Transform Protocol） 传输资源
超文本标记语言（HTML，HyperText Markup Language） 显示资源
URL协议：解决了众多服务器中资源定位问题。从而让浏览器可以访问不同的服务器资源，实现了全球信息的精确定位。
HTTP协议：解决了服务器和浏览器之间数据如何传送、传送格式的问题！实现了分布式的信息共享。
HTML语言：解决了数据在浏览器中如何丰富多彩的展示，及如何合理标示信息的问题。
标签
文件标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
基本标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Heading</title>
</head>
<!--bgcolor是背景颜色，改变整个body的背景颜色-->
<body bgcolor="antiquewhite">
<h1> h1定义最大的标题。h6 定义最小的标题。</h1>
<hr size="1" />hr是水平线，可以用来分割文章中的小章节
<p>文档注释
<!--
作者：xjion
时间：2019-06-20
描述：
-->
p标签是段落的意思
</p>
<!--超链接a标签 href是超链接地址-->
<a href="https://www.baidu.com">a是超链接标签</a>
<!--img 图片导入，src路径，../返回上一级，导入img文件夹的图片-->
<img src="../img/标题小节.jpg" />
<h1 align="center">align是排列方式，center居中</h1>
<p>br是换行标签<br />是一个单标签<br />标签没有任何意义<br />所以没有结束标签</p>
<!--<b> 定义粗体文本。
<big> 定义大号字。
<em> 定义着重文字。
<i> 定义斜体字。
<small> 定义小号字。
<strong> 定义加重语气。
<sub> 定义下标字。
<sup> 定义上标字。
<ins> 定义插入字。
<del> 定义删除字。
<u> 下划线-->
<p><b>由CSDN、<i>《程序员》</b><big>主办的2007</i>年开发者大调查</big><em>2007年底已收到15000多份有效问卷，</em>
<small>已经是中国调查样本最多的开发者调查。在这次调查中</small>，<strong>详细的分析了样本空间的分布状况，</strong>
发现程序员现在<sub>庞大数目的有效问</sub>卷的参与者中有70%也就是接近一万一千名的参与调
查者是IT的全职<sup>人员，14%的参与者是有过开</sup>发工作经验的<ins>学生，从这样的分</ins>布就可以看出
来IT<del>从业人员对专业知识的</del>需求是巨大而迫切的，CSDN作为专业的软件开发技术门户网站，
<u>已经是大家获取这些技术知识的主要手段。</u>
</p>
</body>
</html>
CSS样式
<!DOCTYPE html>
<html>
<head>
<!--
css 层叠样式表
对html进行布局
设置css样式方式：
一：
style标签 表示标签中设置的是css样式
一般来说放在head标签中
二：
link标签 导入外部css样式表
三：
标签内部设置style属性，在style属性中设置样式
样式以 样式名:样式值; 格式出现
样式创建
样式名:样式值;
选择器：
标签选择器： 标签名
类选择器： .类名
id选择器： #id
全部选择器： *
组合选择器： ,分割都拥有设置的样式
子类选择器： 选择器 子选择器
属性选择器： 选择器[属性名=属性值]
常用的样式
width 宽
height 高
display 是指当前标签显示形式
背景
background-color 背景颜色
background-img 背景图片
background-repeat 背景重复
-->
<!--外部导入样式表
当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。
使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。
-->
<link rel="stylesheet" type="text/css" href="mystyle.css">
<meta charset="UTF-8">
<!--内部样式表
当单个文件需要特别样式时，就可以使用内部样式表。
你可以在 head 部分通过 <style> 标签定义内部样式表。
-->
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
<title></title>
</head>
<body>
<!--内联样式
当特殊的样式需要应用到个别元素时，
就可以使用内联样式。 使用内联样式的方法是
在相关的标签中使用样式属性。样式属性可以
包含任何 CSS 属性。以下实例显示出如何改变
段落的颜色和左外边距。
-->
<p style="color: beige; margin-left: 20px">
This is a paragraph
</p>
<!--
标签 描述
<style> 定义样式定义。
<link> 定义资源引用。
<div> 定义文档中的节或区域（块级）。
<span> 定义文档中的行内的小块或区域。
<font> 规定文本的字体、字体尺寸、字体颜色。不赞成使用。请使用样式。
<basefont> 定义基准字体。不赞成使用。请使用样式。
<center> 对文本进行水平居中。不赞成使用。请使用样式。
-->
<a href="https://www.qq.com" target="_blank">新窗口</a>
<a href="https://www.qq.com" target="_parent">上一级</a>
<a href="https://www.qq.com" target="_search">搜索处</a>
<a href="https://www.qq.com" target="_self">本窗口</a>
<a href="https://www.qq.com" target="_top">顶级</a>
<a name="label">锚点（显示在页面上的文本）</a>
</body>
</html>
表格
个人简历表
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html" charset="UTF-8">
<title>个人简历</title>
<!--设置一个style层叠样式表-->
<style>
/*表格的th表头，tr行，td列都设置成border边框1px，solid实线，black黑色的
text-align：center文本居中*/
table,th,tr,td{
border: 1px solid black;text-align: center;font-size: 14px;
}
</style>
</head>
<body>
<!--快速创建表格
table>tr*n>td*n 按下tab键快速创建表格（本人使用的工具是这样的）
-->
<!--表格属性居中，cellpadding内容与边距离8,width占宽页面50%
cellspacing 页面的每个格子间距1
-->
<table align="center" cellpadding="8" cellspacing="1" width="50%">
<tr>
<!--colspan合并列-->
<th colspan="8">个人简历</th>
</tr>
<tr>
<!--第一格是姓名，第二格合并5列，第三格合并5行-->
<td width="13%">姓 名</td>
<td colspan="5" width="62%"> </td>
<td rowspan="5" width="25%">照<br />片</td>
</tr>
<tr>
<!--第一格联系电话，第二格合并5列，第三格因为合并了就删除-->
<td width="13%">联系电话</td>
<td colspan="5" width="62%"> </td>
</tr>
<tr>
<td width="13%">出生年月</td>
<td width="13%"> </td>
<td width="13%">性 别</td>
<td width="13%"> </td>
<td width="13%">民 族</td>
<td width="13%"> </td>
</tr>
<tr>
<td width="12%">学 院</td>
<td width="13%"> </td>
<td width="12%">籍 贯</td>
<td width="13%"> </td>
<td width="12%">身 高</td>
<td width="13%"> </td>
</tr>
<tr>
<td width="13%">学 历</td>
<td width="13%"> </td>
<td width="13%">政治面貌</td>
<td width="37%" colspan="3"> </td>
</tr>
<tr>
<td width="13%">就业意向</td>
<td width="87%" colspan="7"> </td>
</tr>
<tr>
<td width="13%">兴趣爱好</td>
<td width="87%" colspan="7"> </td>
</tr>
<tr>
<td width="13%">个人说明</td>
<td width="87%" colspan="7"> </td>
</tr>
<tr>
<td width="13%">家庭地址</td>
<td width="87%" colspan="7"> </td>
</tr>
<tr>
<td width="13%">住宿地址</td>
<td width="87%" colspan="7"> </td>
</tr>
<tr>
<td width="13%">任职情况</td>
<td width="87%" colspan="7"> </td>
</tr>
<tr>
<td rowspan="4" width="13%">本<br />人<br />简<br />历</td>
<td colspan="2" width="25%">时 间</td>
<td colspan="3" width="37%">学 校</td>
<td colspan="2" width="25%">任 职</td>
</tr>
<tr>
<td colspan="2" width="25%"> </td>
<td colspan="3" width="37%"> </td>
<td colspan="2" width="25%"> </td>
</tr>
<tr>
<td colspan="2" width="25%"> </td>
<td colspan="3" width="37%"> </td>
<td colspan="2" width="25%"> </td>
</tr>
<tr>
<td colspan="2" width="25%"> </td>
<td colspan="3" width="37%"> </td>
<td colspan="2" width="25%"> </td>
</tr>
<tr>
<td rowspan="6" width="13%">奖<br />惩<br />情<br />况</td>
<td colspan="7" width="87%"> </td>
</tr>
<tr><td colspan="7" width="87%"> </td></tr>
<tr><td colspan="7" width="87%"> </td></tr>
<tr><td colspan="7" width="87%"> </td></tr>
<tr><td colspan="7" width="87%"> </td></tr>
<tr><td colspan="7" width="87%"> </td></tr>
</table>
</body>
</html>
无序列表和有序列表
ul和ol，均使用li给予他元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--快捷创建，与表格相同ul>li*5
ul无序的
ol有序的
-->
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
</ul>
<ol>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
</ol>
</body>
</html>
表单
仿写12306
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>中国铁路12306</title>
<style type="text/css">
#d0{
border: 1px solid #1678be;
width: 978px;
height: 642px;
margin: auto;
border-radius: 10px 10px 10px 10px;
}
#d_top{
background-color: royalblue;
color: #e5f8ff;
border-radius: 8px 8px 0px 0px;
height: 32px;
display: flex;
/*justify-content: center;*/
align-items: center;
padding-left: 20px;
font-family: "黑体";
}
div{
width: 100%;
font-family: "黑体";
margin-top: 10px;
}
#d1 {
width: 100%;
font-family: "黑体";
margin-top: 10px;
}
span{
color: red;
}
label{
display: inline-block;
width: 40%;
text-align: right;
}
#d2{
margin-top:50px;
font-family: "黑体";
}
#d3{
margin-top: 28px;
}
#d4{
height: 40px;
width: 160px;
font-family: Tahoma, "黑体";
background-color: #FF8000;
color: #e5f8ff;
border-radius: 10px 10px 10px 10px;
}
#d5{
color: #FF7F00;
font-family: Tahoma, "黑体";
font-size:13px ;
margin-left: 10px;
}
#d6{
color: #1678be;
font-family: Tahoma, "黑体";
font-size:13px ;
}
#d7{
color: black;
font-family: Tahoma, "黑体";
font-size:13px ;
}
#d8{
width: 184px;
height: 20px;
margin-left: -8px;
}
#d9{
width:20px;
height: 12px;
margin-left: -105px;
}
#d10{
width:20px;
height: 12px;
margin-left: 5px;
}
#d11{
display: inline-block;
width:40px;
height: 8px;
background-color: red;
}
/*position位置：relative相对的
display:inline-block 行内元素，使页面居中
* */
#d12{
position: relative;
left: 1px;
display: inline-block;
width:40px;
height: 8px;
background-color:gray;
}
#d13{
position: relative;
left: 1px;
display: inline-block;
width:40px;
height: 8px;
background-color: gray;
}
#d14{
width:20px;
height: 12px;
margin-top: 8px;
}
input{
width: 180px;
height: 20px;
}
#err{
margin-left: 230px;
font-family: Tahoma, "黑体";
color: red;
}
#err1{
margin-left: 365px;
font-family: Tahoma, "黑体";
color: red;
}
#err2{
margin-left: 130px;
font-family: Tahoma, "黑体";
color: red;
}
</style>
</head>
<body>
<!--method="post"当页面找不到时会提示错误-->
<form action="" method="post">
<div id="d0">
<div1 id="d_top">账户信息</div1>
<div id="d1">
<div id="d2">
<!--placeholder在文本框中显示内容-->
<label for="name" id="username" name="name"><span>*</span> 用 户 名：</label>
<!--input文本框 text是显式的文本，password是暗式文本-->
<input type="text" placeholder="用户名设置成功后不可修改"class="inptxt w200" name=" " id="inp" maxlength="30"
style="color: rgb(51,51,51)";/>
<span id="d5">6-30位字母、数字或“_”,字母开头</span>
</div>
<div>
<label for="userName" id="err" class="error" style="display: none"><span>ⓧ</span> 用户名长度不能少于6个字符！</label>
</div>
<div>
<label for="userName" id="err1" class="error" style="display: none"><span>ⓧ</span> 用户名只能由字母、数字和_组成,须以字母开头！</label>
</div>
<div>
<label for="userName" id="err2" class="error" style="display: none"><span>ⓧ</span> 请输入用户名！</label>
</div>
<div>
<label for="name"><span>*</span> 登录密码：</label><input type="password" placeholder="6-20位字母、数字或符号" class="inptxt w200" name=" " id="" maxlength="30" style="color: rgb(51,51,51)";/>
<span id="d11"></span>
<span id="d12"></span>
<span id="d13"></span>
</div>
<div>
<label for="name"><span>*</span> 确认密码：</label><input type="password" placeholder="再次输入您的登录密码" class="inptxt w200" name=" " id="" maxlength="30" style="color: rgb(51,51,51)";/>
</div>
<div>
<label for="name" ><span>*</span> 证件类型：</label>
<select name="证件类型" id="d8">
<option>中国居民身份证</option>
<option>外国人永久居留身份证</option>
<option>港澳台居民居住证</option>
<option>护照</option>
</select><br>
</div>
<!--radio是单选按钮-->
<label></label><input type="radio" name="1" id="d14"/>中国居民身份证<br>
<label></label><input type="radio" name="1" id="d14"/>外国人永久居留身份证<br>
<label></label><input type="radio" name="1" id="d14"/>港澳台居民居住证<br>
<div>
<label for="name"><span>*</span> 姓  名：</label><input type="txt" placeholder="请输入姓名" class="inptxt w200" name=" " id="" maxlength="30" style="color: rgb(51,51,51)";/><span id="d5">姓名填写规则 （用于身份核验，请正确填写）</span>
</div>
<div>
<label for="name"><span>*</span> 证件号码：</label><input type="txt" placeholder="请输入您的证件号码" class="inptxt w200" name=" " id="" maxlength="30" style="color: rgb(51,51,51)";/><span id="d5">（用于身份核验，请正确填写）</span>
</div>
<div>
<label for="name"><span>*</span> 出生日期：</label><input type="date" />
</div>
<div>
<label for="name"><span>*</span> 性  别：</label><input type="radio" name="1" id="d10"/>男  
<input type="radio"name="1" id="d10" />女
</div>
<div>
<label for="name">邮  箱：</label><input type="text" placeholder="请正确填写邮箱地址" class="inptxt w200" name=" " id="" maxlength="30" style="color: rgb(51,51,51)";/>
</div>
<div>
<label for="name"><span>*</span> 手机号码（+86）：</label><input type="text" placeholder="请输入您的证件号码" class="inptxt w200" name=" " id="" maxlength="30" style="color: rgb(51,51,51)";/><span id="d5">请正确填写手机号码，稍后将向该手机号码发送短信验证码</span>
</div>
<div>
<label for="name"><span>*</span> 旅客类型：</label>
<!--select下拉框，使用option给予元素-->
<select name="旅客类型" id="d8">
<option>成人</option>
<option>儿童</option>
<option>学生</option>
<option>残疾军人、伤残人民警察</option>
</select><br>
</div>
<!--checkbox是复选框-->
<div align="center"><label></label><input type="checkbox" id="d9"><span id="d7">我已阅读并同意遵守</span><span id="d6"> 《中国铁路客户服务中心网站服务条款》 《隐私权政策》</span> </div>
<div id="d3" align="center"><button id="d4">下一步</button></div>
</div>
</div>
</form>
</body>
<script>
$("#inp").focusout(function () {
//6-30位字母、数字或“_”,字母开头
if(/^[A-Za-z][A-Za-z0-9_]{5,29}$/.test($("#inp").val())){//输入正确
$("#err").css("display","none");//隐藏
$("#err1").css("display","none");//隐藏
}else{
if(/^[0-9]{6,30}$/.test($("#inp").val())){
$("#err1").css("display","block");//用户名只能由字母、数字和_组成,须以字母开头！
$("#err").css("display","none");
$("#err2").css("display","none");
}else if(/^[A-Za-z][A-Za-z0-9_]{1,4}$/.test($("#inp").val())){
$("#err").css("display","block");//用户名长度不能少于6个字符！
$("#err1").css("display","none");
$("#err2").css("display","none");
}else if(/^[0-9]{1,6}$/.test($("#inp").val())){
$("#err").css("display","block");//用户名长度不能少于6个字符！
$("#err1").css("display","none");
$("#err2").css("display","none");
}else if(/^$/.test($("#inp").val())){
$("#err2").css("display","block");//请输入用户名！
$("#err").css("display","none");
$("#err1").css("display","none");
}
}
});
</script>
</html>样例表单
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html" charset="UTF-8">
<title></title>
<!--设置style样式表，text/css是系统默认的文本样式-->
<style type="text/css">
/*设置table表格的属性*/
table{
/*占宽100%，文本内容居中*/
width: 100%;
text-align: center;
}
/*设置表格，行，列的共有属性*/
table,tr,td{
/*边框1像素，黑色，实线*/
border: 1px black solid;
}
</style>
</head>
<body>
<table>
<tr>
<!--th是表头，标题-->
<th>可加入预算维度的预算科目</th>
<th></th>
<th>已加入预算维度的预算科目</th>
</tr>
<tr>
<!--valign垂直对齐方式，使表格置顶-->
<td valign="top">
<table>
<tr>
<!--input是表单form属性，checkbox是复选框-->
<td><input type="checkbox"/></td>
<td>预算科目名称(科目编码)</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>样例1</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>样例2</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>样例3</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>样例4</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>样例5</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>样例6</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>样例7</td>
</tr>
</table>
</td>
<td>
<!--button按钮 value是按钮的值-->
<input type="button" value="添加" /><br /><br /><br />
<input type="button" value="移除" />
</td>
<td valign="top">
<table>
<tr>
<td><input type="checkbox"/></td>
<td>预算科目名称</td>
<td>预算科目编码</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>样例0</td>
<td>样例0的编码</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
| accept-charset | 规定在被提交表单中使用的字符集（默认：页面字符集）。 |
| action | 规定向何处提交表单的地址（URL）（提交页面）。 |
| autocomplete | 规定浏览器应该自动完成表单（默认：开启）。 |
| enctype | 规定被提交数据的编码（默认：url-encoded）。 |
| method | 规定在提交表单时所用的 HTTP 方法（默认：GET）。 |
| name | 规定识别表单的名称（对于 DOM 使用：document.forms.name）。 |
| novalidate | 规定浏览器不验证表单。 |
| target | 规定 action 属性中地址的目标（默认：_self）。 |
| disabled | 规定输入字段应该被禁用。 |
| max | 规定输入字段的最大值。 |
| maxlength | 规定输入字段的最大字符数。 |
| min | 规定输入字段的最小值。 |
| pattern | 规定通过其检查输入值的正则表达式。 |
| readonly | 规定输入字段为只读（无法修改）。 |
| required | 规定输入字段是必需的（必需填写）。 |
| size | 规定输入字段的宽度（以字符计）。 |
| step | 规定输入字段的合法数字间隔。 |
| value | 规定输入字段的默认值。 |
HTML的基础知识简略的，常用的就这么多，有不妥的望指出^-_-^!
367
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
