HTML

来源:互联网 发布:js添加属性checked 编辑:程序博客网 时间:2024/05/23 19:45

一.HTML基本标签

1.Html介绍

1). 什么是html?

  • Html是用来描述网页的一种语言。
    • HTML 指的是超文本标记语言 (Hyper Text Markup Language)
    • HTML 不是一种编程语言,而是一种标记语言 (markup language)
    • 标记语言是一套标记标签 (markup tag)
    • HTML 使用标记标签来描述网页

2). Html的作用
* Web浏览器的作用是读取html文档,并以网页的形式显示它们。浏览器不会显示html标签,而是使用标签来解释页面上的内容.
简单说,html就是用于展示信息的。

3).Html书写规范

  • a.Html标签
    • HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
    • HTML 标签是由尖括号包围的关键词,比如 <html>
    • HTML 标签通常是成对出现的,比如 <b> 和 </b>
    • 标签对中的第一个标签是开始标签,第二个标签是结束标签
    • 绝大多数的标签都具有属性,建议属性值使用引号引起。例如:<body text=”red”>
    • 大多数标签是可以嵌套的
  • b.Html创建
    • Html文件可以直接使用文本编辑器来创建,保存时,后缀名为html或htm
    • 格式:

      <html>
      <head></head>
      <body></body>
      </html>
  • c.空的html标签

    • 没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。
    • <br> 就是没有关闭标签的空元素(<br> 标签定义换行)。
    • 在开始标签中添加斜杠,比如 <br/>,是关闭空元素的正确方法,HTML、XHTML 和 XML 都接受这种方式。
    • 即使 <br> 在所有浏览器中都是有效的,但使用 <br /> 其实是更长远的保障。
  • d. Html大小写不敏感

    • HTML 标签对大小写不敏感:<P> 等同于 <p>。许多网站都使用大写的 HTML 标签。
    • W3School 使用的是小写标签,因为万维网联盟(W3C)在 HTML 4 中推荐使用小写,而在未来 (X)HTML 版本中强制使用小写

2.文件标签

1). html标签

  • 整个文件都处于<html>标签中.
  • <HTML>用以声明这是 HTML 文件,让浏览器认出并正确处理此 HTML 文件。
  • 在HTML文件有两部分<head>与<body>

2). head标签

  • <head>用于加载一些重要的资讯
  • 它的内容不会被显示,只有<body>的内容才会被显示

3). title标签

  • <title>只能出现于<head>中。
  • 它代表的是标题

4). body标签

  • 中的内容会被显示。
  • 常用属性:
    • text:用于设定文字颜色
    • background:用于设定背景图片
    • bgcolor:用于设定背景色

5). 关于html中颜色取值

  • 颜色由红色、绿色、蓝色混合而成
  • 有三种取取值方式:
    • 1.rgb(0,0,0) 值是在0-255之间
    • 2.#000000 #ff0000 #00ff00 #0000ff #ffffff
    • 3.red green blue

3.排版标签

1). 注释
* 在html中注释是<!–注释 –>
* 在html中使用注释的目的与java中一样。

2). p标签

  • <p>标签是段落标签,可以将html文档分割为若干段落。浏览器会自动在段落前后添加空格。
  • <p>标签常用属性
  • align:用于设定对齐方式 可选值 left right center 默认值是left

4.块标签

1). div标签

  • 用于在文档中设定一个块区域。
  • 常用属性:
    • align:left center right

2). span标签

  • 用于在行内设定一个块区域。
  • Html中绝大多数元素被定义为块级元素或内联元素。
  • 块级元素在浏览器显示时,通常会以新行来开始。例如 div p等
  • 内联元素在浏览器显示时,通常不会以新行来开始。span

5.字体标签

1). 1.font
* <font>标签用于规定文本的字体,大小,颜色。
* 常用属性:
* face:规定文本的字体
* size:规定文本的大小
* color:规定文本的颜色

2). h1-h6

  • <h1>-<h6>标签用于定义标题.
  • <h1>最大标题
  • <h6>最小标题

6.列表标签

1). ul

  • <ul>标签表示的是一个无序列表。
  • 常用属性:
    • type:规定列表的项目符号类型,可取值 disc,square,circle.默认值为disc

2). li

  • <li>标签表示的是一个列表项
  • 常用属性:
    • type:这个属性只适用于无序列表,用于设定项目符号,默认值为disc
    • value:这个属性只适用于有序列表,用于设定列表的项目数字

3). ol

  • <ol>表示的是一个有序列表。
  • 常用属性:
    • type:这个属性规定列表中使用的标记类型。可取值1 A a I i.
    • start:这个属性规定列表的起始值

7.图形标签

  • img
    • 是一个图片标签,用于在页面上引入图片.
    • 常用属性:
      • src:用于设定要引入的图片的url
      • alt:用于设定图像的替代文字
      • width:用于设定图片的宽度
      • height:用于设定图片的高度
      • border:图片边框厚度
      • align:用于设定图片的文字的对齐方式

8.链接标签

  • a
    • 标签用于定义超连接,用于从一个页面链接到另一个页面。
    • 常用属性:
      • href:用于设定链接指向页面的url.
      • name:用于设定锚的名称
      • target:用于设定在何处打开链接页面。

9.表格标签

1). table

  • <table>标签用于定义表格
  • 常用属性:
    • align:用于设定表格的对齐方式(left,center,right)
    • bgcolor:用于设定表格的背景颜色。
    • border:用于设定表格边框的宽度
    • width:用于规定表格的宽度。
    • cellpadding:规定单元边沿与其内容之间的空白。
    • Cellspacing:单元格之间的空间。

2). tr

  • 标签用于定义表格的行,包含一个或多个th或td元素。
  • 常用属性:
    • align:用于设定表格中行的内容对齐方式。
    • bgcolor:用于设定表格中行的背景颜色。
    • valign:规定表格行中内容的垂直对齐方式。

3). td

  • <td>标签用于定义表格单元
  • td元素中的文本一般显示为正常字体且左对齐。
  • <td>常用属性:
    • align:用于设定单元格内容的对齐方式。
    • bgcolor:用于设定单元格背景颜色。
    • height:用于设定单元格的高度。
    • width:用于设定单元格的宽度。
    • colspan:用于设定列合并
    • rowspan:用于设定行合并。

4). caption

  • <caption>用于定义表格标题
  • <caption>标签必须紧随标签之后,一个表格只能有一个标题。通常这个标题会被居中于表格之上。

5). th

  • 标签用于定义表格的表头,内部的文本通常呈现为居中加粗文本。
  • Html表格中有两种类型的单元格:
    • 表头单元格th:包含表头信息。
    • 标准单元格td:包含数据。

6). thead

  • <thead>标签用于定义表格的页眉
    • <thead>标签用于组合HTML表格的表头内容。
    • <thead>元素应该与和元素结合起来使用。
      注意:内部必须有标签。

7). tbody

  • <tbody>标签用于定义表格的主体
  • <tbody>标签用于组合HTML表格的主体内容。

8). tfoot

  • <tfoot>标签用于定义表格的页脚
  • <标签用于组合HTML表格中的表注内容。

二.表单标签

1.form标签

2.input种类

  • text
  • password
  • radio
  • checkbox
  • button
  • hidden
  • file
  • submit
  • reset

3.select与option标签

4.textarea标签

三.框架标签

1.<frameset>

  • 是框架结构标签,它定义如果将窗口分割为框架.

2.<frame>

  • <frame>是框架标签,它定义放置在每个框架中的页面。

3.<iframe>

  • Iframe 元素会创建包含另外一个文档的内联框架(即行内框架)
原创粉丝点击