HTML课程_html 表格展开和收缩表格折叠-CSDN博客

本文链接：https://blog.csdn.net/javareplacedota/article/details/39924697

一、HTML概述

什么是HTML：一种设计网页的纯文本类型语言，文件以.htm/.html为后缀，由浏览器解释运行。

主流浏览器：IE 、火狐、谷歌

二、基础语法

封闭类型的标记（成对）：

<span style="font-size:14px;"><h1>...</h1></span>

非封闭类型的标记（单标记）：

<span style="font-size:14px;"><br /></span>

为标记添加属性：

<span style="font-size:14px;"><h1 align="center" xx="xx" > </h1></span>

HTM标准结构：

版本信息

<span style="font-size:14px;"><html>
        <head>
         </head>
          <body>
          </body>
</html></span>

1、版本信息：传统型（过渡型）、严格型、框架型

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

2、head：

title：标题

meta：

刷新频率：

<span style="font-size:14px;"><meta http-equiv="refresh" content="10"></span>

编码方式：

<span style="font-size:14px;"><meta http-equiv="content-type" content="text/html;charset=utf-8" /></span>

三、文本

默认方式：空格折叠（多个空格和换行，合为一个空格）

特殊字符：转义字符，替代特殊字符

< <

空格  

标题：

段落：

换行：

分组元素：一些元素分堆，统一的设置

<div></div>块级（block）元素：独占一行，上下分开，常用于对块级元素分组，比如用于包含多个段落。

<span></span>行内（inline）元素：与其他元素位于同一行，常用于分开一行中的某些文本。

四、图像和链接

1、图像：

<span style="font-size:14px;"><img src="a.jpg" /></span>

2、url地址：相对路径、绝对路径

相对当前页面文件：

<span style="font-size:14px;"><img src="images/b.jpg" /></span>

绝对路径、全路径：

<span style="font-size:14px;"><img src="http://baidu.com"/></span>

3、链接：

<span style="font-size:14px;"><a href="index.html" > 被点击的对象</a></span>

<pre name="code" class="html"><span style="font-size:14px;"><a href="http://sina.com.cn">click me</a></span>

4、设置打开的目标位置：

<span style="font-size:14px;"><a target="_self/_blank"> </a></span>

替换原有页面： _self

打开一个新窗口：_blank

5、链接的跳转

a、页面之间：A页面——B页面

b、同一页面上的不同部分之间：

回到顶端：

<span style="font-size:14px;"><a href="#"> XX</a></span>

使用锚点：页面不同部分之间定位

<span style="font-size:14px;"><a name="t1"></a>    </span>

隔开很多内容,链接

<span style="font-size:14px;"><a href="#t1">To    </a></span>

五、列表

1、无序列表（ul），包含列表项li

2、有序列表（ol）

3、列表的嵌套：创建出多级目录形式

六、表格

1、应用：数据的显示，网格数据

页面的布局

2、表格的基本结构： table/tr/td（单元格）

3、常用属性：

table：border/width/height/align

td:width/height/align(left/right/center)/valign(top/middle/bottom)

cellspacing:表格与单元格边框之间的距离

cellpadding：单元格内容和单元格边框之间的距离——内边距

4、表格的复杂结构

行分组：thead/tbody(常用)/tfoot

表格的标题：<caption>标题文本</caption>

<span style="font-size:14px;"><table>
      <caption></caption>
      <thead>
               <tr></tr>
      </thead>
       <tbody>
                <tr></tr>
                <tr></tr>
        </tbody>
        <tfoot>
                     <tr></tr>
         </tfoot>
</table></span>

5、不规则表格： td的colspan/rowspan属性，设置单元格跨列或者跨行

6、表格的嵌套：实现复杂的布局、数据显示时，将table结构写入一个td里。

七、表单

1、form：表单，承载表单上的元素，提交数据

<form action="" method=""> </form>

2、表单中的元素

input元素：使用type属性区分各种输入框

文本框：

<input type="text" />

密码框：

<input type="password" />

单选框：

<input type="radio"  />

多选框：

<input type="checkbox" />

提交按钮：发生提交动作，默认，将明值对附加到url后，提交

<input type="submit"  />

重置按钮：将页面恢复到初始状态

<input type="reset" />

普通按钮：

<input type="button"  />

隐藏域：常用于记载哪些不需要在页面显示的数据，比如id

<input type="hidden" />

文件域：

<input type="file" />

input元素常用的属性：

name：标识，用于提交数据，名值对的方式

value：记载值

checked：适用于单选或者多选，默认选中

非input元素：

select元素：列表框或者下拉框（size属性），包含<option value="">,表示选项

多行文本框：

<textarea>  </textarea>

fieldset

文本标签：

<label for="某个元素的ID值">文本</label>将文本和元素发生关联

八、框架元素

在某个页面上嵌入另一个页面

<iframe src="url"> </iframe>