HTML 基础
初识HTML
HTML 指的是超文本标记语言: HyperText Markup Language，HTML的解释器是网页浏览器
“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。
超文本标记语言的结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。
头部信息如
|
标签
|
描述
|
|---|---|
|
<head>
|
定义了文档的信息
|
|
<title>
|
定义了文档的标题
|
|
<base>
|
定义了页面链接标签的默认链接地址
|
|
<link>
|
定义了一个文档和外部资源之间的关系
|
|
<meta>
|
定义了HTML文档中的元数据
|
|
<script>
|
定义了客户端的脚本文件
|
|
<style>
|
定义了HTML文档的样式文件
|
注意：所有超文本标记语言文档应该以“文件类型声明”开头。
<!DOCTYPE html>
通常，浏览器基于页面中文件类型描述的存在以决定采用哪种渲染模式；如果存在一个完整的DOCTYPE则浏览器将会采用标准模式，而如果它缺失则浏览器将会采用怪异模式。
怪异模式（英语：quirks mode）是指在计算机领域中，一些网页浏览器为了维持对较旧的网页设计的向后兼容性，而使用的一种技术，有别于严格遵循万维网联盟（W3C）与互联网工程任务组（IETF）标准而设计的“标准模式”。怪异模式下渲染出来的页面肯能与标准模式下渲染的效果不同。
<!DOCTYPE html> <html lang="en"> <!--lang属性作用：声明当前页面的语言类型。--> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> </body> </html>
下面直接介绍常用到的标签。
HTML注释
<!-- 在此处写注释 -->
头部常用标签
<meta http-equiv="content-type" charset="utf-8"> <meta name="keywords" content="这里是关键字，keywords，meta"> <meta name="description" content="这里是描述信息"> <meta http-equiv="Refresh" content="2;URL=https://lcgsmile.cn"> <!--2s后自动跳转--> <title>标题</title> <link rel="icon" href="https://files.cnblogs.com/files/vastlee/smile.ico"> <link rel="stylesheet" href="css.css"> <script src="hello.js"></script>
主体部分常用的标签
<!-- <hn> ： 标题，n∈[1,6] , 一级标签最大 <p> : 段落，包裹的内容被换行，并且上下内容之间有一行空白 <b> <strong> : 加粗 <strike> <del> : 为文字上加一条中线 <em> : 斜体 <sup>和<sub> ：上角标和下角标 <br> ： 换行 hr ： 水平线 ： 空格 <: < > : > "； : " © : © ® : ® -->
div和span
<div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。
<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。
<span> 元素是内联元素，可用作文本的容器。
<span> 元素也没有特定的含义。
当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。
块级元素在浏览器显示时，通常会以新行来开始（和结束）。
例子：<h1>, <p>, <ul>, <table>......
内联元素在显示时通常不会以新行开始。
例子：<b>, <td>, <a>, <img>......
img
<img src="" alt=""> <!-- src: 要显示图片的路径. alt: 图片没有加载成功时的提示. title: 鼠标悬浮时的提示信息. width: 图片的宽 height:图片的高 (宽高两个属性只用一个会自动等比缩放.) -->
a
<a href="" target="_blank" >click</a>
href属性指定目标网页地址。该地址可以有几种类型：
绝对 URL - 指向另一个站点（比如 href="http://www.cnblogs.com/sesefadou/"）
相对 URL - 指当前站点中确切的路径（href=”index.html”）
锚 URL - 指向页面中的锚（href=”#top”）
target=’_blank’ 表示在新页面打开链接
什么是URL？
<!-- URL是统一资源定位器(Uniform Resource Locator)的缩写，也被称为网页地址，是因特网上标准的资源的地址。 URL举例 http://www.sohu.com/stu/intro.html http://222.172.123.33/stu/intro.html URL地址由4部分组成 第1部分：为协议：http://、ftp://等 第2部分：为站点地址：可以是域名或IP地址 第3部分：为页面在站点中的目录：stu 第4部分：为页面名称，例如 index.html 各部分之间用“/”符号隔开。 -->
在所有浏览器中，链接的默认外观是：
- 未被访问的链接带有下划线而且是蓝色的
- 已被访问的链接带有下划线而且是紫色的
- 活动链接带有下划线而且是红色的
您可以使用 CSS 伪类 向文本超链接添加复杂而多样的样式。
创建一个图片链接：
<a href="http://www.cnblogs.com/lcgsmile/"> <img border="0" src="http://images.cnblogs.com/cnblogs_com/lcgsmile/1112130/t_lcw2.jpg" /> </a>
创建一个邮件链接
<a href="mailto:lcgbeautiflu@gmail.com?subject=Hello%20lcg">发送邮件</a> <!-- %20表示空格 本例在安装邮件客户端程序后才能工作 -->
table表格
<!-- <thead> :用来包裹头部分 <tbody> ：用来包裹身体部分 <tr> : row 行 <th> : head 头部分 <td> ： data 单元格、组成身体部分 属性： border : 边框 cellpadding : 内边距 cellspacing : 外边距 width : 宽（单位像素或百分百，建议css设置长宽） rowspan : 单元格竖跨多少行 colspan : 单元格横跨多少列 bordercolor : 边框颜色 caption : 表头 -->
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>课程表</title> </head> <body> <div> <table border="1" cellpadding="5" cellspacing=0 > <caption> 课程表</caption> <thead> <tr> <th>项目</th> <th colspan="5">上课</th> <th colspan="2">休息</th> </tr> </thead> <tbody> <tr> <th>星期</th> <th>星期一</th> <th>星期二</th> <th>星期三</th> <th>星期四</th> <th>星期五</th> <th>星期六</th> <th>星期日</th> </tr> <tr> <td rowspan="4">上午</td> <td>语文</td> <td>数学</td> <td>英语</td> <td>英语</td> <td>物理</td> <td>计算机</td> <td rowspan="4">休息</td> </tr> <tr> <td>语文</td> <td>数学</td> <td>地理</td> <td>历史</td> <td>化学</td> <td>计算机</td> </tr> <tr> <td>化学</td> <td>语文</td> <td>体育</td> <td>计算机</td> <td>英语</td> <td>计算机</td> </tr> <tr> <td>政治</td> <td>英语</td> <td>体育</td> <td>历史</td> <td>地理</td> <td>计算机</td> </tr> <tr> <td rowspan="2">下午</td> <td>语文</td> <td>数学</td> <td>英语</td> <td>英语</td> <td>物理</td> <td>计算机</td> <td rowspan="2">休息</td> </tr> <tr> <td>数学</td> <td>数学</td> <td>地理</td> <td>历史</td> <td>化学</td> <td>计算机</td> </tr> </tbody> </table> </div> </body> </html>
列表标签
<!-- ul : 无序列表 [type属性：disc(实心圆点)(默认)、circle(空心圆圈)、square(实心方块)] <ol> : 有序列表 <li> ： 列表中的每一项 <dl> ： 定义列表 <dt> : 列表标题 <dd> : 列表项 -->
示例
<ul> <li>咖啡</li> <li>茶</li> <li>牛奶</li> </ul>
- 咖啡
- 茶
- 牛奶
<ol> <li>咖啡</li> <li>牛奶</li> <li>茶</li> </ol> <ol start="50"> <li>咖啡</li> <li>牛奶</li> <li>茶</li> </ol>
- 咖啡
- 牛奶
- .茶
start="50"定义了其实序号为50
<dl> <dt>计算机</dt> <dd>用来计算的仪器 ... ...</dd> <dt>显示器</dt> <dd>以视觉方式显示信息的装置 ... ...</dd> </dl>
计算机
用来计算的仪器 … …
显示器
以视觉方式显示信息的装置 … …
form表单
功能：表单用于向服务器传输数据，从而实现用户与Web服务器的交互
表单能够包含input系列标签，比如文本字段、复选框、单选框、提交按钮等等。
表单还可以包含textarea、select、fieldset和 label标签。
表单属性
action: 表单提交到哪. 一般指向服务器端一个程序,程序接收到表单提交过来的数据（即表单元素键值对）作相应处理.
method: 表单的提交方式 post/get 默认取值就是get
表单工作流程：
访问者在浏览有表单的网页时，可填写必需的信息，然后按某个按钮提交。这些信息通过Internet传送到服务器上。
服务器上专门的程序对这些数据进行处理，如果有错误会返回错误信息，并要求纠正错误。当数据完整无误后，服务器反馈一个输入完成的信息。
HTML表单通过标签<form>来定义
input，可以理解为输入属性，input属性type="如下"
- text 文本输入
- password 密文输入
- checkbox 多选框
- radio 单选框
- file 上传文件，form表单需要加上属性enctype="multipart/form-data"
- reset 重置;即所填写的内容进行清空操作
- submit 提交按钮
- button 按钮;需要配合js使用
input类型补充(以下属性被设置在input类型中)
- name: 表单提交项的键.注意和id属性的区别：name属性是和服务器通信时使用的名称；而id属性是浏览器端使用的名称，该属性主要是为了方便客户端编程，而在cssjavascript中使用的
- value: 表单提交项的值.对于不同的输入类型，value 属性的用法也不同
- checked: radio 和 checkbox 默认被选中
- readonly: 只读. text 和 password
- disabled: 对所用input都好使.
select，即下拉框
- mutiple 多选
- size 显示在页面的最大限制
- name 提交项的键 以上三个属性为select内的属性
- option下拉选中的每一项 属性：value:表单提交项的值. selected: selected下拉选默认被选中
- optgroup 为每一项加上分组
textarea，即文本编辑框
- name: 表单提交项的键. 文本框内容即为提交的值
- cols: 文本域默认有多少列
- rows: 文本域默认有多少行
示例：
<form> 名： <input type="text" name="firstname"> <br /> 姓： <input type="text" name="lastname"> </form>
<input type="password" name="password">
<form> 我喜欢自行车： <input type="checkbox" name="Bike"> <br /> 我喜欢汽车： <input type="checkbox" name="Car"> </form>
<form> 男性： <input type="radio" checked="checked" name="Sex" value="male" /> <br /> 女性： <input type="radio" name="Sex" value="female" /> </form>
<form> <select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select> </form>
<form> <select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat" selected="selected">Fiat</option> <option value="audi">Audi</option> </select> </form>
<form id="form1" name="form1" method="post" action=""> <textarea cols=“宽度” rows=“高度” name=“名称”> 默认内容 </textarea> </for
<input type="button" value="点我">
<!-- 定义：<label>标签为 input 元素定义标注（标记）。 说明： 1. label 元素不会向用户呈现任何特殊效果。 2. <label>标签的 for 属性值应当与相关元素的 id 属性值相同。 3. 下面的代码，点击用户名，光标即可跳到input框 --> <form method="post" action=""> <label for=“username”>用户名</label> <input type=“text” name=“username” id=“username” size=“20” /> </form>
<fieldset> <legend>登录吧</legend> <input type="text"> </fieldset>
持续更新......
更多HTML相关内容请参考W3school
