前端入门，html基础很重要

---

HTML简介

HTML(HyperText Mark-up Language)中文名称为超文本标记语言，一种为普通文件中某些字句加上标识的语言，其目的在于运用标记（tag）合文件达到预期的效果。

HTML的优点

• HTML文件比较小，便于在网络上传输；
• HTML文档独立于计算机操作平台；
• 原则上，建立HTML文档不需要任何特殊的软件，只需一般的文本编辑器即可；
• HTML标记语言，非常便于学习。

HTML的局限性

• 直接用文本编辑时，不是所见即所得；
• 不同浏览器对同一个HTML文档可能得到不同的显示效果；
• 已定义的标记往往不能满足多方面的需要。

HTML基础标签

HTML头部结构

DOCTYPE html

声明文档类型为HTML5文件。文档声明在HTML5文档必不可少，且必须放在文档的第一行。

meta

标签提供了 HTML 文档的元数据。元数据不会显示在客户端，但是会被浏览器解析。META元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者及其他元数据。元数据可以被使用浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 Web 服务调用。

属性	值	描述
charset	character_set	定义文档的字符编码。
content	text	定义与 http-equiv 或 name 属性相关的元信息。
http-equiv	content-type default-style refresh	把 content 属性关联到 HTTP 头部。
name	application-name author description generator keywords	把 content 属性关联到一个名称。

实例 1 - 定义文档关键词，用于搜索引擎：

实例 2 - 定义web页面描述：

实例 3 - 定义页面作者：

实例 4 - 每30秒刷新页面：

link

link标签定义文档与外部资源的关系。link标签最常见的用途是链接样式表。

属性	值	描述
charset	char_encoding	HTML5 不支持该属性。 定义被链接文档的字符编码方式。
href	URL	定义被链接文档的位置。
hreflang	language_code	定义被链接文档中文本的语言。
media	media_query	规定被链接文档将显示在什么设备上。
rel	alternate archives author bookmark external first help icon last license next nofollow noreferrer pingback prefetch prev search sidebar stylesheet tag up	必需。定义当前文档与被链接文档之间的关系。
rev	reversed relationship	HTML5 不支持该属性。 定义被链接文档与当前文档之间的关系。
sizes	HeightxWidth any	定义了链接属性大小，只对属性 rel="icon" 起作用。
target	_blank _self _top _parent frame_name	HTML5 不支持该属性。 定义在何处加载被链接文档。
type	MIME_type	规定被链接文档的 MIME 类型。

实例

title

标签定义文档的标题，在所有 HTML 文档中是必需的。

实例

常见的块级标签

常见的块级标签

标题标签

...

水平线

---

段落

换行

引用
预格式

可以保留您需要的文本格式，比如不会取消换行和空格，并且所示文本是等宽的。

ol(order list)

标签定义了一个有序列表. 列表排序以数字来显示。

属性	值	描述
compact	compact	HTML5中不支持，不赞成使用。请使用样式取代它。规定列表呈现的效果比正常情况更小巧。
reversed	reversed	指定列表倒序(9,8,7...)
start	number	HTML5不支持，不赞成使用。请使用样式取代它。规定列表中的起始点。
type	1 A a I i	规定列表的类型。不赞成使用。请使用样式代替。

实例

 
咖啡
 
茶
 
牛奶

ul(unorder list)

标签定义了一个无序列表.
实例

 
咖啡
 
茶
 
牛奶

定义描述列表

标签定义一个描述列表。

标签与

（定义项目/名字）和

描述每一个项目/名字）一起使用。

标签必须有开始标签和结束标签。

实例

 
Coffee
   
Black hot drink
 
Milk
   
White cold drink
 

div

标签定义 HTML 文档中的一个分隔区块或者一个区域部分。

元素经常与 CSS 一起使用，用来布局网页。

实例

  
这是一个在 div 元素中的标题。
  
这是一个在 div 元素中的文本。

常见的行级标签

常见的行级标签

span 文本 : 用于包裹一部分文字，进行特定样式的修改。

小明真酷！！

img 图片
em 强调：浏览器显示为倾斜
strong 强调：浏览器显示为加粗。
q 短引用
a 超链接
i 倾斜
b 加粗
small 缩小字体
u 下划线

q

标签定义一个短的引用。浏览器经常会在这种引用的周围插入引号。

属性	值	描述
cite	URL	规定引用的源 URL。

实例

WWF's goal is to: 
Build a future where people live in harmony with nature. 
We hope they succeed.

img

标签用于展示 HTML 页面中的图像，使得页面能够“图文并茂”。img标签有两个必需的属性：src 和 alt。

属性	值	描述
align	top bottom middle left right	HTML5 不支持。HTML 4.01 已废弃。 规定如何根据周围的文本来排列图像。
alt	text	规定图像的替代文本。
border	pixels	HTML5 不支持。HTML 4.01 已废弃。 规定图像周围的边框。
crossorigin	anonymous use-credentials	设置图像的跨域属性
height	pixels	规定图像的高度。
hspace	pixels	HTML5 不支持。HTML 4.01 已废弃。 规定图像左侧和右侧的空白。
ismap	ismap	将图像规定为服务器端图像映射。
longdesc	URL	HTML5 不支持。HTML 4.01 已废弃。 指向包含长的图像描述文档的 URL。
src	URL	规定显示图像的 URL。
usemap	#mapname	将图像定义为客户器端图像映射。
vspace	pixels	HTML5 不支持。HTML 4.01 已废弃。 规定图像顶部和底部的空白。
width	pixels	规定图像的宽度。

实例

表格标签

table

表格框

表格行

表格列

表格标题列（将tr中的td替换为th)，th默认加粗且在单元格居中显示。

table属性

属性	值	描述
align	left center right	HTML5 不支持。HTML 4.01 已废弃。 规定表格相对周围元素的对齐方式。
bgcolor	rgb(x,x,x) #xxxxxx colorname	HTML5 不支持。HTML 4.01 已废弃。 规定表格的背景颜色。
border	1 ""	规定表格单元是否拥有边框。
cellpadding	pixels	HTML5 不支持。规定单元边沿与其内容之间的空白。
cellspacing	pixels	HTML5 不支持。规定单元格之间的空白。
frame	void above below hsides lhs rhs vsides box border	HTML5 不支持。规定外侧边框的哪个部分是可见的。
rules	none groups rows cols all	HTML5 不支持。规定内侧边框的哪个部分是可见的。
summary	text	HTML5 不支持。规定表格的摘要。
width	pixels %	HTML5 不支持。规定表格的宽度。

实例-1 一个简单的 HTML 表格，包含两列两行：

Month
Savings


January
$100

table多列与多行

跨列：colspan，某单元格跨N列，则该单元格右边的N-1个td就不需要了。
跨行：rowspan，某单元格跨N行，则该单元格下边的N-1个td就不需要了。

实例-2 表格单元横跨两列的表格

  

    
Month
    
Savings
  
  

    
January
  
  

    
February
  

实例-3 表格单元竖跨两列的表格

  

    
星期一
    
星期二
  
  

    
星期三
  

表单标签

表单语法

HTML 表单用于搜集不同类型的用户输入
实例-1 form基本使用 method规定如何发送表单数据,常用值：get|post。action表示向何处发送表单数据

   
名字：
   
密码：
   

      
       
    

常用表单元素

input 表单元素，表单项

image

实例-1 文本框

实例-2 密码框

实例-3 单选按钮

男
女

实例-4 复选框

运动
聊天
玩游戏

实例-5 按钮

实例-6 文件域

实例-7 邮件 (会自动验证Email地址格式是否正确)

邮箱:

实例-8 网址(会自动验证网址格式是否正确)

请输入你的网址:

实例-9 数字

请输入数字:

实例-10 滑块

请输入数字:

实例-11 搜索框

请输入搜索的关键词:

select和option 下拉菜单

实例

…
…

textarea 文本域

实例

文本内容