一、Html基本架构
- 标签可以相互嵌套，但不能交叉嵌套，例如：< html > < body > < /html > < /body>
- 虽然html的语法书写可以很随意，但是建议按照格式对齐书写，这样更容易阅读
<!DOCTYPE html> <!--声明为html5的语法-->
<html>
<head>
<title> 标题名 </title>
<meta http-equiv="Content-type" content="text/html;charset=utf-8"/><!--设置浏览器显示的格式-->
</head>
<body>
标签书写位置
</body>
</html>
二、Html的常见标签
- 换行 ========> < br/>
- 显示横线 ========> < hr/>
- 显示标题 ========> < hx > < /hx > ========>这里的x可以是1到6的数字，数字越大，字越小
- 加粗 ========> < b > < /b >或者< strong > < /strong >
- 倾斜 ========> < i > < /i >或者< em > < /em >
- 上标 ========> < sup > < /sup >
- 下标 ========> < sub > < /sub >
示例
<!DOCTYPE html> <!--声明为html5的语法-->
<html>
<head>
<title> 我的网站 </title>
<meta http-equiv="Content-type" content="text/html;charset=utf-8"/><!--设置浏览器显示的格式-->
</head>
<body>
<hr/>
<h1>心得之体验版</h1>
这是我写的第一篇关于<b>html</b>的笔记，<i>相信在未来的不久</i>，我会写的更多<sub>【1】</sub>，写的更好，<br/>只为了给自己在需要的时候能够回过头来看，节约时间<sup>save my time</sup>
<hr/>
</body>
</html>
结果
- 段落显示 ========> < p align=“left/right/center/justify”> < /p >
- 预处理 ========> < pre > < /pre> ========> 显示的内容与标签内的一样
- 字体 ========> < font color=“red” size=“1” face=“幼圆”> < /font> ========> size可以为1到7的数字，数字越大字越大
- 图片 ========> < img src=“图片路径” align=“top/middle/bottom” width=“200px” height=“200px” alt=“这是一张图片”/> ========> 像素可以为百分比，相对于浏览器界面的大小
示例
<!DOCTYPE html> <!--声明为html5的语法-->
<html>
<head>
<title> 标题名--段落 </title>
<meta http-equiv="Content-type" content="text/html;charset=utf-8"/><!--设置浏览器显示的格式-->
</head>
<body>
<p align="rigth">第一段</p>
<p align="justify">第二段，或者本该是上天注定他的人生，但是遇到很多困难的他，决定不再顺应天意，他相信，只要通过自己的努力，肯定能够撼动上苍的旨意，走自己决定的路线，因为他觉得既然总会受到很多的历练，那为什么不走一条自己选择的路，最起码，最后，自己不会觉得遗憾而后悔</p>
<p>第三段，结束</p>
<pre>
<font color="red" size="2" face="幼圆">我是一个孩子</font>
<font color="green" size="5" face="宋体">一个长大的孩子</font>
拥有成年人的思维
享受着孩子般的简单
情绪从来只为得失而动
</pre>
<img src="./err.png" align="top" width="200px" height="200px" alt="这是一张图片"/>
</body>
</html>
结果
- 无序列表 < ul type=“circle/disc/square”> < li>< /li>< /ul>
- 有序列表 < ol start=“1/20” type=“a/A/I/i”> < li>< /li>< /ol>
- 自定义列表 < dl>< dt>< dt>< dd>< /dd>< /dl>
示例
<!DOCTYPE html> <!--声明为html5的语法-->
<html>
<head>
<title> 标题名---列表 </title>
<meta http-equiv="Content-type" content="text/html;charset=utf-8"/><!--设置浏览器显示的格式-->
</head>
<body>
<ul type="circle">
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ul>
<ol start="1" type="A">
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ol>
<dl>
<dt>标题</dt>
<dd>列表1</dd>
<dd>列表2</dd>
<dd>列表3</dd>
</dl>
</body>
</html>
结果
- 超链接
< a href=“网址” target="_blank" title=“超链接标题名(鼠标放在上面时提示的信息)” name=“锚点名称”>超链接名:_blank(以新的网页打开)可以为_self(以自身的网页打开),name通常为锚点使用
空链接
< a href="#(锚点名)">空链接名:跳转到指定的锚点位置
跨界面锚点跳跃
< a href=“网址#(锚点名)”>空链接名:跳转到指定的锚点位置
超链接下载
< a href=“下载文件路径名”>空链接名:下载指定文件
- 表格< table border=“1px” width=“80%” height=“500px” align=“center/left/right” bgcolor=“red/#f0f0f0” cellspacing=“0px” cellpadding=“10px” >< caption>表头< /caption>< tr>< td>< /td>< /tr><>< /table> ========> cellpadding是文字间距，cellspacing是表格间距
示例：
<!DOCTYPE html> <!--声明为html5的语法-->
<html>
<head>
<title> 标题名 </title>
<meta http-equiv="Content-type" content="text/html;charset=utf-8"/><!--设置浏览器显示的格式-->
</head>
<body>
<table border="1px" width="80%" height="100px" align="center" bgcolor="red" cellspacing="0px" cellpadding="10px" >
<tr>
<td>1</td><td>2</td><td>3</td><td>4</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td><td>4</td>
</tr>
</table>
<table border="1px" width="80%" height="100px" align="center" bgcolor="red" cellspacing="0px" cellpadding="10px" >
<caption>表头</caption>
<tr>
<td rowspan="2">1</td><td>2</td><td colspan="2">3</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
</table>
</body>
</html>
结果
- 表单
< form action=“提交数据的路径” method=“get(默认)/post” name=“name” enctype>< /form>
< input type=“text/password” name=“name/password” value=“value” maxlength=“length” placeholder=“提示信息”/>
< input type=“radio” name=“name” value=“value” checked(=true/false) />
< input type=“checkbox” name=“name” value=“value” checked(=true/false)/>
< input type=“submit” name=“name” value=“value”>
< input type=“reset” name=“name” value=“value”>
< input type=“button” name=“name” value=“value”>
< input type=“image” name=“name” value=“value” src=“图片位置”>
< input type=“hidden” name=“name” value=“value”>
< input type=“file” name=“name” value=“value”>- 下拉列表
< select name=“name” size=“3” multiple>
< option value=“1”>选项1< /option>
< option value=“2”>选项2< /option>
< option value=“3” selected>选项3< /option>
< option value=“4”>选项4< /option>
< option value=“5”>选项5< /option>
< /select>- 文本域
< textarea rows=“10” cols=“100” placeholder=“提示信息” name=“name”> < /textarea>- 框架切分网页
< html>
< frameset rows=“25%,50%,*”>
< frame src=“源地址1” name=“name1”/>
< frame src=“源地址2” name=“name2”/>
< frame src=“源地址3” name=“name3”/>
< /frameset>
< /html>< html>
< frameset rows=“25%,">
< frame src=“源地址1” name=“name1”/>
< frameset cols="25%,”>
< frame src=“源地址2” name=“name2”/>
< frame src=“源地址3” name=“name3”/>
< /frameset>
< /frameset>
< /html>
示例：
<!DOCTYPE html>
<html>
<head>
<title> 我的网址 </title>
<meta http-equiv="Content-type" content="text/html;charset=utf-8"/>
</head>
<body>
<table width="80%" align="center" cellspacing="0px" bgcolor="white">
<tr height="5px" bgcolor="#A9A4A4">
<td><font color="white" face="Times New Roman">welcome to http://233.223.40.20:23/</font></td>
<td colspan="6"></td>
<td align="right"><font color="white" face="Times New Roman">Wed,2021 Dec 22</font></td>
</tr>
<tr align="center" height="50px">
<td colspan="8"><img src="C:\Users\hp\Desktop\logo.jpg"></td>
</tr>
<tr height="5px" bgcolor="#A9A4A4">
<td colspan="7"></td>
<td height="5px" align="right">
工号:<input type="text"/>
密码:<input type="password"/>
<input type="button" value="登录"/>
<img src="C:\Users\hp\Desktop\home-icon.gif" align="bottom">
<a href="#" >回首页</a>
</td>
</tr>
<tr align="center" height="80px" >
<td colspan="8" valign="middle" ><b>* * * * * * 差勤系统 * * * * * *</b></td>
</tr>
<table border="1" align="center" width="80%" cellspacing="0px">
<tr align="center">
<td colspan="8" height="30" bgcolor="#FFAD00">个人差勤记录</td>
</tr>
<tr align="center">
<td colspan="8">姓名: | 工号: </td>
</tr>
<tr align="center">
<td >编号</td>
<td>申请日期</td>
<td>项目</td>
<td>开始时间</td>
<td >结束时间</td>
<td>时数</td>
<td>签核状况</td>
<td>下一签核人</td>
</tr>
</table>
<hr width="80%"/>
<table border="1" align="center" width="80%" cellspacing="0px">
<tr align="center">
<td colspan="6" height="30" bgcolor="#FFAD00">个人时数统计</td>
</tr>
<tr align="center">
<td colspan="6">姓名: | 工号: </td>
</tr>
<tr align="center">
<td width="15%">项目</td>
<td width="13%">年休假</td>
<td width="13%">事假</td>
<td width="13%">病假</td>
<td width="13%">出差</td>
<td width="13%">其他</td>
</tr>
<tr align="center">
<td><font color="blue">已核准</font></td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
<tr align="center">
<td><font color="red">签核中</font></td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
</table>
<hr width="80%"/>
<table align="center" width="80%" cellspacing="0px">
<tr align="center" height="30px">
<td colspan="8" align="left">
<font color="blue" size="4">主管待签核假单/出差单 | 假单/出差单查询(主管专区) | </font>
</td>
</tr>
</table>
<hr width="80%"/>
<table align="center" width="80%" cellspacing="0px">
<tr align="center" height="30px">
<td colspan="5"> <font color="red"><b>个 人 请 假 / 出 差 单</b></font> </td>
</tr>
<tr align="left" height="30px">
<td width="10%"> </td>
<td width="25%">申请人员：</td>
<td width="10%"></td>
<td width="25%">申请日期：2021-12-22 (Y-M-D)</td>
<td width="10%"></td>
</tr>
<tr align="left" height="30px">
<td width="10%"> </td>
<td width="25%">起始时间：
<select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>月
<select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
<option>21</option>
<option>22</option>
<option>23</option>
<option>24</option>
<option>25</option>
<option>26</option>
<option>27</option>
<option>28</option>
<option>29</option>
<option>30</option>
<option>31</option>
</select>日
<select>
<option>09:00</option>
<option>09:30</option>
<option>10:00</option>
<option>10:30</option>
<option>11:00</option>
<option>11:30</option>
<option>12:00</option>
<option>13:00</option>
<option>13:30</option>
<option>14:00</option>
<option>14:30</option>
<option>15:00</option>
<option>15:30</option>
<option>16:00</option>
<option>16:30</option>
<option>17:00</option>
<option>17:30</option>
<option>18:00</option>
</select>
</td>
<td width="10%"></td>
<td width="25%">结束时间：
<select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>月
<select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
<option>21</option>
<option>22</option>
<option>23</option>
<option>24</option>
<option>25</option>
<option>26</option>
<option>27</option>
<option>28</option>
<option>29</option>
<option>30</option>
<option>31</option>
</select>日
<select>
<option>09:00</option>
<option>09:30</option>
<option>10:00</option>
<option>10:30</option>
<option>11:00</option>
<option>11:30</option>
<option>12:00</option>
<option>13:00</option>
<option>13:30</option>
<option>14:00</option>
<option>14:30</option>
<option>15:00</option>
<option>15:30</option>
<option>16:00</option>
<option>16:30</option>
<option>17:00</option>
<option>17:30</option>
<option>18:00</option>
</select>
</td>
<td width="10%"></td>
</tr>
<tr align="left" height="30px">
<td width="10%"> </td>
<td width="25%">项目：
<select>
<option>出差</option>
<option>年休假</option>
<option>病假</option>
<option>事假</option>
<option>婚嫁</option>
</select>
</td>
<td width="10%"></td>
<td rowspan="2" width="25%">请假/出差说明：
<textarea rows="4" cols="20"></textarea>
</td>
<td width="10%"></td>
</tr>
<tr align="left" height="30px">
<td width="10%"> </td>
<td width="25%">申请人：
<select>
<option>自己</option>
<option>主管</option>
</select>
</td>
<td width="10%"></td>
<td width="10%"></td>
</tr>
<tr align="center" height="50px">
<td width="10%"></td>
<td width="25%"></td>
<td width="10%"></td>
<td width="25%" align="left"><font color="red">注意事项：<br/>
1. 工作时间：周一至周五 <br/>
2. 所有请假/出差最小单位以0.5小时计算。<br/>
3. 出差请详述：出差地点。<br/></font></td>
<td width="10%"></td>
</tr>
<tr align="center" height="30px">
<td colspan="5" width="10%"></td>
</tr>
<tr align="center" height="30px">
<td colspan="5"><input type="button" value="发送"/></td>
</tr>
<tr align="center" height="10px">
<td colspan="5" bgcolor="#A9A4A4"> <font color="white">Copyright by maker.</font> </td>
</tr>
</table>
</table>
</body>
</html>
结果
特殊符号
1917
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
