HTML基础
简介
什么是HTML？
- HTML(Hyper Text Markup Language)超文本标记语言。
- 超文本：就是指页面内可以包含图片、链接甚至音乐、程序等非文字元素。
- 标记语言: 标记（标签）构成的语言。
- 注：HTML不是编程语言，是标记语言。HTML使用标记语言来描述网页。
- HTML固定基本格式
<html> <head>头部信息 <title>标题</title> </head> <body> HTML文件的正文，此文本是可见的页面内容 </body> </html>
标签
- 标签是由<>包围的关键词。
- 标签分为单标签与双标签。单标签：如<br>换行。双标签：如<h1>正文一级标题。
- 标签的属性提供了更多有关HTML元素的更多信息。通常以名称/值对的形式出现。如：name："value"。
<head>标签
所有头部标签的容器。
<title>
格式：<title>标题内容</title>
<meta>
定义关于HTML文档的元数据，可读不可见。三个重要的属性：http-equiv、name、content。
http-equiv 把content属性值关联到http头部。
- Content-Type（浏览器接受的文档类型，一般是text/html）
- refresh（网页刷新，以秒为单位）
- expires（设定网页到期时间，一旦过期，必须到服务器上重传）
<meta http-equiv="Content-Type" content="text/html ;charset=UTF-8"/>
<meta http-equiv="Refresh" content="2">
<meta http-equiv="Refresh" content="2;URL=https://www.baidu.com">
<meta http-equiv="expires" content="6 Jun 2016"/>
name 把content属性关联到一个名称。
- keywords（搜索关键字，用于搜索引擎抓取信息的显示）
- description（搜索到网站后显示的网页内容简描述）
- author（站点制作者信息）
- generator（用以说明生成工具）
- name也可以根据特定的功能自定义，在新浪网中有使用360认证和搜狐认证（<meta name="360-site-verification"content="63349**********"/>、<meta name="sogou_site_verification"content="BVI*******"/>）。
<meta name="keywords" content="搜索关键字">
<meta name="description" content="简要描述">
<meta name="author" content="http://cnblogs.com/suoning">
<meta name="generator" content="用以说明生成工具">
content 定义与http-equiv或name属性相关的元信息，是必要的属性。
<base>
页面上所有链接规定默认地址（href）或默认目标（target）。
如：下列代码就是用一个新窗口打开文档。
<base target="_blank">
<link>
定义文档与外部资源之间的关系。最常用于引用外部文档，连接样式表。重要属性有三个：rel、href、type。
rel 规定文档与被链接文档之间的关系。
- rel="dns-prefetch" 预先解析缓存文档中使用的域名，目的是为了提高网页访问速度。使用场景：在一个网页频繁使用其他域名资源时。
- rel="shortcut icon"或rel="icon" 在收藏和标题栏上用于显示的图标。示例：<link rel="icon" href="http://images.cnblogs.com/cnblogs_com/suoning/845162/o_s.png">。 注：IE浏览器只支持ico格式，为了兼容IE，图片文件采用ico格式。
- rel="stylesheet" 引用外部样式表。
- rel="nofollow" 用于指示搜索引擎不要追踪（爬虫抓取），减少垃圾链接。用于<a>标签，使用场景：网页不被信任或是不希望呗搜索引擎录入的网站。
href 资源的路径（相对路径/绝对路径）。
type 规定被连接文档的MIME类型，用于明确文件的打开方式。例如：.ico文件 image/x-icon。
<body>标签
基本标签
| 标签 | 备注 | |
|---|---|---|
| 标题标签 | <h1>~<h6> | h1是一号标题，h6是六号标题，以此类推。 |
| 段落标签 | <p> | 其中style="text-indent: 2em"可以设置样式为首行缩进两个字符；<blockquote></blockquote>可以用来设置整个段落的缩进。 |
| 加粗标签 | <b>、<strong> | |
| 换行标签 | <br> | |
| <div> | 块级标签，一般用于布局。div显示通常用class或id来标识，class为标签的类，id为唯一的标签标识。 | |
| <span> | 元素是内联元素，可用作文本的容器。当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。 |
特殊符号（字符实体）
HTML中预留字符必须被替换成字符实体，因为在HTML中不能使用小于号（<）和大于号（>），此时浏览器会误认为标签。
| 显示结果 | 描述 | 实体名称 | 实体编号 |
|---|---|---|---|
| 空格 | |   | |
| < | 小于号 | < | < |
| > | 大于号 | > | > |
| " | 引号 | " | " |
| ' | 撇号 | ' (IE不支持) | ' |
<a>超级链接标签
HTML使用超级链接与网络上的另一个文档相连。点击链接可以从一个页面跳转到另一个页面。重要的属性有：href,target,name,title。
href (hyper text reference)超链接地址。超链接可以是一段文本，也可以是图片或其他页面元素。
语法：<a href="链接地址">链接文字</a>
href="#"时，表示被链接页面就是当前页面。
target 目标窗口。
| target值 | 目标窗口的打开方式 |
|---|---|
| _parent | 在上一级窗口打开，常在分帧的框架页面中使用 |
| _blank | 新建一个窗口打开 |
| _self | 默认值，在同一窗口中打开 |
| _top | 在浏览器的整个窗口中打开，会忽略所有框架结构 |
name 规定锚（anchor）的名称。可用此属性创建HTML页面中的书签。
title 鼠标停留时显示的文字。
<img>图像标签
重要的属性有：src,title,alt,align,width,height。
src 图片地址。存储图像的位置。
title 鼠标悬浮在图片上的文字。
alt 图像不显示时可替换的文本
align 图片周围文字的垂直对齐情况。常用的属性值有：top（与图片的顶部对齐）、middle（与图片的中部对齐）、bottom（默认，与图片的底部对齐）。
width 图片的宽
height 图片的高(宽高两个属性只用一个会自动等比缩放)
列表标签
分为三种类型：无序列表，有序列表，定义列表。
<ul>无序列表标签
<ul>
<li>第一项</li>
<li>第二项</li>
...
</ul>
<ol>有序列表标签
<ol>
<li>第一项</li>
<li>第二项</li>
...
</ol>
<dl>定义列表标签
<dl>
<dt>名词1<dd>解释1
<dt>名词2<dd>解释2
...
</dl>
<table>表格标签
语法：
<table>
<caption>标题</caption>
<tr>
<th>表头</th>
</tr>
<tr>
<td>内容</td>
</tr>
...
</table>
<form>表单标签
用来搜集不同类型的用户输入，使网页具有交互的功能。
- name=“表单名称” 不包含特殊符号和空格。
- action=“表单处理程序” 通俗来讲就是表单要提交的地址。
- method=“提交表单传送方式”其值默认为get。
- get:页面无敏感信息，表单数据在页面地址可见。
- post:表单含敏感信息（如密码），表单数据在页面地址不可见。
- enctype=“编码方式”
enctype取值 含义 text/plain 纯文本编码 application/x-www-form-urlencoded 默认的编码格式 multipart/form-data MIME编码，不对字符编码，上传文件时使用
- 单行文本输入：<input name=“值” type=“text”>
- 密码输入： <input name=“值” type=“password”>
- 单选框： <input name=“值” type=“radio” value=“传送服务器的值”>
- 复选框： <input name=“值” type=“checkbox” value=“传送服务器的值”>
- 普通按钮： <input name=“值” type=“button”value=“显示的文字” onclick=“单击按钮时的处理”>
- 提交按钮： <input name=“值” type=“submit”value=“显示的文字”>
- 重置按钮： <input name=“值” type=“reset”value=“显示的文字”>
- 文件上传： <input name=“值” type=“file”>
- 下拉单选框：
<select name=“值” id=“唯一标识名”> <option value=“选项值”>子选项一</option> <option value=“选项值” selected=“selected”>默认子选项</option> ... </select> -
多行文本输入：<textarea name=“值”rows=“行” cols=“列”>...</textarea>
框架
框架标签<frame>
通过使用框架，可在同一个浏览器中显示不止一个页面。HTML5不支持此标签，使用框架的坏处，使开发人员必须同时跟踪更多的HTML文档，也很难打印整张页面。
格式：<frame src=“框架中显示的文档”>
内联框架标签<iframe>
用于在网页内显示网页。
属性：- src=“文件位置”
- name=“框架名称”
- height=“高”
- width=“宽”
- frameborder=“是否设置框架边框”值为0或No，隐藏边框；值为1或Yes，显示边框。
- scrolling=“是否显示滚动条”值为auto, yes, no。