html button样式_HTML基础

最新推荐文章于 2025-06-07 19:53:30 发布

weixin_39888082

最新推荐文章于 2025-06-07 19:53:30 发布

阅读量1.1k

点赞数

本文详细解读HTML5的新特性，包括canvas绘图、本地存储、特殊元素、新表单控件、支持浏览器及基础语法。深入讲解doctype声明、标签用法、CSS嵌入和HTML5布局，表单设计中的input和select元素，以及HTML5在布局、表单和视觉表现上的进步。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML5

1.HTML5的新特性

1.1 用于绘画的canvas标签

1.2 对于本地离线存储的更好的支持（video和audio元素）

1.3 新的特殊内容元素，如article,footer,header,nav,section

1.4 新的表单控件

calendar,date,time,email,url,search

2.支持HTML5的浏览器

Safari,Chrome,FireFox,Opera

3.HTML5基础

3.2 声明：<!DOCTYPE>，浏览器只有在清楚了HTML版本之后才能完全正确地显示页面。HTML5声明为<!DOCTYPE html>，其他的版本声明都比较繁琐。

4.常用标签

4.1 标题标签<h1> -> <h6>

4.2 段落标签<p>

4.3 超链接标签<a href=””></a>(hyper reference)

属性：href,id(文档内的链接)，alt(加载失败的情况下显示的文本)，width,height

其他属性：target

target=_self:在当前页面打开链接

4.4 图片标签<img src=””>，路径分隔符必须使用/。常用的alt属性用来在图片无法成功加载时显示其他数据

4.5 换行标签<br/>(空标签，开始和结束标签合体)

4.6 div，无效果标签，结合CSS使用，可以承载任何类型的HTML元素

5.HTML属性

5.1 标签专属属性，如img的src属性，a的href属性

5.2 通用属性：

1）class:元素类名

2）id:元素的唯一id

3）style:元素样式（在HTML中定义的CSS样式，如style="color:blue; text-align:center"，使用的是CSS的属性）

4）title:元素的额外信息，鼠标移至元素的时候将会抛出的提示信息

6.文本属性

6.1 <b>:粗体

6.2 <big>:大号字

6.3 <em>:着重文字

6.4 <i>:斜体字

6.5 <small>:小号字

6.6 <strong>:加重语气

6.7 <sub>:下标字

6.8 <sup>:上标字

6.9 <ins>:插入字

6.10 <del>:删除字

6.11 <span>:内联元素，文本容器

以上的HTML属性基本废除，因为一般使用CSS的文本样式来装饰HTML的文本样式。

7.CSS样式表的嵌入方法

7.1 外部样式表，使用HTML5的标签link

属性：href(链接的文件),type(文件类型)，rel(被链接的文件与HTML文档的关系)

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

7.2 内部样式表，使用HTML5的标签style,必须指定其属性type

如：

body{background-color:red}

p(margin-left:20px)

</style>

7.3 内联样式表，使用HTML5的全局属性style

8.HTML5表格标签

<table>:定义表格

<caption>:定义表格标题

<th>:表头

<tr>:行

<td>:单元格

<thead>:表格页眉

<tbody>:表格主体

<tfoot>:表格页脚

<col>:表格列属性

<colspan>:属性值等于需要合并的单元格数量

9.HTML5列表

9.1 无序列表

标签：<ul>,<li>

属性：disc,circle,square

9.2 有序列表

标签：<ol>,<li>

属性：A,a,I,i,start

9.3 嵌套列表

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

9.4 自定义列表

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

10.块元素

10.1 特性：在显示的时候通常以新行开始。如h，p，ul，div

11内联标签

11.1 特性：不以新行开始，如b，a，img，span

12.引用HTML元素

12.1 应用类：.class

12.2 id引用：#id

12.3 其他CSS选择器（查看CSS文档）

13.HTML布局方式：

13.1 使用table布局

13.2 使用div布局

13.2.1 常用的div相关的CSS布局属性

width:设定宽度，常用单位是px和%（代表所占父元素的百分比）

height：高度，常用单位是px和%

background：背景

float：设定元素的位置

clear：清除浮动。如果想在浮动元素下面添加元素，就需要先清除浮动

14.HTML表单

14.1 form:表单

14.1.1 属性：

1) action: 表单数据的提交地址

2) method：分为get(在地址栏显示参数)和post(不在地址栏显示参数)

14.2 input元素:表单输入，设置其type可以实现不同类型的表单

14.2.1 input属性：type（只有指定input的name属性，才可以在点击了submit类型的input时成功提交参数）

14.2.1.1 type=”text” 单行输入文本框

14.2.1.2 type=”password” 单行输入掩码

14.2.1.3 type=”submit” 提交表单数据到表单处理程序

14.2.1.4 type=”radio” 单选按钮

14.2.1.5 type=”checkbox” 复选框

14.2.1.6 type=”button” 按钮

HTML5新增的输入类型：

14.2.1.7 type=”color”

14.2.1.8 type=”date”

14.2.1.9 type=”datetime”

14.2.1.10 type=”datetime-local”

14.2.1.11 type=”email”

14.2.1.12 type=”month”

14.2.1.13 type=”number”

14.2.1.14 type=”range”

14.2.1.15 type=”search”

14.2.1.16 type=”tel”

14.2.1.17 type=”time”

14.2.1.18 type=”url”

14.2.1.19 type=”week”

14.3 select元素:下拉列表

14.3.1 option元素：定义下拉选项，使用value指定选项值

14.3.2 selected元素：定义预先选择选项

14.4 textarea元素:定义多行输入文本框

14.4.1 属性：rows,cols(定义行数和列数)

14.5 button元素：定义可以点击的按钮