HTML5基础知识学习笔记

1.Html5基础讲解

1.1HTML5基础标签:

head:头标签，一般会将一些网页的基本配置和文件引用在head中设置；

body:内容标签，里面是整个网页要展示内容部分；

1.2HTML5标题:

h1…h6等,后面跟的数字越大，对应的标题的字体大小就越小；

1.3HTML5段落

p标签表示段落，在p标签中可以编写文字段落；

1.4HTML5连接

a标签表示连接，可以在里面设置点击之后跳转到其他url；

1.5HTML5图像

img标签表示图像标签，可以通过其设置图片展示；

1.6HTML5换行标签

br标签表示换行，使用它时最后带上“/”,因为这样更规范。

2.HTML5元素简介

元素：从开始标签到结束标签的所有代码，元素是可以进行嵌套的，正是这个属性可以是网页可以形成百变的组合效果。

3.HTML属性

可以通过设置属性为元素提供更多的属性，属性以键值对的形式存在

eg：href=“xxxxx”

常用的标签属性:

h1标题标签: align：设置对齐方式

body标签: bgcolor：设置整个body背景颜色

a标签: target：指定在何处打开连接

通用属性:

-class:规定元素的类名

-id：规定元素的唯一id

-style：规定元素的样式

-title：规定元素的额外信息

4.HTML格式化

常用格式化标签:

-b标签： 定义粗体字

-big标签：定义大号字

-em标签：定义着重文字

-i标签：定义斜体文字

-small标签：定义小号字

-strong标签：定义加重语气

-sub标签：定义下标字

-sup标签：定义上标字

-ins标签：定义插入字

-del标签：定义删除字

5.HTML样式

三种样式表插入方式：

-外部样式表:

<link rel =”stylesheet” type=”text/css” href=”mystyle.css”>

-内部样式表：

<style type=”text/css”>

body{background-color ;red}

p{margin-left:20px}

</style>

-内联样式表：

<p sytle =”color:red”>

6.HTML链接

href属性：指向另一个文档的链接，页面外的跳转

name属性：创建文档内的链接，页面内的跳转

eg：

<a name=”tips” > 待跳转的位置</a>

<a href=”#tips”>开始跳转的位置</a>

7.HTML表格

标签

<table> : 定义表格

<caption> : 定义表格标题

<th> : 定义表格的表头

<tr>: 定义表格的行

<td>: 定义表格的单元

<thread> : 定义表格的页眉

<tbody> : 定义表格的主体

<tfoot> : 定义表格的页脚

<col> : 定义表格的列属性

几种表格

最简单的表格：

<table border=”1”>

<tr>

<td>表格1</td>

<td>表格2</td>

<td>表格3</td>

</tr>

<tr>

<td>表格1</td>

<td>表格2</td>

<td>表格3</td>

</tr>

</table>

带表头的表格：

<table border=”1”>

<tr>

<th>单元</th>

<th>单元</th>

<th>单元</th>

</tr>

<tr>

<td>表格1</td>

<td>表格2</td>

<td>表格3</td>

</tr>

<tr>

<td>表格1</td>

<td>表格2</td>

<td>表格3</td>

</tr>

</table>

带标题的表格：

<table border=”1”>

<caption>重要表格</caption>

<tr>

<th>单元</th>

<th>单元</th>

<th>单元</th>

</tr>

<tr>

<td>表格1</td>

<td>表格2</td>

<td>表格3</td>

</tr>

<tr>

<td>表格1</td>

<td>表格2</td>

<td>表格3</td>

</tr>

</table>

表格内的标签：

<table border=”1”>

<caption>重要表格</caption>

<tr>

<th>单元</th>

<th>单元</th>

</tr>

<tr>

<td>表格1</td>

<td>表格2</td>

</tr>

<tr>

<td>

<ul>

<li>菠萝</li>

<li>菠萝</li>

<li>菠萝</li>

</ul>

</td>

<td>我想吃了</td>

</tr>

</table>

单元格间距设置表格： <table border=”1” cellspacing=”10”>

单元格边距设置表格：<table border=”1” cellpadding=”10”>

表格背景色，表格背景图片设置：

背景图片： <table border=”1” background=”images/Desert.jpg”>

背景颜色: <table border=”1” bgcolor=”aqua”>

8.HTML列表的使用

列表标签：

-<ol>: 有序列表

-<ul>: 无序列表

-<li>: 列表项

-<dl>:列表

-<dt>:列表项

-<dd>:描述

常用列表示例：

无序列表：

<ul type=”square”>

<li>第1个</li>

<li>第2个</li>

<li>第3个</li>

<li>第4个</li>

</ul>

使用标签：<ul>,<li>

属性: disc,circle,square 代表了列表前的符号样式

有序列表：

<ol start=”10”>

<li>1</li>

<li>2</li>

<li>3</li>

<li>4</li>

</ol>

使用标签：<ol>,<li>

属性 :A,a,l,i,start 表示有序列表前面的数字样式

嵌套列表：

<ul>

<li>动物</li>

<ul>

<li>小狗</li>

<li>小猫</li>

</ul>

<li>植物</li>

<ul>

<li>小草</li>

<li>小花</li>

</ul>

<li>人类</li>

</ul>

使用标签：<ul>,<ol>,<li>

自定义列表：

<dl>

<dt>ahah</dt>

<dd>sssssssss</dd>

<dt>ahah</dt>

<dd>sssssssss</dd>

<dt>ahah</dt>

<dd>sssssssss</dd>

</dl>

使用标签：<dl>,<dt>,<dd>

9.HTML块的使用

HTML块元素：块元素显示时，通常会以新行开始

一般有：<h1>、<p>、<ul>

HTML内联元素：内联元素通常不会以新行开始

一般有：<b> 、<a> 、<img>

HTML<div>元素： div元素也被称为块元素，其主要是组合HTML元素的容器

HTML<span>元素： span是内联元素，可作为文本的容器

10.HTML5的布局

一般可以使用div进行布局，也可以使用table进行布局，使用这两个标签可以搭出一个网页的大体框架，然后往其中提充具体的细节元素；

11.HTML5的表单

表单常用标签：

<form>:表单

<input>:输入框

<textarea>:文本框

<label>:控制标签

<fieldset>:定义域

<legend>:域的标题

<select>:选择列表

<optground>:选项组

<option>:下拉列表中的选项

<button>:按钮

常用的表单：

复选框表单：

eg： 请选择你喜欢吃的水果：

苹果<input type=”checkbox”>

香蕉<input type=”checkbox”>

水蜜桃<input type=”checkbox”>

单选按钮：

eg： 请选择你的性别：

男<input type=”radio” name=”sex”>

女<input type=”radio” name=”sex”>

下拉框：

eg：<select>

<option>上海</option>

<option>南京</option>

<option>北京</option>

</select>

文本域：

eg：<textarea cols=”30” rows=”10”>please input your message here…</textarea>

按钮：

eg:<input type=”submit” value=”提交”>

<input type=”button” value=”提交”>

表单提交数据到服务器:

eg:<form action=”http://localhost/MyServer/server1.php” method=”get”>

<table>

<tr>

<th colspan=”2”>登录</th>

</tr>

<tr>

<td>用户名：</td>

<td><input type=”text” name=”name”></td>

</tr>

<tr>

<td>密码：</td>

<td><input type=”password” name=”password”></td>

</tr>

<tr>

<td colspan=”2”><input type=”submit” value=”提交”></td>

</tr>

</table>

</form>

12.HTML5的框架

frame：框架标签

框架对于页面设计有着很大的作用

frameset：框架集标签

框架集标签定义如何将窗口分割为框架

每个frameset定义了一系列行或列

rows、cols的值规定了每行或每列占据屏幕的面积

常用标签: norsize固定框架大小,cols列,rows行

内联框架： iframe ,现在推荐使用的框架