总览
什么是HTML
- HTML(HyperText Markup Language) 不是一门编程语言，而是一种用来告知浏览器如何组织页面的标记语言。
- 段落标签：Paragraph p
- 块级元素在页面中以块的形式展现 —— 相对于其前面的内容它会出现在新的一行，其后的内容也会被挤到下一行展现。块级元素通常用于展示页面上结构化的内容，例如段落、列表、导航菜单、页脚等等。一个以block形式展现的块级元素不会被嵌套进内联元素中，但可以嵌套在其它块级元素中。
- 内联元素通常出现在块级元素中并环绕文档内容的一小部分，而不是一整个段落或者一组内容。内联元素不会导致文本换行：它通常出现在一堆文字之间例如超链接元素或者强调元素和 。
1. <!DOCTYPE html>: 声明文档类型.很久以前，早期的HTML(大约1991年2月)，文档类型声明类似于链接，规定了HTML页面必须遵从的良好规则，能自动检测错误和其他有用的东西。使用如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
然而现在没有人再这样写，需要包含这些东西才能正常工作已成为历史。你只需要知道<!DOCTYPE html>是最短的有效的文档声明。
2.<html></html>: <html>元素。这个元素包裹了整个完整的页面，是一个根元素。
3.<head></head>: <head>元素.这个元素是一个容器，它包含了所有你想包含在HTML页面中但不想在HTML页面中显示的内容。这些内容包括你想在搜索结果中出现的关键字和页面描述，CSS样式，字符集声明等等。以后的章节能学到更多关于<head>元素的内容。
4.<meta charset="utf-8">: 这个元素设置文档使用utf-8字符集编码，utf-8字符集包含了人类大部分的文字。基本上他能识别你放上去的所有文本内容。毫无疑问要使用它，并且它能在以后避免很多其他问题。
5.<title></title>: 设置页面标题，出现在浏览器标签上，当你标记/收藏页面时它可用来描述页面。
6.<body></body>: <body>元素。包含了你访问页面时所有显示在页面上的内容，文本，图片，音频，游戏等等。
连接标签
<!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>
<!-- target=_blank:新开一个页面
targrt=_self:在自身页面
-->
<!-- 外部连接 -->
<h2>外部连接</h2>
<h3><a href="http://wwww.baidu.com"target="_blank">百度</a></h3>
<h3><a href="https://ai.taobao.com/" target="_self">淘宝</a></h3>
<!-- 内部连接 ：网站内部之间相互连接-->
<h2>内部连接</h2>
<h3><a href="test.html"target="_blank">内部连接</a></h3>
<!-- 空连接：# -->
<!-- 发生页面跳转，页面刷新 -->
<h2>空连接</h2>
<h3><a href="#">空连接</a></h3>
<!-- 下载连接：地址连接的是.exe或者.zip等压缩包形式 -->
<h2>下载连接</h2>
<h3><a href="images.zip"target="_blank" >下载文件</a></h3>
<!-- 网页元素连接 -->
<h2>网页元素连接</h2>
<a href="http://baidu.com"target="_blank"><img src="img/pic1.png" alt="图片显示异常" title="这是一张图片" width="300px"height="300px"></a>
</body>
</html>
表格
1.<thead>需要嵌套在 table 元素中，放置在头部的位置，因为它通常代表第一行，第一行中往往都是每列的标题，但是不是每种情况都是这样的。如果你使用了<col>/<colgroup>元素，那么<thead>元素就需要放在它们的下面。
2.<tfoot>需要嵌套在 table 元素中，放置在底部 (页脚)的位置，一般是最后一行，往往是对前面所有行的总结，比如，你可以按照预想的方式将<tfoot>放在表格的底部，或者就放在<thead>的下面。(浏览器仍将它呈现在表格的底部)
3.<tbody>需要嵌套在 table 元素中，放置在<thead>的下面或者是<tfoot>的下面，这取决于你如何设计你的结构。(<tfoot>放在<thead>下面也可以生效.)
- 快速生成一个6行6列的表格
- *table>tr*6>td{$1}6
<!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*6>td*6 -->
<!-- table>tr*6>td{$1}*6 -->
<table>
<tr>
<td>11</td>
<td>21</td>
<td>31</td>
<td>41</td>
<td>51</td>
<td>61</td>
</tr>
<tr>
<td>11</td>
<td>21</td>
<td>31</td>
<td>41</td>
<td>51</td>
<td>61</td>
</tr>
<tr>
<td>11</td>
<td>21</td>
<td>31</td>
<td>41</td>
<td>51</td>
<td>61</td>
</tr>
<tr>
<td>11</td>
<td>21</td>
<td>31</td>
<td>41</td>
<td>51</td>
<td>61</td>
</tr>
<tr>
<td>11</td>
<td>21</td>
<td>31</td>
<td>41</td>
<td>51</td>
<td>61</td>
</tr>
<tr>
<td>11</td>
<td>21</td>
<td>31</td>
<td>41</td>
<td>51</td>
<td>61</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>个人简历</title>
<style>
td{
text-align: center;
}
</style>
</head>
<body >
<table align="center" border="1" cellspacing="0" width="1000" height="1015" >
<tbody >
<tr>
<td colspan="6" align="center"><h3>个人简历</h3></td>
</tr>
<tr>
<td width="70" >姓名</td>
<td width="180">嘉文四世</td>
<td width="70" >专业</td>
<td width="350">积极地阿基新</td>
<td colspan="2" rowspan="3"></td>
</tr>
<tr>
<td>性别</td>
<td>男</td>
<td>毕业学校</td>
<td>瓦罗兰大陆皇家学院</td>
</tr>
<tr>
<td>民族</td>
<td>皇子</td>
<td>住址</td>
<td>德玛西亚</td>
</tr>
<tr>
<td>学历</td>
<td>中学</td>
<td>邮箱</td>
<td>hz@123.com</td>
<td>联系方式</td>
<td>151516156</td>
</tr>
<tr>
<td>出生日期</td>
<td>2020年1月1日</td>
<td>电话</td>
<td>51515</td>
<td>邮编</td>
<td>11151</td>
</tr>
<tr>
<td colspan="2">实习经历</td>
<td colspan="4"></td>
</tr>
</tbody>
</table>
</body>
</html>
效果：
表单
- 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 align="center" border="1" width="600">
<caption><h4>青春不常在，抓紧谈恋爱</h4></caption>
<tr>
<td>
姓名
</td>
<td>
<input type="text" placeholder="请输入你的姓名"autofocus >
</td>
</tr>
<tr>
<td>
性别
</td>
<td>
<input type="radio" name="sex" checked="checked">
男 <img src="images/man.jpg" alt="男"title="男">
<input type="radio" name="sex">
女 <img src="images/women.jpg" alt="女"title="女">
</td>
</tr>
<tr>
<td>生日
</td>
<td>
<input type="datetime-local">
</td>
</tr>
<tr>
<td>
所在地区
</td>
<td>
<input type="text"placeholder="请输入详细地址">
</td>
</tr>
<tr>
<td>
婚姻状况
</td>
<td>
<input type="radio"name="hy" checked="checked">
未婚
<input type="radio" name="hy">
已婚
<input type="radio"name="hy">
离婚
</td>
</tr>
<tr>
<td>
手机号码
</td>
<td>
<input type="tel"placeholder="请输入你的手机号码"autofocus required pattern="^(\+86)?1\d{10}$" >
</td>
</tr>
<tr>
<td>
学历
</td>
<td>
<input type="text" autofocus autocomplete="on" list="xz">
<datalist id="xz">
<option value="幼儿园"></option>
<option value="小学"></option>
<option value="初中"></option>
<option value="高中"></option>
<option value="大学"></option>
</datalist>
</td>
</tr>
<tr>
<td>
月薪
</td>
<td>
<input type="number" autofocus placeholder="请输入你的月薪">元
</td>
</tr>
<tr>
<td>
喜欢的类型
</td>
<td>
<input type="checkbox" name="love"/>妩媚的
<input type="checkbox" name="love"/>可爱的
<input type="checkbox" name="love"/>小鲜肉
<input type="checkbox" name="love"/>老腊肉
<input type="checkbox" name="love"/>都喜欢
</td>
</tr>
<tr>
<td>
自我介绍
</td>
<td>
<textarea placeholder="请简单描述一下自己" autofocus></textarea>
</td>
</tr>
<tr>
<td>
</td>
<td>
<img src="images/btn.png" alt="">
</td>
</tr>
<tr>
<td>
</td>
<td>
<input type="checkbox" name="zc">我同意注册条款和会员加入标准
</td>
</tr>
<tr>
<td></td>
<td>
<a href="#"><ins>我是会员，立即登入</ins></a>
<a href="#"><ins>前往修改页面</ins></a>
</td>
</tr>
<tr>
<td>
</td>
<td>
<h3>我承诺</h3>
<ul>
<li>年满18岁</li>
<li>抱着严肃的态度</li>
<li>真诚寻找另一半</li>
</ul>
</td>
</tr>
</table>
</body>
</html>
运行效果：
- Method 属性
何时使用 GET？
您能够使用 GET（默认方法）：
如果表单提交是被动的（比如搜索引擎查询），并且没有敏感信息。
当您使用 GET 时，表单数据在页面地址栏中是可见的：
action_page.php?firstname=Mickey&lastname=Mouse
注释：GET 最适合少量数据的提交。浏览器会设定容量限制。
何时使用 POST？
您应该使用 POST：
如果表单正在更新数据，或者包含敏感信息（例如密码）。
POST 的安全性更加，因为在页面地址栏中被提交的数据是不可见的。
扫一扫
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
