前端入门：HTML5（一）

一、什么是HTML？

是用来描述网页的一种语言，是指超文本标记语言，不是编程语言是一种标记语言。

二、基础标签

1、html基础标签

head、body（主体部分）

2、html标题

h1…h6等标签进行定义标题，分别对应字体的从大到小

3、html段落

p标签定义一个段落的文字，不在标签内的文字要重启一行

4、html链接

a标签定义链接，href属性定义链接地址

5、html图像

img标签定义图像
src属性：图像文件地址

6、单标签

/br: 换行

三、html元素、属性、格式化

1、通用标签属性：

class: 规定元素的类名
id: 规定元素唯一的id
style: 规定元素的样式
title：规定元素的额外信息

2、常用标签属性

（1）a标签

href属性：链接地址（本体或者网络）
target属性：打开方式，_blank,_parent,_self,_top
name属性：标签名称，可以通过+“#”赋给href跳转

（2）h标签

align属性：标题位置，right,left,center…

（3）body标签

bgcolor属性：背景颜色
background属性：背景图片

（4）img标签

src属性：图片地址
alt属性：图片名称
width、height属性：图片的长和宽

3、格式化

四、html样式、链接和表格

1、样式

（1）标签

style: 样式定义
link: 资源引用

（2）属性

rel=“stylesheet”，外部样式表
type=“text/css”, 引入文档的类型
margin-left: 边距

（3）样式表插入方式

外部样式表：

创建外部css样式文件
在头部head标签中插入link标签，link的属性如下：
rel=“stylesheet”
href=“外部样式css文件”
tyle=“text/css”

内部样式表：

在头部head标签中插入style标签，标签的属性为type=“text/css”。
标签的内容为（标签名称）：
p {color: red; margin-left:20px;}
body {background-color: red}
或者是标签的id:
#container {color:red; width:100px; height:100%}

内联样式表

直接在所在标签添加标签样式属性，如p标签
style=“color:red”

2、链接

（1）链接数据

文本链接、图片链接（在标签a内定义img标签）

（2）a标签属性

href: 指向另一个文档的链接
name: 创建文档内的链接

（3）img标签属性

alt: 替换文本属性
width: 宽
height：高（px）

3、表格

（1）表格的相关标签

ul: 表格内的列表
li: 列表内的每一项

（2）表格的属性

border: 表格的边框
cellpadding: 单元格边距
cellspacing: 单元格间距
background:表格背景图片
bgcolor:表格背景色

五、html列表、块和布局

1、 列表

（1）无序列表

使用标签：ul、li
type属性：disc、circle、square(实心圆、空心圆、矩形)

（2）有序列表

使用标签：ol、li
type属性：A、a、l、i、
start属性：10

（3）嵌套列表

使用标签：ul、ol、li

（4）自定义列表

使用列表：dl、dt、dd

2、块

（1）块元素

以新行开始的元素h1、p、ul

（2）内联元素

不以新行开始的元素b、a、img

（3）div元素

块元素，是组合html元素的容器

（4）span元素

内联元素，可以作为文本的容器

3、布局

table布局：内联样式表，直接在标签内定义样式属性
div布局：在头部插入内部样式表，可用id索引定义样式