HTML入门学习

一、 HTML简介

HTML：超文本标记语言（HyperText Markup Language 简称：HTML）是一种用于创建网页的标准标记语言。

1.1 HTML 元素语法

HTML元素有：开始标签、元素内容、结束标签
HTML元素以开始标签起始，以结束标签终止，元素的内容是开始标签和结束标签之间的内容
大多数HTML元素可拥有属性
HTML标签对大小写不敏感，xhtml中强制使用小写

1.2 HTML属性

属性是HTML元素提供的附加信息
HTML元素可以设置属性
属性一般描述于开始标签
属性总是以名称/值对的形式出现

二、HTML基本标签

2.1 html标签

整个网页从html开始，到/html结束

2.2 head标签

head标签在浏览器中不可见

head常见标签	说明
title	定义网页标题
meta	定义网页的基本信息
style	定义CSS样式
link	链接外部CSS文件或脚本文件
script	定义脚本语言

2.3 body标签

body标签定义网页展示内容，往往都是可见内容

2.3.1 段落与文字标签

标签	说明
h1~h6	标题
p	段落
br	换行
hr	水平线
div	分割（块元素）
span	区域（行内元素）

2.3.2 文本格式化标签

标签	说明
strong	加粗
em	斜体
sup	上标
sub	下标

三、HTML列表

HTML三种列表：有序列表、无序列表和定义列表。

3.1 有序列表

语法：

<ol>
		<li>有序列表列</li>
		<li>有序列表列</li>
		<li>有序列表列</li>
</ol>

有序列表列表项符号由list-style-type属性定义

type属性值	列表项的序号类型
1	数字1、2、3……
a	小写字母a、b、c……
A	大写英文字母A、B、C……
i	小写罗马数字i、ii、iii……
I	大写罗马数字I、II、III……

3.2 无序列表

语法：

<ul type="列表项符号">
		<li>无序列表项</li>
		<li>无序列表项</li>
		<li>无序列表项</li>
</ul>

type属性值	列表项的序号类型
disc	默认值，实心圆
circle	空心圆
square	实心正方形

3.3 定义列表

语法：

<dl>
		<dt>定义名词</dt>
		<dd>定义描述</dd>
		......
</dl>

四、HTML表格

4.2 表格标签

表格基本标签：

标签	说明
table	表格
tr	行
td	单元格

表格结构标签：

标签	说明
thead	表头
tbody	表身
tfoot	表脚
th	表头单元格

4.2 表格基本结构

语法：

<table>
		<tr>
				<td>单元格1</td>
				<td>单元格2</td>
		</tr>
		<tr>
				<td>单元格1</td>
				<td>单元格2</td>
		</tr>
</table>

4.3 表格完整结构

表格完整结构包括表格标题、表头、表身和表脚4部分。

4.4 合并行和列

合并行使用td标签的rowspan属性，合并列用到td标签的colspan属性。

五、HTML图像

5.1 图像标签

HTML中的图像标签为img（自闭合标签）
<img src="url" alt="some_text">
URL 指存储图像的位置。
img标签常用属性:

属性	说明
src	图像的文件地址
alt	图像显示不出来时的提示文字
title	鼠标移到图片上的提示文字

5.2 图片格式

1、JPG 可以处理大面积色调的图像，如相片、网页。
2、PNG格式图片体积小，无损压缩，能保证网页的打开速度。支持透明信息。PNG格式图片可以称为“网页设计专用格式”。
3、GIF格式图片图像效果很差，但是可以制作动画。

六、HTML链接

HTML使用标签 a 来设置超文本链接。
HTML链接-target属性，使用该属性可以定义被链接的文档在何处显示
HTML链接-id属性，该属性可用于创建一个HTML文档书签。（书签在HTML页面中是不显示的）
语法：
<a href="链接地址" target="目标窗口的打开方式">

七、表单

表单标签共有4个：input、textarea、select和option。其中select和option是配合使用的。

7.1input标签表单

语法：

<input type="表单类型"/>

input元素type属性值

type属性值	说明
text	单行文本框
password	密码文本框
button	按钮
reset	重置按钮
radio	单选按钮
checkbox	复选框

7.2 textarea标签表单

1.多行文本框

<textarea rows="行数" cols="列数">多行文本框内容</textarea>