HTML学习总结

HTML基础

简介

什么是HTML？
标签

<head>标签

<title>
<meta>
<base>
<link>

<body>标签

基本标签
特殊符号标签
超级链接标签
图像标签
列表标签
表格标签
表单标签

框架

框架标签
内联框架标签

简介

什么是HTML？

HTML(Hyper Text Markup Language)超文本标记语言。
超文本：就是指页面内可以包含图片、链接甚至音乐、程序等非文字元素。
标记语言: 标记（标签）构成的语言。
注：HTML不是编程语言，是标记语言。HTML使用标记语言来描述网页。

HTML固定基本格式

            
                <html>
                <head>头部信息
                <title>标题</title>
                </head>
                <body>
                HTML文件的正文，此文本是可见的页面内容
                </body>
                </html>

<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>

属性：type=“序号类型”。值有disc（默认情况下的实心圆），square（实心正方形），circle（空心圆）。

<ol>有序列表标签

语法：

        
            <ol>
            <li>第一项</li>
            <li>第二项</li>
            ...
            </ol>

属性：1、type=“序号类型”。值有1，a，A，i，I。 2、start=“序号起始数值”。

<dl>定义列表标签

语法：

        
            <dl>
            <dt>名词1<dd>解释1
            <dt>名词2<dd>解释2
            ...
            </dl>

<table>表格标签

表格主要由表格标签<table>，行标签<tr>，单元格标签（列标签）<td>构成。另外还有表头标签<th>与标题标签<caption>。

语法：

     
         <table>
            <caption>标题</caption>
                <tr>
                 <th>表头</th>
                </tr>
                <tr>
                 <td>内容</td>
                </tr>
                ...
         </table>

属性：border=“边框宽度”align=“水平对齐方式”bgcolor=“背景颜色”cellpadding=“内边距”cellspacing=“外边距”。

结构：用来明确表格结构的，通过对结构的设置来分别对表头，表主体，表尾的样式进行设置，可整体规划表格属性。表头<thead>、表主体<tbody>、表尾<tfoot>。

<form>表单标签

用来搜集不同类型的用户输入，使网页具有交互的功能。

属性：

name=“表单名称” 不包含特殊符号和空格。
action=“表单处理程序” 通俗来讲就是表单要提交的地址。
method=“提交表单传送方式”其值默认为get。
1. get:页面无敏感信息，表单数据在页面地址可见。
2. post:表单含敏感信息（如密码），表单数据在页面地址不可见。
enctype=“编码方式”

enctype取值含义

text/plain 纯文本编码

application/x-www-form-urlencoded 默认的编码格式

multipart/form-data MIME编码，不对字符编码，上传文件时使用

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。