HTML基础知识
HTML、CSS、JS的理解
1.HTML是网页内容的载体，内容包括网页制作者想要让用户浏览的信息，包括文字、图片、视频等。
2.CSS是表现，用来改变网页内容的外观的东西。
3.JS是用来实现网页上的特效，以及用来实现交互。
4.用HTML建立页面结构，用CSS指定样式，不要用HTML指定样式。
注意
1.浏览器会忽略HTML文档中的制表符、回车和大部分空格。
2.虽然有些情况下语法错误浏览器还是能正常表现出想要的样子，但是还是要写正确的语法，养成良好的习惯。
3.属性用来提供元素的附加信息，属性值要用双引号。
标签的用途
标签的实际作用一般与标签的名字相近，这是因为采用了语义化的命名，这样可以让标签更容易被搜索引擎收录，以及更容易让屏幕阅读器读出网页内容。
常用的标签
//HTML标签不区分大小写，但是最好区分，养成良好的习惯
<html></html> //根标签
<head></head> //头部标签
<body></body> //标签之间是网页的主要内容
<p></p> //段落标签
//空格
<em></em> //斜体，但不要为了斜体而使用，表现形式应该用CSS
<strong></strong>//加粗
<hx></hx> //文章标题,x为1-6
<q></q>//引用，双引号
<blockquote></blockquote>//长文本引用，左右缩进
<code></code>//代码，仅文本，并不会运行代码
<pre></pre>//多行代码，仅文本，并不会运行代码
<address></address>//地址，显示为斜体，暂时觉得没什么用，大概是为了语义化
<br/> //换行，不要写成<br>,<br/>比较规范
<hr/> //横向，不要写成<hr>,<hr/>比较规范
<span></span> //自定义样式，要加上
<ul> //列表标签，无顺序
<li>信息</li>
<li>信息</li>
......
</ul>
<ol> //列表标签，有顺序
<li>信息</li>
<li>信息</li>
......
</ol>
<div></div> //相当于一个容器，用来划分独立了的逻辑
/*
创建表格
1.<table>…</table>：整个表格以<table>标记开始、</table>标记结束。
2.<tbody>…</tbody>：当表格内容非常多时，表格会下载一点显示一点，但如果加上<tbody>标签后，这个表格就要等表格内容全部下载完才会显示。如右侧代码编辑器中的代码。
3.<tr>…</tr>：表格的一行，所以有几对tr 表格就有几行。
4.<td>…</td>：表格的一个单元格，一行中包含几对<td>...</td>，说明一行中就有几列。
5.<th>…</th>：表格的头部的一个单元格，表格表头。
6.表格中列的个数，取决于一行中数据单元格的个数。
7.摘要，<table summary="表格简介文本">，作用是增加表格的可读性。
*/
<table>
<caption>标题文本</caption>
<tr>
<td>…</td>
<td>…</td>
…
</tr>
…
</table>
//链接,target="_blank"表示在新建浏览器窗口打开
<a href="网址" title="鼠标滑过显示的文本" target="_blank">链接显示的文本</a>
//插入图片，alt指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本，图像可以是gif，png，jpeg；
<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">
//使用表单标签，与用户交互
<form method="传送方式" action="服务器文件"></from>
/*
1.<form> ：<form>标签是成对出现的，以<form>开始，以</form>结束。
2.action ：浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。
3.method ： 数据传送的方式（get/post）。
method属性
浏览器使用 method 属性设置的方法将表单中的数据传送给服务器进行处理。共有两种方法：POST 方法和 GET 方法。
如果采用 POST 方法，浏览器将会按照下面两步来发送数据。首先，浏览器将与 action 属性中指定的表单处理服务器建立联系，一旦建立连接之后，浏览器就会按分段传输的方法将数据发送给服务器。
在服务器端，一旦 POST 样式的应用程序开始执行时，就应该从一个标志位置读取参数，而一旦读到参数，在应用程序能够使用这些表单值以前，必须对这些参数进行解码。用户特定的服务器会明确指定应用程序应该如何接受这些参数。
另一种情况是采用 GET 方法，这时浏览器会与表单处理服务器建立连接，然后直接在一个传输步骤中发送所有的表单数据：浏览器会将数据直接附在表单的 action URL 之后。这两者之间用问号进行分隔。
*/
//文本输入框、密码输入框
<form>
<input type="text/password" name="名称" value="文本" />
</form>
/*
1.type：当type="text"时，输入框为文本输入框;当type="password"时, 输入框为密码输入框。
2.name：为文本框命名，以备后台程序ASP 、PHP使用。
3.value：为文本输入框设置默认值。(一般起到提示作用)
4.所有表单控件（文本框、文本域、按钮、单选框、复选框等）都必须放在 <form></form> 标签之间（否则用户输入的信息可提交不到服务器上)。
*/
//文本域，支持多行文本输入
<textarea rows="行数" cols="列数">文本</textarea>
/*
1.<textarea>标签是成对出现的，以<textarea>开始，以</textarea>结束。
2.cols ：多行输入域的列数。
3.rows ：多行输入域的行数。
4.在<textarea></textarea>标签之间可以输入默认值。
*/
//单选框、复选框
<input type="radio/checkbox" value="值" name="名称" checked="checked"/>
/*
1.type:当 type="radio" 时，控件为单选框;当 type="checkbox" 时，控件为复选框
2.value：提交数据到服务器的值（后台程序PHP使用）
3.name：为控件命名，以备后台程序 ASP、PHP 使用
4.checked：当设置 checked="checked" 时，该选项被默认选中
5.**同一组的单选按钮，name 取值一定要一致，这样同一组的单选按钮才可以起到单选的作用**。
*/
//下拉列表框
<select multiple="multiple">
<option value='提交值' selected="selected">显示的值</option>
<option value='提交值'>显示的值</option>
<option value='提交值'>显示的值</option>
...
</select>
/*
1.selected="selected",则该选项被默认选中;
2.下拉列表也可以进行多选操作，在<select>标签中设置multiple="multiple"属性，就可以实现多选功能，在 windows 操作系统下，进行多选时按下Ctrl键同时进行单击，可以选择多个选项;
*/
//提交按钮，提交数据
<input type="submit" value="提交" name="submitBtn"/>
/*
1.type：只有当type值设置为submit时，按钮才有提交作用
2.value：按钮上显示的文字
3.name=”submitBtn”书写习惯，暂时不知道什么用
*/
//重置按钮，重置表单信息
<input type="reset" value="重置" name="resetBtn"/>
/*
1.type：只有当type值设置为reset时，按钮才有重置作用
2.value：按钮上显示的文字
3.name=”resetBtn”书写习惯，暂时不知道什么用
*/
//label标签
<label for="控件id名称"></label>
label标签不会向用户呈现任何特殊效果，它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本，就会触发此控件。就是说，当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（就自动选中和该label标签相关连的表单控件上）。
注意：标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。
//注释
<!--注释文字-->
浙公网安备 33010602011771号