Html

html概述和基本结构

html概述

HTML (超文本标记语言) 是 HyperText Mark-up Language 的首字母简写。

是一种用于创建网页的标准标记语言。 HTML 不需要编译，可以直接由浏览器执行，它的解析依赖于浏览器的内核。它不是一种编程语言，而是一种标记语言。

超文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的标签组成，用这种语言制作的文件保存的是一个文本文件，文件的扩展名为html或者htm，一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用文本的方式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件渲染成网页，显示的网页可以从一个网页链接跳转到另外一个网页。

html基本结构

一个html的基本结构如下：

<!DOCTYPE html>
<html lang="en">
    <head>            
        <meta charset="UTF-8">
        <title>网页标题</title>
    </head>
    <body>
          网页显示内容
    </body>
</html>

<!DOCTYPE html> 是我们的文档声明头。他告诉了浏览器，本文档处理的是 HTML 文档。
html 标签即根元素，此处表示文档的开始。”标签和最后一行“”定义html文档的整体

“”标签中的‘lang=“en”’定义网页的语言为英文，定义成中文是'lang="zh-CN"',不定义也没什么影响，它一般作为分析统计用。
head 标签是网页的头部，设置网页的相关信息。
title 标签设置网页标题。
body 标签定义文档的主体，也就是我们的主要内容。

html注释

在 HTML 中满足以下格式的内容即为注释，被注释的内容将不会被渲染和显示。

<!-- 在此处写注释 -->

注：在开始标签中有一个惊叹号，但是结束标签中没有。浏览器不会显示注释，但是能够帮助记录。

<!DOCTYPE html>
<html>
  <body>
    <!--这是一段注释。注释不会在浏览器中显示。-->

    <p>这是一段普通的段落。</p>
  </body>
</html>

html元素

HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。

例子：

<p>I Love You</p>

注：这个元素定义了 HTML 文档中的一个段落。这个元素拥有一个开始标签 <p>，以及一个结束标签 </p>。元素内容是：I Love You。

html标签

超文本标记语言（英语简称：HTML ）标记标签通常被称为 HTML 标签，HTML 标签是 HTML 语言中最基本的单位，HTML 标签是 HTML（标准通用标记语言下的一个应用）最重要的组成部分。HTML 标签的大小写无关的，例如 <body> 和 <BODY> 表示的意思是一样的，都代表“主体”，推荐使用小写。

双标签（双标记）

双标记也称体标记，是指由开始和结束两个标记符组成的标记。其基本语法格式如下：

<标记名></标记名>

常见的双标签有：

<html></html>
<head></head>
<title></title>
<body></body>
<h1></h1>
<p></p>
<div></div>
<span></span>
<a></a>
<ul></ul>

例子 <a></a>：

<a href="https://www.shiyanlou.com">实验楼</a>

单标签（单标记）

单标记也称空标记，是指用一个标记符号即可完整地描述某个功能的标记。其基本语法格式如下：

<标记名/>

常见的单标签有：

<br />
<!--换行-->
<hr />
<!--水平分隔线-->
<meta />
<img />

标签的关系

嵌套关系

<head>
  <title> </title>
</head>

并列关系

<head></head>
<body></body>

html常见标签

标题标签

h 标签有六种 h1，h2，h3，h4，h5，h6，它代表着我们的标题。

<!DOCTYPE html>
<html>
  <head>
    <title>HTML 简介</title>
    <meta charset="utf-8" />
  </head>
  <body>
    <h1>我是一级标题</h1>
    <h2>我是二级标题</h2>
    <h3>我是三级标题</h3>
    <h4>我是四级标题</h4>
    <h5>我是五级标题</h5>
    <h6>我是六级标题</h6>
  </body>
</html>

段落标签

p 标签是我们的文本标签。定义一个文本段落，一个段落含有默认的上下间距，段落之间会用这种默认间距隔开，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>段落</title>
</head>
<body>
    <p>HTML是 HyperText Mark-up Language 的首字母简写，意思是超文本标记语言，超
    文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的
    标签组成，用这种语言制作的文件保存的是一个文本文件，文件的扩展名为html或者htm。
    </p>

    <p>一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用文本的方
    式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件渲染成网页，显示的网
    页可以从一个网页链接跳转到另外一个网页。</p>
</body>
</html>

超链接标签

<a> 标签是超链接标签，可以在网页上定义一个链接地址，它的常用属性有：

href属性定义跳转的地址
title属性定义鼠标悬停时弹出的提示文字框
target属性定义链接窗口打开的位置
- target="_self" 缺省值，新页面替换原来的页面，在原来位置打开
- target="_blank" 新页面会在新开的一个浏览器窗口打开

<a href="#"></a> <!--  # 表示链接到页面顶部   -->
<a href="http://www.itcast.cn/" title="跳转的传智播客网站">传智播客</a>
<a href="2.html" target="_blank">测试页面2</a>

换行标签

代码中成段的文字，直接在代码中回车换行，在渲染成网页时候不认这种换行，如果真想换行，可以在代码的段落中插入 <br /> 来强制换行，代码如下：

<p>
一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用<br />
文本的方式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件<br />
渲染成网页，显示的网页可以从一个网页链接跳转到另外一个网页。
</p>

空格字符

代码中成段的文字，如果文字间想空多个空格，在代码中空多个空格，在渲染成网页时只会显示一个空格，如果想显示多个空格，可以使用空格的字符实体,代码如下：

<!--  在段落前想缩进两个文字的空格，使用空格的字符实体：&nbsp;   -->
<p>
&nbsp;&nbsp;一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用<br />
文本的方式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件<br />
渲染成网页，显示的网页可以从一个网页链接跳转到另外一个网页。</p>

在网页上显示 “<” 和 “>” 会误认为是标签，想在网页上显示“<”和“>”可以使用它们的字符实体，比如：

<!-- “<” 和 “>” 的字符实体为 &lt; 和 &gt;  -->
<p>
    3 &lt; 5 <br>
    10 &gt; 5
</p>

水平分割线

<hr/> 标签用于在 HTML 页面中创建一条水平线。

<body>
<hr/>
<hr/>
<hr/>
</body>

容器标签

1、<div> 标签块元素，表示一块内容，没有具体的语义。

标签 <div> 可将网页页面分割成不同的独立部分，通常用于定义文档中的区域或节。该标签是一个块级元素，浏览器会自动在 <div> 和 </div> 所标记的区域前后自动放置一个换行符。

2、<span> 标签行内元素，表示一行中的一小段内容，没有具体的语义。

标签 <span> 通常作为文本的容器，它没有特定的含义和样式，只有与 CSS 同时使用才可以为指定文本设置样式属性。该标签是一个内联元素，他与块级元素相反，内联元素不会自动在前后自动放置换行符，因此内联元素会默认显示在同一行。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <style>
      #box {
        width: 200px;
        height: 200px;
        background: red;
      }
    </style>
  </head>
  <body>
    <div id="box">这是div标签，自动换行</div>
    <input type="text" /><span>这是span标签，不自动换行</span>
  </body>
</html>

图像标签

HTML 的图像是通过标签 <img> 来定义的。

<img>标签可以在网页上插入一张图片，它是独立使用的标签，它的常用属性有：

src属性定义图片的引用地址
alt属性定义图片加载失败时显示的文字，搜索引擎会使用这个文字收录图片、盲人读屏软件会读取这个文字让盲人识别图片，所以此属性非常重要。

<p>实验楼图片：</p>
<img src="https://static.shiyanlou.com/frontend/dist/img/9f43b00.svg" alt="产品图片" />
<img src="images/pic.jpg" alt="产品图片" />

绝对路径和相对路径

像网页上插入图片这种外部文件，需要定义文件的引用地址，引用外部文件还包括引用外部样式表，javascript等等，引用地址分为绝对地址和相对地址。

绝对地址：相对于磁盘的位置去定位文件的地址
相对地址：相对于引用文件本身去定位被引用的文件地址

绝对地址在整体文件迁移时会因为磁盘和顶层目录的改变而找不到文件，相对路径就没有这个问题。相对路径的定义技巧：

“ ./ ” 表示当前文件所在目录下，比如：“./pic.jpg” 表示当前目录下的pic.jpg的图片，这个使用时可以省略。
“ ../ ” 表示当前文件所在目录下的上一级目录，比如：“../images/pic.jpg” 表示当前目录下的上一级目录下的images文件夹中的pic.jpg的图片。

html列表

列表作为网页设计的重要内容之一，能够用来制作导航栏和新闻列表等。

HTML 列表分为：有序列表（ol），无序列表（ul）以及自定义列表（dl）。

无序列表

无序列表是一个项目的列表，此列项目使用实心圆、空心圆、方块进行标记，无序列表使用 <ul> 标签。每个列表项始于 <li> 标签。

在网页上定义一个无编号的内容列表可以用

配合使用来实现，代码如下：

<p>无序列表</p>
<ul>
  <li>列表项1</li>
  <li>列表项2</li>
</ul>

无序列表的 type 属性：

type 属性定义了列表项前项目符号的类型。

<ul> 标签的 type 属性：

值	备注
disc（默认）	实心圆
circle	空心圆
square	小方块

我们来看其中一两个 type 属性：

<p>无序列表</p>
<ul type="circle">
  <li>空心圆列表项1</li>
  <li>空心圆列表项2</li>
</ul>

有序列表

有序列表也是一列项目，列表项目使用数字进行标记。有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

在网页上定义一个有编号的内容列表可以用<ol>、<li>配合使用来实现，代码如下：

<p>有序列表</p>
<ol>
  <li>列表项1</li>
  <li>列表项2</li>
</ol>

有序列表的 type 属性：

type 属性定义了列表项前项目符号的类型。

<ol> 标签的 type 属性：

值	备注
1（默认）	数字表示（1，2，3...)
A	大写字母表示（A,B,C...)
a	小写字母表示（a,b,c...)
I	大写罗马数字表示(I,II,III…)
i	小写罗马数字表示(i,ii,iii…)

我们来看其中一两个 type 属性：

<p>有序列表</p>
<ol type="A">
  <li>列表项1</li>
  <li>列表项2</li>
</ol>

自定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。自定义列表的列表项前没有任何项目符号。

<dl>标签表示列表的整体。

<dt>标签定义术语的题目。

<dd>标签是术语的解释。

一个<dl>中可以有多个题目和解释，代码如下：

<h2>自定义列表</h2>
<dl>
  <dt>春天</dt>
  <dd>是万物复苏，百花争艳的季节</dd>
  
  <dt>夏天</dt>
  <dd>是夏日绵绵，烈日炎炎的季节</dd>
</dl>

html样式

为HTML 标签定义 style 属性，通过 style 属性来改变 HTML 元素的样式。

html 样式实例 - 背景颜色

<html>
  <body>
    <p style="background-color:red">实验楼</p>
  </body>
</html>

注：通过 "background-color" 属性值的设置来给背景设置颜色。

html 样式实例 - 字体、颜色和尺寸

<html>
  <body>
    <p style="font-family:arial;color:green;font-size:50px;">实验楼</p>
  </body>
</html>

注：通过对 font-family 属性值的设置来设置字体，通过对 color 属性值的设置来设置颜色，通过对 font-size 属性值的设计来设计字体大小。

html 样式实例 - 文本对齐

<html>
  <body>
    <h1 style="text-align:center">实验楼</h1>
  </body>
</html>

注：上面的标题“实验楼”相对于页面居中对齐。

样式示例

用 HTML 完成下图：

html

示例代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>
  <body>
    <div style="width:500px;height:300px;background-color:pink">
      <h1 style="text-align:center">html学习</h1>
      <p style="text-align:center">
        学习就上<a href="https://www.icourse163.org/">慕课</a>
      </p>
      <hr />
      <p>在慕课你可以学习的课程有：</p>
      <ul>
        <li>HTML 基础课程</li>
        <li>CSS 基础课程</li>
        <li>js 基础课程</li>
        <li>...</li>
      </ul>
    </div>
  </body>
</html>

html表格

表格由 <table> 标签来定义。

每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。

字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

它的常用属性如下：

border属性定义表格的边框，设置值是数值
cellpadding属性定义单元格内容与边框的距离，设置值是数值
cellspacing属性定义单元格与单元格之间的距离，设置值是数值
align属性设置整体表格相对于浏览器窗口的水平对齐方式,设置值有：left | center | right

我们先来创建一个简单的表格：

<table>
  <tr>
    <td>第一行第一列</td>
    <td>第一行第二列</td>
  </tr>
  <tr>
    <td>第二行第一列</td>
    <td>第二行第二列</td>
  </tr>
</table>

上述代码表格没有边框，接下来让我们为它添加一个 border 属性再来看看效果。

<table border="1">
  <tr>
    <td>第一行第一列</td>
    <td>第一行第二列</td>
  </tr>
  <tr>
    <td>第二行第一列</td>
    <td>第二行第二列</td>
  </tr>
</table>

caption 元素定义表格标题

表格一般都有标题，在 HTML 中表格标题通过 <caption> 定义。

<table border="1" width="300px" height="150px">
  <caption>
    表格标题
  </caption>
  <tr>
    <td>第一行第一列</td>
    <td>第一行第二列</td>
  </tr>
  <tr>
    <td>第二行第一列</td>
    <td>第二行第二列</td>
  </tr>
</table>

给表格添加表头

表格的表头使用 <th> 标签进行定义，表头通常用于列名字。

<table border="1" width="300px" height="150px">
  <caption>
    支出表
  </caption>
  <tr>
    <th>支出</th>
    <th>备注</th>
  </tr>
  <tr>
    <td>32</td>
    <td>买苹果</td>
  </tr>
  <tr>
    <td>24</td>
    <td>买饮料</td>
  </tr>
</table>

表格的常用属性

属性名	含义	属性值
border	定义表格的边框
cellpadding	定义单元格内容与边框的距离	默认为 1px
cellspacing	定义单元格与单元格之间的距离	默认为 2px
align	设置整体表格相对于浏览器窗口的水平对齐方式	left\|center\|right
width	设置表格的宽度	单位为 px
height	设置表格的高度	单位为 px
bgcolor	设置背景颜色	red,green等

注意：其余属性的使用和 border 类似，只需要在 table 标签中添加属性即可

单元格跨行和跨列

绘制表格的时候，我们常常需要合并单元格，而在 HTML 中提供了 colspan（合并行）和 rowspan（合并列）属性来帮助我们实现这一效果。

colspan 又称跨列，rowspan 又称跨行。

<table border="1" width="300px" height="150px">
  <h3>单元跨两行</h3>
  <tr>
    <th>姓名</th>
    <th colspan="2">电话</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>344 22 112</td>
    <td>211 32 123</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>433 31 212</td>
    <td>234 21 654</td>
  </tr>
</table>

<table border="1" cellspacing="0">
  <h3>单元跨两列</h3>
  <tr>
    <th>姓名</th>
    <td>张三</td>
  </tr>
  <tr>
    <th rowspan="2">电话</th>
    <td>344 22 112</td>
  </tr>
  <tr>
    <td>234 21 654</td>
  </tr>
</table>

注：设置 rowspan="2" 表示合并该列上的两个单元格，同样的我们可以通过设置 colspan 来合并行。合并之前，我们可以如例子般，先把所有的单元格都写出来，然后找出哪些单元格需要合并的，在第一个单元格内设置 rowspan 或者 colspan，并将其他多余的单元格代码删除。

div 应用

在网页中可以使用很多个 div，在网页制作中，使用 div 可以将网页中的任何元素布局到网页中的任何位置。

语法：

<div style="样式设置"><div></div></div>

div 和 table 的区别

div 布局：

<div style="width:100%;border:1px solid #d4d4d4">
  <div style="background-color:pink">实验楼</div>
  <div style="background-color:skyblue">实验楼</div>
</div>

table 布局：

<table style="width:100%;border:1px solid #d4d4d4">
  <tr>
    <td style="background-color:pink">
      实验楼
    </td>
  </tr>
  <tr>
    <td style="background-color:skyblue">
      实验楼
    </td>
  </tr>
</table>

同样的效果，使用 div 布局能比表格更加灵活，但是我们需要根据不同的场景使用不同的布局方式，现在我们来看看两种布局的优缺点。

table 元素布局：

优点：

理解比较简单。
不同的浏览器看到的效果一般相同。

缺点：

显示样式和数据绑定在一起。
布局的时候灵活度不高。
一个页面可能会有大量的 table 元素，代码冗余度高。
增加带宽。
搜索引擎不喜欢这样的布局。

div 元素布局：

优点：

符合 W3C 标准。
搜索引擎更加友好。
样式的调整更加方便，内容和样式的分离，使页面和样式的调整变得更加方便。
节省代宽，代码冗余度低。
表现和结构分离，在团队开发中更容易分工合作而减少相互关联性

小实战：课程表绘制

源码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>课程表</title>
  </head>
  <body>
    <table border="1" width="60%" bgcolor="pink" cellpadding="2">
      <caption>
        课程表
      </caption>
      <tr align="center">
        <td colspan="2">时间\日期</td>
        <td>一</td>
        <td>二</td>
        <td>三</td>
        <td>四</td>
        <td>五</td>
      </tr>

      <tr align="center">
        <td rowspan="2">上午</td>
        <td>9:30-10:15</td>
        <td>语文</td>
        <td>数学</td>
        <td>外语</td>
        <td>音乐</td>
        <td>体育</td>
      </tr>

      <tr align="center">
        <td>10:25-11:10</td>
        <td>数学</td>
        <td>数学</td>
        <td>物理</td>
        <td>化学</td>
        <td>生物</td>
      </tr>

      <tr>
        <td colspan="7">&nbsp;</td>
      </tr>

      <tr align="center">
        <td rowspan="2">下午</td>
        <td>14:30-15:15</td>
        <td>体育</td>
        <td>语文</td>
        <td>历史</td>
        <td>政治</td>
        <td>化学</td>
      </tr>

      <tr align="center">
        <td>15:25-16:10</td>
        <td>音乐</td>
        <td>语文</td>
        <td>数学</td>
        <td>美术</td>
        <td>语文</td>
      </tr>
    </table>
  </body>
</html>

html表单

HTML 表单是一个包含表单元素的区域，用于搜集不同类型的用户输入。

表单是网页中提供的一种交互式手段操作，生活中我们很容易接触到表单，比如网上注册一个账号

表单用于搜集不同类型的用户输入，表单由不同类型的标签组成，相关标签及属性用法如下：

1、<form>标签定义整体的表单区域

action属性定义表单数据提交地址
method属性定义表单提交的方式，一般有“get”方式和“post”方式

2、<label>标签为表单元素定义文字标注

3、<input>标签定义通用的表单元素

type属性
- type="text" 定义单行文本输入框
- type="password" 定义密码输入框
- type="radio" 定义单选框
- type="checkbox" 定义复选框
- type="file" 定义上传文件
- type="submit" 定义提交按钮
- type="reset" 定义重置按钮
- type="button" 定义一个普通按钮
- type="image" 定义图片作为提交按钮，用src属性定义图片地址
- type="hidden" 定义一个隐藏的表单域，用来存储值
value属性定义表单元素的值
name属性定义表单元素的名称，此名称是提交数据时的键名

4、<textarea>标签定义多行文本输入框

5、<select>标签定义下拉表单元素

6、<option>标签与<select>标签配合，定义下拉表单元素中的选项

注册表单实例：

<form action="http://www..." method="get">
<p>
<label>姓名：</label><input type="text" name="username" />
</p>
<p>
<label>密码：</label><input type="password" name="password" />
</p>
<p>
<label>性别：</label>
<input type="radio" name="gender" value="0" /> 男
<input type="radio" name="gender" value="1" /> 女
</p>
<p>
<label>爱好：</label>
<input type="checkbox" name="like" value="sing" /> 唱歌
<input type="checkbox" name="like" value="run" /> 跑步
<input type="checkbox" name="like" value="swiming" /> 游泳
</p>
<p>
<label>照片：</label>
<input type="file" name="person_pic">
</p>
<p>
<label>个人描述：</label>
<textarea name="about"></textarea>
</p>
<p>
<label>籍贯：</label>
<select name="site">
    <option value="0">北京</option>
    <option value="1">上海</option>
    <option value="2">广州</option>
    <option value="3">深圳</option>
</select>
</p>
<p>
<input type="submit" name="" value="提交">
<!-- input类型为submit定义提交按钮  
     还可以用图片控件代替submit按钮提交，一般会导致提交两次，不建议使用。如：
     <input type="image" src="xxx.gif">
-->
<input type="reset" name="" value="重置">
</p>
</form>

创建表单

<form> 标签用于创建 HTML 表单，常见的表单格式为：

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

name：定义表单的名字。
method：定义表单结果从浏览器传送到服务器的方式，默认参数为：get 。post 安全性更高，因此常用作传输密码等，而 get 安全性较低，一般用于查询数据。
action：定义表单数据提交地址。它的值必须是一个有效的 URL，可以是相对 URL 也可以是绝对 URL。如果没有提供此属性或者 action="#"，则数据将被发送到包含表单的页面的 URL。

插入表单对象

网页中的表单由许多不同的表单元素组成，这些表单元素包括文字字段、单选按钮、复选框、按钮等

文字字段

在网页中最常见的表单元素就是文字字段，用户可以在文字字段内输入字符或者单行文本。语法：

<input
  type="text"
  name="控件名称"
  value="文字字段的默认取值"
  size="控件的长度"
  maxlength="最长字符数"
/>

该语法包含了许多参数，除了 type 参数以外，其他的参数都是可选的，大家可以自行选择。举个例子：

<form name="formBox" method="post" action="">
  姓名：<input type="text" name="name" size="20" /><br />
  年龄:<input type="text" name="age" size="40" value="10" maxlength="3" />
</form>

可以尝试给年龄输入值，如果文本字段长度超过了 3，就不能再输入了。

密码输入框

密码输入框是一种特殊的文字字段，他的各个属性和文字字段是相同的，但是输入进密码输入框的字符全部是“*”表示，保证周围人看不见输入的文本。

<input type="password" name="pwd" />

单选按钮

单选按钮可以使用户从选择列表中选择一个选项。

<form name="formBox" method="post" action="">
  <input type="radio" name="sex" value="male" checked />男<br />
  <input type="radio" name="sex" value="female" />女
</form>

几个单选按钮可以连接在一起，只需要把它们的 name 值设置为相同的。同一组中只有一个按钮可以同时被选。如果没有选中任何一个，那么整个单选按钮池就被认为处于未知状态，且不会随表单提交。可以尝试如果 name 不相同或者没有 name 会是什么情况。

复选框

复选框可以让用户从一个选项列表中选择超出一个的选项。

<form name="formBox" method="post" action="">
  <input type="checkbox" name="music" checked />音乐<br />
  <input type="checkbox" name="art" />美术<br />
  <input type="checkbox" name="math" />数学<br />
</form>

复选框可以拥有自己的名字，并不需要属于一个组。

按钮

HTML 表单中，有三种按钮：提交按钮，重置按钮，匿名按钮。我们可以使用 <button> 元素或者 <input> 元素来创建一个按钮。type 属性的值指定显示什么类型的按钮。

提交按钮（submit）

用于发送表单数据给服务器。

语法：

<form name="formBox" method="post" action="">
  <input type="text" value="输入的内容" />
  <button type="submit">
    This a submit button
  </button>

  <!--or-->

  <input type="submit" value="This is a submit button" />
</form>

重置按钮（reset）

重置按钮用来清除用户在页面中输入的信息。

语法：

<form name="formBox" method="post" action="">
  <input type="text" />
  <button type="reset">
    This a reset button
  </button>

  <!--or-->

  <input type="reset" value="This is a reset button" />
</form>

在文本框中输入内容，点击按钮即可清除。

匿名按钮（button）

没有自动生效的按钮，但是可以使用 JavaScript 代码进行定制。如果你省略了 type 属性，那么这就是默认值。

语法：

<button type="button">
  This a anonymous button
</button>

<!--or-->
<button>
  This a anonymous button
</button>

<!--or-->
<input type="button" value="This is a anonymous button" />

不管使用的是 <button> 元素还是 <input> 元素，按钮的行为都是一样的。它们的不同点在于：

从前面的例子中也可以看出 <button> 元素允许你使用 HTML 内容作为其标记内容，但 <input> 元素只接受纯文本内容。
使用 <button> 元素，可以有一个不同于按钮标签的值（通过将其设置为 value 属性）。（但是在 IE 8 之前的版本中是不行的）。

菜单和列表

菜单和列表主要是用来选择给定答案中的一种，这类选择中往往答案比较多。

下拉菜单

下拉菜单能够节省页面空间，正常状态下显示一个选项，单击展开所以选项。

<form name="formBox" method="post" action="">
  <select name="select">
    <option value="成都">成都</option>
    <option value="广州">广州 </option>
    <option value="四川">四川</option>
    <option value="上海">上海</option>
  </select>
</form>

注意：下拉菜单的宽度是由 <option> 标记中包含的最长文本的宽度决定的。

列表项

在页面中列表项可以显示出几条信息，一旦超出这个信息量，在列表项右侧会出现滚动条，拖动滚动条可以看到所有选项。

<form name="formBox" method="post" action="">
  <select name="select" size="2" multiple="multiple">
    <option value="成都">成都</option>
    <option value="广州">广州 </option>
    <option value="四川">四川</option>
    <option value="上海">上海</option>
  </select>
</form>

size="2" 表示一次显示 2 条数据。

文本域

当用户想要填入多行文本时，就应该使用文本域而不是文本字段。文本域使用 <textarea> 标记。

<form name="formBox" method="post" action="">
  留下您的联系方式：
  <textarea name="textarea" cols="35" rows="5"></textarea>
</form>

clos 代表列数，rows 代表行数。

表单综合案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title></title>
</head>

<body>
    <form action="http://www..." method="get">
        <p>
            <label>姓名：</label><input type="text" name="username" />
        </p>
        <p>
            <label>密码：</label><input type="password" name="password" />
        </p>
        <p>
            <label>性别：</label>
            <input type="radio" name="gender" value="0" /> 男
            <input type="radio" name="gender" value="1" /> 女
        </p>
        <p>
            <label>爱好：</label>
            <input type="checkbox" name="like" value="sing" /> 唱歌
            <input type="checkbox" name="like" value="run" /> 跑步
            <input type="checkbox" name="like" value="swiming" /> 游泳
        </p>
        <p>
            <label>照片：</label>
            <input type="file" name="person_pic">
        </p>
        <p>
            <label>个人描述：</label>
            <textarea name="about"></textarea>
        </p>
        <p>
            <label>籍贯：</label>
            <select name="site">
                <option value="0">北京</option>
                <option value="1">上海</option>
                <option value="2">广州</option>
                <option value="3">深圳</option>
            </select>
        </p>
        <p>
            <input type="submit" name="" value="提交">
            <!-- input类型为submit定义提交按钮  
             还可以用图片控件代替submit按钮提交，一般会导致提交两次，不建议使用。如：
             <input type="image" src="xxx.gif">
        -->
            <input type="reset" name="" value="重置">
        </p>
    </form>
</body>

</html>

html框架的使用

使用框架，你可以在同一个浏览器窗口中显示不止一个页面。

语法：

<iframe src="URL">
  <!-- URL指向不同的页面 -->
</iframe>

iframe - 设置高度与宽度

属性默认以像素为单位,但是你可以指定其按比例显示 (如："60%")。

<iframe src="https://www.shiyanlou.com/" width="400" height="400"></iframe>

iframe - 移除边框

frameborder 属性用于定义 iframe 表示是否显示边框。设置属性值为 "0" 移除 iframe 的边框:

<iframe
  src="https://www.shiyanlou.com/"
  width="400"
  height="400"
  frameborder="0"
></iframe>

使用 iframe 来显示目标链接页面

iframe 可以显示一个目标链接的页面，目标链接的属性必须使用 iframe 的属性。

<p><a href="https://www.shiyanlou.com/" target="shiyanlou">实验楼</a></p>
<iframe width="400" height="400" name="shiyanlou"></iframe>

注：因为 a 标签的 target 属性是名为 shiyanlou 的 iframe 框架，所以在点击链接时页面会显示在 iframe 框架中。需要保证 iframe 框架的 name 属性的名称与 a 标签的 target 属性名一致。

posted @ 2020-09-04 17:35 城市炊烟阅读(147) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部