<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的第一个网页</title>
</head>
<body>
hello,HTML
</body>
</html>
基本标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本标签学习</title>
</head>
<body>
<!--标题标签-->
<h1>我是标题标签</h1>
<h2>我是标题标签</h2>
<h3>我是标题标签</h3>
<h3>我是标题标签</h3>
<hr/>
<!--段落标签-->
用户发送请求到中央控制器
中央控制器收到请求后，调用处理器映射器
处理器映射器找到具体的处理器（根据注解进行查找），返回处理器对象返回给中央控制器
中央控制器调用处理器适配器
处理器适配器经过执行具体的控制器（controller）
controller执行完成后，返回modelandview（模型跟视图）
处理器适配器将controller执行结果返回给中央控制器
中央控制器将modelandview传给视图解析器（viewreslover）
视图解析器解析害后返回具体的view
中央控制器根据view进行渲染
中央控制器响应用户
<hr/>
<p>用户发送请求到中央控制器</p>
<p>中央控制器收到请求后，调用处理器映射器</p>
<p>处理器映射器找到具体的处理器（根据注解进行查找），返回处理器对象返回给中央控制器</p>
<p>中央控制器调用处理器适配器</p>
<p>处理器适配器经过执行具体的控制器（controller）</p>
<p>controller执行完成后，返回modelandview（模型跟视图）</p>
<p>处理器适配器将controller执行结果返回给中央控制器</p>
<p>中央控制器将modelandview传给视图解析器（viewreslover）</p>
<p>视图解析器解析害后返回具体的view</p>
<p>中央控制器根据view进行渲染</p>
<p>中央控制器响应用户</p>
<hr/>
<!--换行标签-->
用户发送请求到中央控制器
中央控制器收到请求后，调用处理器映射器
处理器映射器找到具体的处理器（根据注解进行查找），返回处理器对象返回给中央控制器
中央控制器调用处理器适配器
处理器适配器经过执行具体的控制器（controller）
controller执行完成后，返回modelandview（模型跟视图）
处理器适配器将controller执行结果返回给中央控制器
中央控制器将modelandview传给视图解析器（viewreslover）
视图解析器解析害后返回具体的view
中央控制器根据view进行渲染
中央控制器响应用户
用户发送请求到中央控制器 <br/>
中央控制器收到请求后，调用处理器映射器 <br/>
处理器映射器找到具体的处理器（根据注解进行查找），返回处理器对象返回给中央控制器 <br/>
中央控制器调用处理器适配器 <br/>
处理器适配器经过执行具体的控制器（controller） <br/>
controller执行完成后，返回modelandview（模型跟视图） <br/>
处理器适配器将controller执行结果返回给中央控制器 <br/>
中央控制器将modelandview传给视图解析器（viewreslover） <br/>
视图解析器解析害后返回具体的view <br/>
中央控制器根据view进行渲染 <br/>
中央控制器响应用户 <br/>
<hr/>
<!--水平线标签-->
<hr/>
<!--字体样式标签-->
加粗 <strong>我变粗了</strong>
斜体 <em>我变斜了</em>
<hr/>
<!--注释和特殊符号-->
<!--注释快捷键 Ctrl+/-->
特殊符号:
<!-- 空格-->
©版权符号 <br/>
>大于号<br/>
<小于号<br/>
</body>
</html>
图像标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片标签学习</title>
</head>
<body>
<!--
img学习
src:图片地址
地址分为两种:相对路径（推荐）跟绝对路径
绝对路径是把路径写死 点击图片img的图片右键点击 Copy Path 然后Ctrl+V复制到src后面即可
相对路径 ../返回上一级
alt的意思为 如果src地址中的图片不存在，那么会输出alt中的内容
title为鼠标停留在图片上的时候显示的内容
width,height 宽跟高
-->
<img src="../resources/image/红色少女.jpg" alt="红色少女" title="红色少女" width="300" height="300">
<a href="4.链接标签.html#top">点我跳转</a>
</body>
</html>
链表标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>链接标签学习</title>
</head>
<body>
<a name="top">顶部</a>
<!--
文字超链接
href:要跳转到那个页面的地址
-->
<a href="1.我的第一个网页.html">点我跳转</a>
<a href="https:/www.baidu.com">点我跳转</a>
<!--<br/> -->
<!--图片超链接-->
<p><a href="1.我的第一个网页.html">
<img src="../resources/image/红色少女.jpg" alt="红色少女" title="红色少女" width="300" height="300">
</a></p>
<p><a href="1.我的第一个网页.html">
<img src="../resources/image/红色少女.jpg" alt="红色少女" title="红色少女" width="300" height="300">
</a></p>
<p><a href="1.我的第一个网页.html">
<img src="../resources/image/红色少女.jpg" alt="红色少女" title="红色少女" width="300" height="300">
</a></p>
<p><a href="1.我的第一个网页.html">
<img src="../resources/image/红色少女.jpg" alt="红色少女" title="红色少女" width="300" height="300">
</a></p>
<p><a href="1.我的第一个网页.html">
<img src="../resources/image/红色少女.jpg" alt="红色少女" title="红色少女" width="300" height="300">
</a></p>
<p><a href="1.我的第一个网页.html">
<img src="../resources/image/红色少女.jpg" alt="红色少女" title="红色少女" width="300" height="300">
</a></p>
<!--<a href="" target="_self"></a>
target表示窗口在哪里打开
默认""为_self在本页面打开
_blank在新页面打开
-->
<a href="1.我的第一个网页.html" target="">点我跳转</a>
<a href="1.我的第一个网页.html" target="_blank">点我跳转</a>
<!--锚链接-->
<!--可以回到标记的地方 如：在页面顶部写一个a标签，显示为头部，给它一个name属性为top
那么<a href="#top">回到顶部</a> href="#+(跳转标记地方的name值)top"
不同页面的跳转，，比如我想从3.图像标签.html中跳转到这个页面
写法为:<a href="4.链接标签.html#top">点我跳转</a>
-->
<a href="#top">回到顶部</a>
<!--功能性链接
邮件链接mailto:+邮箱
-->
<a href="mailto:1623909716@qq.com">点击联系我</a>
</body>
</html>
行内元素跟块元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
块元素
无论内容多少，该元素独占一行 如：
<p></p>
<h1></h1>
行内元素
内容撑开宽度，左右都是行内元素可以排在一行 如：
<a href=""></a>
<strong></strong>
<em></em>
</body>
</html>
列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表学习</title>
</head>
<body>
<!--有序列表 ol -->
<ol>
<li>java</li>
<li>Python</li>
<li>运维</li>
<li>前端</li>
<li>C/c++</li>
</ol>
<hr/>
<!--无序列表 ul-->
<ul>
<li>java</li>
<li>Python</li>
<li>运维</li>
<li>前端</li>
<li>C/c++</li>
</ul>
<hr/>
<!--自定义序列表
dl:标签
dt:列表名称
dd:列表内容
-->
<dl>
<dt>学科</dt>
<dd>java</dd>
<dd>Python</dd>
<dd>Linux</dd>
<dd>C</dd>
</dl>
</body>
</html>
表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格学习</title>
</head>
<body>
<!--表格table
行: tr
列: td
-->
<table border="1px">
<tr>
<!--colspan 合并列(跨列)-->
<td colspan="4">1-1</td>
<!--<td>1-2</td>-->
<!--<td>1-3</td>-->
<!--<td>1-4</td>-->
</tr>
<tr>
<!--rowspan 合并行(跨行)-->
<td rowspan="4">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>
<!--<td>3-4</td>-->
</tr>
</table>
<!--
有三个tr为三行
td为列 3行 一列有四个
border=1px给表格加一个边框
-->
<hr/>
<table border="1px">
<tr>
<td colspan="3">学生成绩</td>
</tr>
<tr>
<td rowspan="2">狂神</td>
<td>语文</td>
<td>100</td>
</tr>
<tr>
<!--<td>狂神</td>-->
<td>数学</td>
<td>100</td>
</tr>
<tr>
<td rowspan="2">秦江</td>
<td>语文</td>
<td>100</td>
</tr>
<tr>
<!--<td>秦江</td>-->
<td>数学</td>
<td>100</td>
</tr>
</table>
</body>
</html>
媒体元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>媒体元素学习</title>
</head>
<body>
<!--src为资源地址
video视频
audio音乐
controls设置可见
autoplay设置自动播放
-->
<!--视频-->
<video src="" controls autoplay></video>
<!--音乐-->
<audio src=""></audio>
</body>
</html>
页面结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>页面结构分析</title>
</head>
<body>
<header> <h2>我是头部标签</h2></header>
<footer><h2>我是尾部标签</h2> </footer>
<nav><h2>我是导航类辅助</h2> </nav>
</body>
</html>
内联框架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内联框架学习</title>
</head>
<body>
<!--iframe内联框架
src放跳转的地址
name给一个名字其他的标签可以通过它进行跳转，，比如name="hello"
<!--<a href="1.我的第一个网页.html" target="hello">点我跳转</a>
就可以进行跳转
targer _self在本页面跳转
_blank 在另外一个页面跳转
-->
-->
<iframe src="https:www.baidu.com" frameborder="1px" name="p" width="100px" height="100px"></iframe>
</body>
</html>
表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单学习</title>
</head>
<body>
<!--
form表单
action需要跳转的地方
method:get方法可以在输入栏看到输入的信息，相对于不安全，但是高效
post方法相对于get方法安全，在输入栏看不到输入的信息，可以传输大文件
想看post输入的信息，可以在运行后点击f12查看 network 选headers就可以看到
name为元素的名称
type:类别
submit为提交按钮 为系统提供的一个按钮
reset为重置按钮
value为元素的默认值 size为input的长度 maxlength为最多能输入几个字符
-->
<form action="1.我的第一个网页.html" method="get">
<p>姓名: <input type="text" name="username" value="刘博豪" size="30" maxlength="5"></p>
<p>密码: <input type="password" name="passwrod"></p>
<p>
<!--radio 为单选按钮 如果不加name属性 单选按钮可以选多个
如果加上name属性并且name的值是一样的话
就说明它们是一个组的只能选一个
那么就只能选一个
-->
<input type="radio" value="boy" name="0" checked>男
<input type="radio" value="girl" name="0">女
</p>
<!--单选按钮跟多选按钮默认选中为checked-->
<p>
<!--checkbox 为多选按钮 name的值最好是相同，这样会判定为一个数组 values为真实的值 睡觉相当于一个外衣-->
<input type="checkbox" value="sleep" name="hobby">睡觉
<input type="checkbox" value="code" name="hobby" checked>敲代码
<input type="checkbox" value="chat" name="hobby">聊天
<input type="checkbox" value="game" name="hobby">游戏
<!--button为自定义按钮
image为图片按钮
-->
<!--<input type="button" name="b1" value="点击变长">-->
<!--<input type="image" src="">-->
<p>
国家:
<!--select 下拉框 默认选中为selected-->
<select name="列表名称" id="">
<option value="zhongguo" >中国</option>
<option value="meiguo" >美国</option>
<option value="ruishi" selected>瑞士</option>
<option value="yindu" >印度</option>
</select>
</p>
<!--文本域 textarea cols,row为列跟行-->
<p>反馈:
<textarea name="text1" cols="30" rows="10"></textarea>
</p>
<!--文件域 可以用来上传文件-->
<p>
<input type="file" name="files">
<input type="button" value="上传" name="upload">
</p>
<!--功能验证标签 如果不符合邮箱标准会提示-->
邮箱：<p><input type="email" name="e"></p>
<!--功能验证标签 如果不符合网址标准会提示-->
网址：<p><input type="url" name="u"></p>
<!--功能验证标签 如果不符合数字max min之间的标准会提示 step为一次增加多少-->
商品：<p><input type="number" name="n" max="10" min="0" step="2"></p>
音量：<p><input type="range" max="100" min="0" name="voice"> </p>
<!--输入后 可以点叉号清空-->
搜索：<input type="search" name="s">
<!--hidden 隐藏-->
<p>水果：<input type="hidden" name="shuiguo" ></p>
<!--readonly 只看，不可修改-->
我被禁用了：<input type="text" value="我不能被修改" readonly>
<!--disabled 禁用-->
<p>婚姻情况：
<input type="radio" name="1">已婚
<input type="radio" name="1" disabled>未婚
</p>
<!--placeholder 提示信息-->
<p><input type="text" placeholder="请输入"></p>
<!--required 非空提示-->
<p>请输入，我不能为空<input type="text" required ></p>
<!--pattern正则表达式 网上查找正则表达式-->
<!--<input type="text" pattern="">-->
<!--增强鼠标可用性 -->
<p><label for="dian">你点我试试
</label>
<input type="text" id="dian">
</p>
<p>
<input type="submit">
<input type="reset">
</p>
</p>
</form>
</body>
</html>
