【3】HTML(列表标签、表格标签、表单、框架标签)

html-css09

【3】HTML(列表标签、表格标签、表单、框架标签),第1张

表格分为表格头、表格主体、表格脚,它们都由行组成,每一行由单元格组成。

给table标签设置属性,可以给表格整体设置样式。

表单用于收集信息。表单的总体设置如下,一个表单中包含各种表单控件标签。

form标签是表单最外层的包裹标签,表单中的一切都要包裹在form里面。一个form就是一个表单,form有如下属性:

input 的 type 值不同,表现为不同的表单控件,input 的 type 值默认为 text。

特点:可多选,选择后可取消

button 的 type 值不同,表现为不同的按钮,button的默认值为submit,不设置 type 属性的 button 就是提交按钮。

两种实现方式,可用 input 或 button 来实现:

作用:将页面重置为页面打开时的状态

作用:无提交/重置功能,配合js使用

作用:可输入多行文字,常用于论坛贴、自我介绍、文章等

name的值需与后端商量

value的值需与后端商量

就主要而言,HTML是一种标记语言,是网页的规范编程语言

1.主要适用于面向Web编程

【例如】Wechat公众号的部分HTML5小游戏,Web端的网页包括百度/谷歌都是使用HTML的;

2.可读性高

【原因】HTML是最容易理解的语言,因为它是标记语言,不是编程语言,因此其就只有标记和属性组成,不会像其他语言例如C++或Java等变形等分支,同时HTML不需要记住复杂的语法,基本上也就只有标签的名字需要记下来;

3.HTML5新功能:

【栗子】H5新增了<audio>和<video>标签,这使得网页不再必须要flash制作播放器了,并且HTML5在不同区域的标签进行了添加,例如<article>和<header>,分管文章部分和header部分。

资料扩展:

HTML5的设计目的是为了在移动设备上支持多媒体。新的语法特征被引进以支持这一点,如video、audio和canvas 标记。HTML5还引进了新的功能,可以真正改变用户与文档的交互方式,包括:

· 新的解析规则增强了灵活性

· 新属性

· 淘汰过时的或冗余的属性

· 一个HTML5文档到另一个文档间的拖放功能

· 离线编辑

· 信息传递的增强

· 详细的解析规则

· 多用途互联网邮件扩展(MIME)和协议处理程序注册

· 在SQL数据库中存储数据的通用标准(Web SQL)

HTML5在2007年被万维网联盟(W3C)新的工作组采用。这个工作组在2008年1月发布了HTML 5的首个公开草案。眼下,HTML5处于“呼吁审查”状态,W3C预期它将在2014年年底达到其最终状态。

资料来源:百度百科HTML5

【(一)HTML语言的基本结构元素有几个,分别是什么?什么作用?】

<html>

<head>

<title>标题</title>

</head>

<body>

正文部分

</body>

</html>

这个例子包含了html中最基本的元素,首先是<html></html>这一组标记符,然后在它里面是标记符的元素体。html元素的元素体由两大部分组成,头元素<head></head>,体元素<body></body>另外还有一些注释。这样就可以形成一个个我们看到的美伦美奂的网页。

1、“文件头”标记符()

文件头标记符也就是通常见到的标记符,标记符在网页中是看不到的,因为它包含在HTML语言的“<head>…</head>”标记符之间,而通常我们所见到的网页内容只有在“<body>…</body>”之间的才可以在文档中显示出来.

2、“文件标题”(Title)

Title元素是文件头里唯一一个必须出现的元素,它也只能出现在文件头里.它的格式如下:

<title>标题</title>

标题表示该HTML文件的名称,是对文件的概述。标题对于一个文件来说是非常重要的,我们可以从一个好的标题中判断出该文件大概的内容。不过文件的标题一般不会显示在文本窗口中,而以窗口的名称显示出来。

3.“文件体”标记符(body)

文件体标记符由<body>开始.</body>结束,它的中间是网页文档的正文部分。我们在网页中进行的背景颜色的设定,或是图片的设定或是连结字体的颜色,都要放在<body>这个标记符里。

4.“标题”标记符(hn)

标题标记符用于显示HTML文件的各级标题,格式如下:

<hn>标题内容</hn>

其中n为1-6的数字,数字越大,字越小。也就是说(h1)最大,(h6)最小,希望大家记住这一点。标题内容用黑体字显示,各行之间自动换行。

在我们制作网页时,<h4>一般作文本正文,而h6字体由于太小,一般用得很少。

5、字体和段落标记符

(1)网页中字体大小设定标识符

下面我们来看一看它的有关设置方法。它的语法是:<font size=3>文字内容</font>。它的大小一共有七种,也就是<font size=1>(最小)到<font size=7>(最大),另外,还有一种写法:<font size=+1>文字内容</font>,其意思就是说:比预设字大一级。当然也可以 font size=+2(比预设字大二级),或是 font size=-1(比预设字小一级),以一般而言,预设字体多为3。

(2)文字的字型设定标记符

我们在这里说的字型设定主要是指文字的字型,比如说宋体,楷体等。它们在网上用得也十分广泛。唯一的一个限制是:对方也要有该字型!否则看到的仍然还是宋体。另外要说明的是,这个标记符无法保证在每个浏览器上都能正常的显现,不过这并没有关系,看不到特殊的字型时,浏览器仍会以宋体来显示,所以不用怕会一团乱!

(3)分段标记符

由于在HTML里它的浏览器是基于窗口的,因此用户可以随时改变显示区的大小。不过由于HTML语言是不认识我们所谓的Enter键或空白键,所以不管按了多少次的空白或Enter,浏览器都会当作没看见。因此我们在HTML里的分段依赖于强制断行标记符<br>和强制分段标记符<p>。

6、图像标记符

在HTML里,一般用<img src=“”width=“”height=“” align=“”>来表示我们插入的图像。在这里,img表示图像的标记符,而属性src后面的引号中表示图像路径及文件名,width后面填写的是图像的宽度,height后面填写的是图像的高度,align为图像的对齐方式.一般我们使用的图像格式有2种,gif和jpeg.二者的加载方法一样。在使用图像标记符时有两件事值得我们注意一下,一是文件名,二是路径。如果文件名和路径不正确的话在网页中的图像是无法显示的。

7、表格标记符

在HTML里,一个表格由<table>开始,由</table>结束,在表格里的属性由<tr>表示表格的行,<th>表示表格的列数和相应栏目的名称,<td>表示单元格组成。此外我们还可以设置表格的表宽“width=#”和表高“height=#”,#表示是以象素为单位的整数。边框宽度“border=#”,#为宽度值,单位是象素。表格间距即划分表格的线的粗细用“cellspacing=#”来表示.以及表格颜色用“bgcolor=#”来表示,#是十六进制的6位数,格式为rrggbb,表示红,绿,蓝三色的分量。表格的合并在<td>中使用rowspan或colspan。

8、框架标记符

使用框架可以将浏览器分成多个区域,每个区域都是相对独立的,可以显示HTML文件

9、层标记符

所谓层,也就是网页内容的容器.只有在Dreamweaver里才有层。层分为两种类型:CSS和Netscape层。前者在HTML文件中的层标记符使用Div和Span,被浏览器Internet explore4.0和Netscape4.0支持。后者使用Layer和Ilayer,被Netscape4.0支持。Dreamweaver 8对以上4种层都支持。

层的基本语句如下:

<div id="Layer1" style="position:absoluteleft:141pxtop:58pxwidth:210pxheight:137pxz-index:1"></div>

在这里,id表示层的编号,style表示层的方式,left表示层左边界距离浏览器窗口左边界的距离,top表示层上边界距离浏览器窗口上边界的距离,width表示层的宽度,height表示层的高度,z-index表示在垂直平面的方向上层的顺序号。

【(二)用HTML语言编写个三行两列的表格。】

<table width="200" border="0" cellspacing="0" cellpadding="0">

<tr>

<td> </td>

<td> </td>

</tr>

<tr>

<td> </td>

<td> </td>

</tr>

<tr>

<td> </td>

<td> </td>

</tr>

</table>

【(三)HTMl语言的常用元素有什么?举至少5个例子。】

<a href=...>~〈/a>:插入超链接

<form action=...>~</form>:提交表单

<link href=...插入相关的CSS文件>

<style>~</style>:插入相应的图标,比如鼠标样子图标

<table>~<table>:插入显示HTML的一个表格,需要class和id的属性

<div>~</div>:定义显示文本的位置,需要class和id的属性

<font>~</font>:文字颜色和大小布局

<p>~</p>:文字段

<input />:输入表格属性,一般分为name和password两种。