HTML短期总结(至表单)

关于此次小结，是通过PHPstudy（2018）构建web平台所测试，实验结果可能出现无法显现中文的情况，可能为电脑使用的默认浏览器默认编码不同的问题，代码不适用。

一、 html简介

什么是html?(1) 一种超文本标记语言，就是指页面内可以包含图片，链接，甚至是音乐，程序等非文字元素。(2) HTML不是一种编程语言而是一种标记语言。(3) HTML5是HTML的最新版本。
HTML5的新特性（1）用于绘画的canvas元素。（2）用于媒介回放的video和audio元素。（3）对本地离线存储的更好的支持。（4）新的特殊内容元素，比如：article,footer,header,nav,section.（5）新的表单控件，比如：calender,date,time,email,url,search等。
. 常用的开发工具 Webstorm,notepad,Ecliiple,textsublime,Dreamweaver,. 常用的开发工具 Webstorm,notepad,Ecliiple,textsublime,Dreamweaver.

二文件基本格式

<!DOCTYPE html>   //文档声明，告诉计算机这是一个HTML5文档（不区分大小写）。
<html></html>   双标签,所有的文档内容均包含在这个标签里面
<head></head>  不可见内容，包含文档标题，字符编码等
<body></body>   可见内容，图片，文本表单等所有可见内容。
实例：<!DOCTYPE html><html lang="zh-cn">   表示中文状态的编码  lang="en"   表示英文状态下的字符编码
<head><meta charset="UTF-8"   //国际通用编码格式    </head><body>你好，我是单智涵！</body></html>```

三元素的概念以及3个常用标签

（1）HTML元素指的是从开始标签到结束标签的所有代码。开始标签                     元素内容                    结束标签<h1>                     h标签用来表示标题                 </h1><p>                      p标签标识一个段落                 </P><hr>                   是一个单标签，给文档加一个横线      没有结束标签哦效果：<body><h1>h标签用来表示标题</h1><h2>h标签用来表示标题</h2><h3>h标签用来表示标题</h3><h4>h标签用来表示标题</h4><h5>h标签用来表示标题</h5><h6>h标签用来表示标题</h6></body>

<p>     p标签标识一个段落
</p><p>  p标签标识一个段落
</p>

<!IDOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title></head><body>八阵图作者：杜甫功盖三分国，名成八阵图。江流石不转，遗恨失吞吴。</body></html>

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><h2>八阵图</h2><h3>作者：杜甫</h3> <hr><p>功盖三分国，名成八阵图。</p><p>江流石不转，遗恨失吞吴。</p></body></html>

四元素的属性

了解HTML属性属性的作用就是为元素提供更多的信息，大多数元素都可以拥有属性。属性的语法：<标签属性1=参数1>学习2个属性align属性：指定内容的对齐方式，left 左对齐(默认值),right 右对齐,center 居中对齐。bgcolor属性：添加一个背景颜色。

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"> <title>实例3</title></head><body bgcolor="pink"><h2 align="center">八阵图</h2><h3 align="right">作者：杜甫</h3> <hr><p align="center">功盖三分国，名成八阵图。</p><p align="center">江流石不转，遗恨失吞吴。</p> </body></html>

 <!DOCTYPE html><html><head><title>实例5</title></head><body bgcolor="yellow"><h1 align="center">第一行卖个萌</h1><h1 align="center">第二行表立场</h1><h3 align="right">英俊的单智涵</h3><h3 align="right">这里可以写个日期</h3></body></html>

五文本的格式化

HTML 使用标签 (“bold”) 与 (“italic”) 对输出的文本进行格式, 如：粗体 or 斜体；这些HTML标签被称为
格式化标签
HTML “计算机输出” 标签
HTML 引文, 引用, 及标签定义

<!DOCTYPE html><html><head><meta charset="utf-8"><title>做个测试</title></head><body> <p>My favorite color is <del>blue</del><ins>red</ins>!</p></body></html>``

六、html链接

HTML 使用超级链接与网络上的另一个文档相连。几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。HTML使用标签来设置超文本链接。超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。在标签中使用了href属性来描述链接的地址。

<a href="url">链接文本</a>
举例
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"> <title>to be a test</title></head><body><a href="http://www.bilibili.com/video/av40744746/" target="_blank">访问bilibili视频</a></body></html>

七、html头部

元素包含了所有的头部标签元素。在元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。可以添加在头部区域的元素标签为: ,

<!DOCTYPE html><html>
<head>
<title>菜鸟教程(runoob.com)</title><base href="http://www.runoob.com/images/" target="_blank"></head> <body><img src="logo.png"> - 注意这里我们设置了图片的相对地址。能正常显示是因为我们在 head 部分设置了 base 标签，该标签指定了页面上所有链接的默认 URL，所以该图片的访问地址为 "http://www.runoob.com/images/logo.png"<br><br><a href="http://www.runoob.com">菜鸟教程</a> - 注意这个链接会在新窗口打开，即便它没有 target="_blank" 属性。因为在 base 标签里我们已经设置了 target 属性的值为 "_blank"。 </body></html>

八，CSS

内联样式
当特殊的样式需要应用到个别元素时，就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。
内部样式
表当单个文件需要特别样式时，就可以使用内部样式表。你可以在部分通过

举例
<!DOCTYPE html>
<html><head>
<meta charset="utf-8"><title> to be a test</title><style type="text/css">h1 {color:red;}p {color:blue;}</style></head> <body><h1>这是一个标题</h1><p>这是一个段落。</p></body></html>

九、html图像

在 HTML 中，图像由标签定义。是空标签，意思是说，它只包含属性，并且没有闭合标签。要在页面上显示图像，你需要使用源属性（src）。src 指 “source”。源属性的值是图像的 URL 地址。

//<img src="url" alt="some_text">
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>一个来自文件夹中的图像:</p><img src="/images/chrome.gif" alt="Google Chrome" width="33" height="32"><p>一个来自菜鸟教程的图像:</p>加载页面时，要注意插入页面图像的路径，如果不能正确设置图像的位置，浏览器无法加载图片，图像标签就会显示一个破碎的图片。
<img src="http://www.runoob.com/images/logo.png" alt="runoob.com" width="336" height="69"></body></html>

十、html表格

字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

实例
<table border="1">
<tr> <th>Header 1</th>  表头<th>Header 2</th> </tr> <tr><td>row 1, cell 1</td><td>row 1, cell 2</td></tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr></table>

十一、html列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

 <ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

· Coffee
· Milk
有序列表同样，有序列表也是一列项目，列表项目使用数字进行标记。列表项使用数字来标记。

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

Coffee
Milk
自定义列表不仅仅是一列项目，而是项目及其注释的组合。

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

Coffee

black hot drink
Milk
white cold drink

实例    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
</head>
<body> <h1>   My 列表 </h1> <table border="2" cellpadding="30">  <tr><td><ul>    <li>Food</li>  <ol>    <li>薯片</li>   <li>棒棒糖</li>   <li>果冻</li>   <li>巧克力</li>    <li>辣条</li>   </ol>     <li>Fruits</li> <ol type="A">  <li>西瓜</li>  <li>桔子</li>   <li>哈蜜瓜</li> <li>草莓</li> <li>葡萄</li>  <li>香蕉</li>    <li>苹果</li>  </ol>      <li>Meat</li>   <ol type="I">    <li>羊肉</li>    <li>牛肉</li> <li>猪肉</li> <li>鸡肉</li>   <li>涮羊肉</li><li>生鱼片</li>   </ol> </ul>  </td>    </tr>  </table></body></html>

十二、html区块

大多数 HTML 元素被定义为块级元素或内联元素。块级元素在浏览器显示时，通常会以新行来开始（和结束）。实例:

,

十三、html布局

HTML 布局可使用<div> 元素、表格
div实例<!DOCTYPE html><html><head><meta charset="utf-8"><title>菜鸟教程(runoob.com)</title> </head><body> <div id="container" style="width:500px"><div id="header" style="background-color:#FFA500;"><h1 style="margin-bottom:0;">主要的网页标题</h1></div> <div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;"><b>菜单</b><br>HTML<br>CSS<br>JavaScript</div> <div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">内容在这里</div><div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">版权 © runoob.com</div> </div> </body></html>

   table实例<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title></head><body> <table width="500" border="0"><tr><td colspan="2" style="background-color:#FFA500;"><h1>主要的网页标题</h1></td></tr> <tr><td style="background-color:#FFD700;width:100px;vertical-align:top;"><b>菜单</b><br>HTML<br>CSS<br>JavaScript</td><td style="background-color:#eeeeee;height:200px;width:400px;vertical-align:top;">内容在这里</td></tr> <tr><td colspan="2" style="background-color:#FFA500;text-align:center;">版权 © runoob.com</td></tr></table> </body></html>

十四、html表单

表单是一个包含表单元素的区域。表单元素是允许用户在表单中输入内容,
比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。
表单使用表单标签 <form> 来设置:<input type="reset">定义重置按钮<input type="reset" name="button" id="button" value="重置">点击之后会将重置按钮所在的表单中填写的内容重新设置为默认值。
表单中的单选按钮可以设置以下几个属性：value、name、checkedvalue：提交数据到服务器的值（后台程序PHP使用）name：为控件命名，以备后台程序 ASP、PHP 使用checked：
当设置 checked="checked" 时，该选项被默认选中

  HTML 表单表单是一个包含表单元素的区域。表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。表单使用表单标签 <form> 来设置:<form>
.
input 元素
.
</form>HTML 表单 - 输入元素多数情况下被用到的表单标签是输入标签（<input>）。输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下： 文本域（Text Fields）文本域通过<input type="text"> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form> 浏览器显示如下：窗体顶端First name:
Last name: 窗体底端注意:表单本身并不可见。同时，在大多数浏览器中，文本域的缺省宽度是20个字符。  密码字段密码字段通过标签<input type="password"> 来定义:<form>
Password: <input type="password" name="pwd">
</form> 浏览器显示效果如下:窗体顶端Password: 窗体底端注意:密码字段字符不会明文显示，而是以星号或圆点替代。 单选按钮（Radio Buttons）<input type="radio"> 标签定义了表单单选框选项<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form> 浏览器显示效果如下:窗体顶端Male
Female 窗体底端 复选框（Checkboxes）<input type="checkbox"> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form> 浏览器显示效果如下:窗体顶端I have a bike
I have a car 窗体底端 提交按钮(Submit Button)<input type="submit"> 定义了提交按钮.当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。:<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form> 浏览器显示效果如下:窗体顶端Username: 窗体底端假如您在上面的文本框内键入几个字母，然后点击确认按钮，那么输入数据会传送到 "html_form_action.php" 的页面。该页面将显示出输入的结果。

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>to be try</title></head><body><form action="demo-form.php">First name: <input type="text" name="FirstName" value="Mickey"><br>Last name: <input type="text" name="LastName" value="Mouse"><br><input type="submit" value="Yes"></form><p>点击"提交"按钮，表单数据将被发送到服务器上的“demo-form.php”。</p></body></html>