Document

Html基础知识梳理

2023-11-01
dfer
440
html 前端 CSDN

一.web前端知识介绍

HTTP和URL

超文本传输协议(HyperText Transfer Protocol)
- 客户端浏览器与web服务器之间的应用层通信协议
- 所有的WWW文件都必须遵守这个标准
- 基于TCP/IP通信协议来传递数据（HTML 文件, 图片文件, 查询结果等）
统一资源定位符(Uniform Resource Locator)
- 协议://<115.239.211.112> [:端口号] / [ 路径 ] [ ? <查询信息> ]

主流浏览器

前端开发技术三要素

HTML:是网页内容的载体结构超文本标记语言：就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等（图片，视频，音频）
CSS:是网页外在表现层叠式样式表：就像网页的外衣。比如，标题字体、颜色变化，或加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现
Javascript:是用来实现网页上的特效与交互等行为如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的

W3C

World Wide Web Consortium（万维网联盟）创建于1994年10月在麻省理工学院计算机科学实验室成立。建立者是万维网的发明者蒂姆·伯纳斯·李（ Tim Berners-Lee ） W3C 最重要的工作是发展Web规范，这些规范描述了 Web 的通信协议（比如 HTML、XHTML、xml、 CSS 、DOM 、ECMAScript）和其他的构建模块

什么是HTML

超文本标记语言HTML（Hypertext Marked Language）

HTML 是用来描述网页的一种语言，（Hypertext）可以在文件中标识图片、链接、表格、文本等。
HTML不是一种编程语言，而是一种标记语言 (markup language)
HTML文件的后缀名.html 或 .htm
HTML 使用标记标签来描述网页
HTML由浏览器解释执行
- Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容

什么是css

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

什么是js

JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。

在1995年时，由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。

html的分类

html，xhtml和xml的定义

html即是超文本标记语言（Hyper Text Markup Language），是最早写网页的语言，但是由于时间早，规范不是很好，大小写混写且编码不规范；
xhtml即是升级版的html（Extensible Hyper Text Markup Language），对html进行了规范，编码更加严谨纯洁，也是一种过渡语言，html向xml过渡的语言；
xml即时可扩展标记语言（Extensible Markup Language），是一种跨平台语言，编码更自由，可以自由创建标签。
网页编码从html>>xhtml>>xml这个过程发展。

html，xhtml和xml的区别

xhtml对比与html，xhtml文档具有良好完整的排版，体现在两方面：a、元素必须要有结束标签；b、元素必须嵌套；
对于html的元素和属性，xhtml必须小写，因为xhtml是严格区分大小写的和html是不同的标签；
xhtml的属性值必须在引号之中；
xhtml不支持属性最小化，什么是属性最小化了？

为什么网页编码要从html>>xhtml>>xml这么发展？

话说早起的网页使用html语言编写的，但是它拥有三个严重的缺点： 1、编码不规范，结构混乱臃肿，需要智能的终端才能很好的显示； 2、表现和结构混乱，不利于开发和维护； 3、不能使用更多的网络设备，比如手机、PDA等；因此HTML需要发展才能解决这个问题，于是W3C又制定了XHTML，XHTML是HTML向XML 过度的一个桥梁。而xml是web发展的趋势。

面试题：HTML与XHTML——二者有什么区别 a. XHTML 元素必须被正确地嵌套。 b. XHTML 元素必须被关闭。 c. 标签名必须用小写字母。 d. XHTML 文档必须拥有根元素。

html的结构

<!DOCTYPE html>
<!-- html 根标签，表示整个网页，所有的内容都写在这个里面。 -->
<html lang="en">
<!-- 网页的头部，里面的内容是给浏览器看的，是⼀些网页的配置。除了title标签，其他的内容在浏览器都是不可见的。 -->
<head>
    <!-- 当前网页使用语言 -->
    <meta charset="UTF-8">
    <!-- 网页的标题。用户保存网站时，会使用这个标题作为默认标题。-->
    <title>Document</title>
</head>
<body>
    <!-- 网页的主体，里面的内容是给用户看的。-->
    hello world
</body>
</html>

声明

<!DOCTYPE html>

<!DOCTYPE html>

DTD：doctype definition 文档声明类型。作用：告诉浏览器使用HTML5.0的语法规范。 HTML从1993年的1.0版本，发展到现在的5.0版本。它和css，js的规范都是由⼀个非盈利的组织 w3，来制定和维护的。 4.0版本之后，将结构与样式进行了分离。 XHTML 1.0 语法要求比较严格。标签必须是小写，所有的属性都必须用双引号封闭，结束标签必须有反斜杠。严格程度：XHMTL1.0 strict > HTML4.01Strict > XHTML 1.0transitional > HTML4.01transitional

使用语言

<html lang="en">

当前页面使用的语言 lang="en" 英文页面使用 lang="zh-CN" 中文页面使用

编码方式

<meta charset="UTF-8">

当前网页使用的字符集。 常见的字符集： UTF-8：国际通用字库，涵盖了几乎所有人类的语言文字。 gb2312/gbk：中国字库，所有简体字，⼀些特殊符号；gbk：繁体。 UTF-8和gb2312的比较

UTF-8（更臃肿、加载更慢）> gb2312 （更小巧，加载更快）
UTF-8：字多，有各种国家的语⾔，但是保存尺寸大，文件臃肿；
gb2312：字少，只⽤中文和少数外语和符号，但是尺寸小，⽂件小巧。
比如：你们公司是做⽇本动漫的，经常出现⼀些⽇语动漫的名字，网页要使用UTF-8，如果用gb2312将无法显示日语。
腾讯网、支付宝都是使用gb2312。搜狐、京东、天猫使用的是UTF-8，保证字符集的数量。

安装编辑器

记事本、Dreamweaver 、Sublime Text 、Notepad++、Editplus 、VSCode……

HTML文档命名规范

应该只使用字母a-z，排序数字0-9，连字符（-），下划线（ _）和句点（.），任何其他字符可能给你带来麻烦，导致文件不能加载或页面加载不正确应该只使用字母a-z，排序数字0-9，连字符（-），下划线（ _）和句点（.），任何其他字符可能给你带来麻烦，导致文件不能加载或页面加载不正确
尽量以字母开头和使用小写字母
名称要有一定含义
不要忘记文件扩展名

HTML元素

HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码
HTML元素的内容是开始标签与结束标签之间的内容
某些 HTML 元素具有空内容,空元素在开始标签中进行关闭（以开始标签的结束而结束）比如：< br / >
大多数 HTML 元素拥有属性，提供了有关 HTML 元素的更多的信息
- 属性：在标记中使用属性=属性值名称/值对的形式，多个属性使用空格分开
- 属性的值可以使用单引号、双引号、不加引号（建议使用双引号）比如：name=“value”
属性名与属性值用=连接，中间不能有空格
⼀个标签内，可以有⼀个或多个属性
⼀个属性可以有多个属性值，全部在双引号内部，使⽤空格隔开。
属性写法格式：
- <标签名属性名=“属性值”></标签名>
- <标签名属性名=“属性值” />

注释

HTML注释可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们
注释标签: 在注释中不能再有注释在注释掉的标记之后，要保证还是一个结构完好的文档

head中可以添加的内容

< link > 标签定义两个连接文档之间的关系。href ,hreflang,rel ,type 。可以有多个 < script > 标签定义一段脚本，比如 JavaScript。type,src。可以有多个 < style > 标签定义文档中的样式。一般情况下只有一个 < title > 标签定义文档的标题。只能有一个

<head>
    <meta>  定义对页面的描述，可以有多个
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <meta http-equiv="refresh" content="5;url=http://www.baidu.com">
    //不写地址刷新本页面
    <meta name="robots" content="all" />//all,none,index文件将被检索，且页面链接可以被查询；网站优化的时候用
    <meta name="keywords" content="html w3c,w3c|w3c">3-5个
    <meta name="description" content="新蓝剑html课程">
    <meta name="author" content=“andy" />    
</head>

什么是web1、web2、web3

互联网的发展过程中，经常会出现一些名词，也可以称呼它们为专业术语吧，而玩网络的草根站长们很有必要知道和了解常见的术语。最近web3挺火，肯定有很多人会联想到web1、web2，那么今天周松松将全面地讲解一下web1、web2、web3是什么。

先说说它们的全称：web1即web1.0，web2即web2.0，web3即web3.0，它们分别是互联网诞生以来经历的3个时代和历史阶段。

Web1：互联网平台生产内容，用户只有浏览和阅读内容的权利； Web2：互联网平台的用户生产内容，平台对内容有所有权（平台能随意删除、封禁内容。平台倒闭了，内容也就没了）； Web3：互联网平台和用户是平等的关系，平台不能随意篡改和删除用户生产的内容，互联网平台具有去中心化（用户生产的内容会同步存储在多个节点上，一个节点上存储的内容消失了，其他节点上还有相同的内容）的显著特点。但web3的互联网平台也有一个致命的缺陷，即不被现实世界各国在法律上予以支持，或者说没有国家级的信任背书。

二.html标签

1. 什么是HTML

全称是 HyperText Markup Language 即超⽂本标记语⾔，⼀种⽤于创建⽹⻚的标准标记语⾔。

2. 如何创建⼀个HTML文件

想要使⽤HTML需要创建HTML文件，每个网页都是⼀个HTML文件，html文件就是以 .html 结尾的⽂件。在文件夹中右键新建文本文档，将文本文档修改后缀为 .html 即可。

<!DOCTYPE HTML>
<html>
</html>

3. HTML标签

标签语法

html是由标记（标签）组成的，标签由标签名和属性组成

3.1 标签写法

标签的写法 <标签名></标签名> 或者 <标签名 />

<!-- 标题 -->
<h1></h1>
<!-- 图片 -->
<img />

3.2 标签属性

在每个HTML标签上都由属性 <标签名属性名="属性值" 属性名="属性值"></标签名>

<h1 class="title"></h1>
<a href="https://www.baidu.com">百度</a>

3.3 标签分类

双标签和单标签
- 双标签：如： <h2></h2> 、<p></p>
- 单标签：如：<img/>、<input />
块级元素、⾏内元素和⾏内块级元素
- 块级元素：单独占⼀⾏，允许设置宽⾼值
- ⾏内元素：不会单独占⼀⾏，从左往右排列，设置宽⾼值不起效
- ⾏内块级元素：不会单独占⼀⾏，从左往右排列，能设置宽⾼值

4. 格式标签

4.1 标题标签

< h1~6 align= "left|right|center"> </h1~6>

4.2 段落标签 p 给⽂本添加⼀个段落的语义，告诉浏览器，哪些⽂字是⼀个段落

< p align="left|right|center" >< /p >

4.3 换行标签 (用来输入空行，而不是分割段落)

< br />

4.4 水平线标签

< hr width="" size="" align="" color="" noshade / >

4.5 无意义标签

< span>< /span > < div></ div >

用来组合文档中的行内元素，没有固定的格式表现，使用样式时，才有样式上的变化

5. 文本标签

字体标签 <font color="" face="" size="1~7" ></ font>

粗体标签 <b></ b>< strong></ strong>

斜体标签 <i></ i>< em></ em>

下划线标签 <u></ u><ins></ins>

删除线标签 <del></ del>

上标标签 <sup></ sup>

下标标签 <sub></ sub>

6. 字符实体

在 HTML 中，某些字符是预留的，比如HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签
如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体，比如<用 < 或< 表示
字符实体由三部分组成：
- 以&开始
- 中间为实体名或实体编号
- 以 ; 结束
实体名称便于记忆而实体编号的浏览器兼容性更好
实体名称区分大小写

7. 超链接标签

普通链接

基础语法：<a href="链接地址" target="blank | self" title="描述">文本或图片</ a>* *href：连接路径 target：标的意思，跳转后的网站是否在新标签页打开； blank新窗口跳转， self当前窗口跳转 title：鼠标悬浮显示文字

空链接 <a href="##"></a > 返回页面顶部 <a href="#"></a> 保持原位置 <a href=“javascript:; ></a > 脚本链接 <a href="javscript:alert('hello world')"></a> 电子邮件链接 <a href="mailto:邮箱地址"></a> 拨打电话 <a href="tel:电话号码"></a>

注意： a标签不仅可以给⽂字添加超链接，也可以给图⽚，视频，⾳频，表格等添加超链接。如果通过a标签的href属性指定⼀个URL，那么必须在地址前加上http://或者https://。

7.1 URL相对地址与绝对地址

协议://主机:端口号/文件/附加资源
http://www.yunhedata.com.cn/info.html?uname=tina&age=20&sex=female
相对URL: Images/logo.gif ../css/demo.css ../../js/demo.js ./admin/index.php
绝对URL: C:/appserv/www/image/logo.gif /usr/local/apache/htdocs/www/index.php http://www.yunhedata.com.cn/

7.2 锚点链接

使用 name 属性创建 HTML 页面中的锚点
当使用锚时，我们可以创建直接跳至该命名锚的链接，这样使用者就无需不停地滚动页面来寻找他们需要的信息了
步骤
1. 创建锚点 < a name="锚点名称"></ a>
2. 链接到锚点同一页面 : < a href="#锚点名称"></ a> 不同页面 : < a href="目标文档URL# 锚点名称">< /a>

8. 图片标签

基础语法： src source的缩写，来源，表示图⽚的来源、路径。必须的属性 alt 图像无法显示时的替代文本，搜索引擎可以通过它指定的文字搜索该图片 width 图片宽度 height 图片高度 border 图片边框

设计网页时经常使用的图片有三种格式：

GIF -- 最多支持256色,支持透明,支持多帧动画显示效果.
JPEG | JPG-- 支持多种颜色,可以有很高的压缩比,使用了有损压缩,不支持透明,不支持动画效果.256_256_256
PNG -- 是一种新的图片技术,可以表现品质比较高的图片,使用了无损压缩,支持透明,不支持动画

8.1 热点地图

<img  src="" alt="" usemap="#test">
<map name="test"  id="test">
    <area shape="rect" coords="x1,y1,x2,y2" alt="" href=""/>
    <area shape="circle" coords="x,y,r" alt="" href=""/>
    <area shape="poly" coords="x1,y1,x2,y2,……,xn,yn" alt="" href=""/>
</map>

area 元素永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域中的 usemap 属性可引用中的 id 或 name 属性（取决于浏览器），所以我们应同时向添加 id 和 name 属性

9. 视频标签【html5新增的标签】

<!-- 音频或者视频 -->
<object data="../video/Tomorrow.mp4" height="200" width="200"></object>
<!-- 音频或者视频 -->
<embed src="../video/Tomorrow.mp4" height="200" width="200">
<!-- 音频 -->
<audio src="../那一年.mp3"></audio>
    audio 音频元素；用于嵌入一个 音频文件
    src 音频文件的URL
    controls 显示播放控件
    autopaly 表示立刻播放
    preload 预先载入音频文件数据
<!-- 视频 -->
<video src="movie.mp4" controls="" width="400" muted="" poster="cover.jpg" loop="">
    video 视频播放元素
    src 视频资源的URL
    controls 表示显示播放控件
    autoplay 自动播放,目前不能使用
    muted 表示静音
    poster 指定视频载入时显示的图片封面
    loop 反复播放
    preload 预先加载

注意：如果你无法看到该视频,那么可能你的电脑不支持该文件格式 <object > 标签用于包含对象，比如图像、音频、视频、Java applets、ActiveX、PDF 以及 Flash。 <embed >标签是html5中新标签，几乎所有浏览器都支持。拥有width、height、src、type(src引用文件的MIME 类型)四个属性 embed是针对非IE的浏览器（如火狐、chrome）的媒体播放器; object是针对IE浏览器标签

10. 列表标签

分类：有序列表，无序列表，自定义列表如果想要在页面上显示新闻业的内容，或者显示一列文字，可以使用列表如图所示，百度新闻，腾讯新闻，网易新闻；还有一类用作网站栏目，比如小米官网栏目

<ul type="disc|square|circle">
     <li>1</li>
     <li>2</li>
     <li>3</li>
     <li>6</li>
</ul>
<ol type="a|A|i|I" start="num">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>6</li>
</ol>
<!-- 
ul 元素表示这是一个无序列表 
li 元素表示表内部的列表项，每一条
-->
disc默认值实心圆，square正方形，circle空心圆

ul：unordered list 无序列表 ol：ordered list 有序列表

10.1图文并茂

<figure>
    <figcaption>这是一张图</figcaption>
    <img src="1.png" width="200">
</figure>
<!-- 
figure 插图元素
figcaption 表示插图的标题内容 说明
-->

11. 表格标签

11.1 表格基础标签

在过去表格标签⽤的⾮常多，很多⽹站都是⽤表格标签进⾏布局，展示数据的。

table：表格
tr：table rows ⾏
td：table dock 单元格

表格标签之间是相互嵌套的。table>tr>td 如果我们需要添加表头的语义，可以使⽤⼀个新的标签，th标签，th：table head 表示表头单元格，替换的是td的位置，table>tr>th

<table>
    <tr>
        <th></th>
        <th></th>
        <th></th>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

表格宽高

表格的宽和⾼默认是按照内容的尺⼨⾃适应调整的。我们可以通过给table标签和td标签设置width/heigh属性的⽅式来指定表格/单元格的宽/⾼。如果给td设置width和height，会修改当前单元格的宽和⾼，但不会影响这个表格的宽和高。

11.2 属性

border：表格边框 cellpadding：单元格内的空间 cellspacing：单元格之间的空间 align：内容⽔平对⻬⽅式 valign：内容垂直对⻬⽅式

<table border="1" width="600px" height="200px" cellpadding="0" cellspacing="0" align="center">
    <tr align="center" valign="middle">
        <td>疾⻛剑豪</td>
        <td>中单</td>
        <td>狂⻛绝息斩</td>
        <td>6300</td>
    </tr>
    <tr>
        <td>疾⻛剑豪</td>
        <td>中单</td>
        <td>狂⻛绝息斩</td>
        <td>6300</td>
    </tr>
    <tr>
        <td>疾⻛剑豪</td>
        <td>中单</td>
        <td>狂⻛绝息斩</td>
        <td>6300</td>
    </tr>
</table>

11.3 合并单元格

rowspan：合并列方向单元格 colspan：合并行方向单元格属性值是⼀些数字，表示合并单元格的数量上边线在同⼀⾏的，就算在同⼀⾏

<table border="1">
    <tr>
        <td colspan="2">UZIYYDS</td>
        <td>adc</td>
        <td>我去洗个澡</td>
        <td>4800</td>
    </tr>
    <tr>
        <td>孤⼉索</td>
        <td>疾⻛剑豪</td>
        <td>中单</td>
        <td>狂⻛绝息斩</td>
        <td rowspan="2">6300</td>
    </tr>
    <tr>
        <td>⼈⻢</td>
        <td>战争之影</td>
        <td>打野</td>
        <td>⻢踏⻜箭</td>
    </tr>
</table>

11.4 表格分区

标题：caption 表头：thead 页脚：tfoot 主体：tbody 语义化标签。 tfoot的位置在thead与tbody之间这四个表格分区标签本身没有任何样式，仅仅是⼀个区块划分标记罢了

<table width="600" border="1" align="center" cellpadding="0" cellspacing="0">
  <caption>学生信息表</caption>
  <thead>
  <tr align="" valign="" bgcolor="">
    <th>姓名</th>
    <th>性别</th>
    <th>年龄</th>
    <th>班级</th>
  </tr>
  </thead>
  <tfoot>
  <tr>
    <td>章三</td>
    <td rowspan="2">男</td>
    <td>19</td>
    <td>java</td>
  </tr>
  <tr>
    <td>大张伟</td>
    <td>18</td>
    <td rowspan="2">python</td>
  </tr>
  <tr>
    <td>章子怡</td>
    <td>女</td>
    <td>19</td>
  </tr>
  </tfoot>
</table>

table 元素表示一个表格的声明 tr 元素表示表格的一行 td 元素表示一个单元格默认的 table 表格是没有边框的 border属性表示增加一个边框 th 为表格添加标题单元格实际作用就是内部文字居中加 td th均属于单元格，包含2个属性 colspan rowspan colspan 表示合并一行所在列合并 rolspan 表示合并一列所在行合并

面试题：请阐述table的缺点

a. 太深的嵌套，比如table>tr>td>h3，会导致搜索引擎读取困难，而且，最直接的损失就是大大增加了冗余代码量。 b. 灵活性差，比如要将tr设置border等属性，是不行的，得通过td c. 代码臃肿，当在table中套用table的时候，阅读代码会显得异常混乱 d. 混乱的colspan与rowspan，用来布局时，频繁使用他们会造成整个文档顺序混乱。 e. 不够语义

table表格布局案例：蓝色理想

12.详情标签

detail 字面意思是 "详情"，在markdown里也经常用，用该标签包裹了的内容默认会被隐藏，只留下一个简述的文字，我们点击以后才会展示详细的内容

<details>
  <summary>点击查看更多</summary>
  <p>我是一段被隐藏的内容</p>
</details>

三.from表单和框架

1. form表单

表单在网页中主要负责数据采集功能。

一个表单有三个基本组成部分：

表单标签：这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。

表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。

表单按钮：包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。

<form  action=""  method=""  enctype=""   name="" >
  表单元素
  ……
</form>

action：属性用来设置接收和处理浏览器递交的表单内容的服务器程序的URL method：属性用来定义浏览器将表单中的信息提交给服务器端的处理程序的方式，取值可以为：GET或POST. enctype：属性指示浏览器使用哪种编码方法将表单数据传送给www服务器。该属性可以有两种取值：

application/x-www-form-urlencoded（默认的设置，没有文件上传可以不加）
multipart/form-data (有文件上传)

2. 表单的作用

搜集不同类型的用户输入信息表单是由网页上可以提供用户输入和选择的⼀些控件（表单元素）组成的

3.1 单行文本框

属性：type="text"

<input  type="text"   name=""  size=""   maxlength="" placeholder='' value="" />
<!--
type：值为text为单行文本框
size: 文本框的长度
maxlength：文本框可以输入内容的最大长度
placeholder：占位符
value：输入的内文本
name：自定义名称
-->

3.2 密码框

属性：type="password"

<input  type="password"   name=""  size=""   maxlength=""  value="" />

多行文本框

<textarea name="" cols="" rows="" ></textarea>

注意：默认点击边框有一个蓝色的边框 input:focus{ outline: 0;}

3.3 单选框

属性：type="radio"

<input type="radio" name="" value="" checked="checked" />
<!-- type：radio表示单选框 checked：默认选中 -->

注意：单选框name值相同则为同一按钮组；单选框中被提交的值是value中的值

3.4 label

当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上

<form> <label for="male">男</label> <input type="radio" name="sex" id="male" /> 
</form>

for属性：规定 label 绑定到哪个表单元素 < label > 标签的 for 属性应当与相关元素的 id 属性相同

3.5 复选框

属性：type="checkbox"

<input type="checkbox" name="hobby[]" value="乒乓球">
<input type="checkbox" name="hobby[]" value="篮球">
<input type="checkbox" name="hobby[]" value="羽毛球">
<input type="checkbox" name="hobby[]" value="网球">

注意：复选框name值必须为同名数组则为同一按钮组

3.6 下拉菜单

<!-- 单选下拉菜单 -->
<select name=""   size=""  >
  <optgroup label=分组名称>
      <option value= " "   selected=selected></option>
        ……
    </optgroup>
 </select>
<!-- 多选下拉菜单 -->
<select name=""   size=""  multiple= "multiple" >
  <optgroup label=分组名称>
      <option value=""   selected=selected></option>
        ……
    </optgroup>
 </select>

size：下拉菜单的高度 multiple：多重的，多个的

3.7 浏览框

<input type="file" name="" accept="" />

accept：限制文件上传格式 accept=".csv" 上传.csv格式 accept="application/vnd.ms-excel" 上传.xls格式 accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" 上传.xslx格式 accept="text/plain" 上传.png/.jpg/etc格式 accept="image/" 上传图片格式 accept="text/html" 上传.htm,.html格式 accept="video/" 上传video(.avi, .mpg, .mpeg, .mp4)格式 accept="audio/ *" 上传audio(.mp3, .wav, etc)格式 accept=".pdf" 上传.pdf格式 accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel" 如果限制两种文件格式，同时限制注意：表单提交方式必须为post form必须设置属性enctype="multipart/form-data"" 上传video(.avi, .mpg, .mpeg, .mp4)格式 accept="audio/ *" 上传audio(.mp3, .wav, etc)格式 accept=".pdf" 上传.pdf格式 accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel" 如果限制两种文件格式，同时限制注意：表单提交方式必须为post form必须设置属性enctype="multipart/form-data"

3.8 隐藏域

<input type= " hidden" name="" value="" />

注意：隐藏域不会在页面的显示隐藏域的值仍会被提交到服务器

3.9 按钮

按钮有三种：普通、提交、重置

普通 type="button" 配合js完成⼀些操作
重置 type="reset" 重置表单数据有默认的按钮标题。
提交 type="submit" 提交表单

提交按钮

<input type= "submit" name="" value=""/>

重置按钮

<input type= "reset" name="" value=""/>

普通按钮

<input type= "button" name="" value=""/>

图片按钮

<input type= "image" src="" name="" value=""/>

3.10 readonly和disable属性

readonly

readonly 属性规定输入字段为只读,但其value值仍会被表单提交 readonly属性只针对text、password和textarea有效

disabled

disabled属性规定禁用该表单元素，其value值不会被表单提交 disabled属性对所有表单元素均有效，包括select, radio, checkbox, button等使用disabled属性后表单元素背景会变成灰色

表单属性总结

3.11 fieldset

fieldset元素可将表单内的相关元素分组

<form>
  <fieldset>
    <legend>输入相关信息</legend>
    username: <input type="text" />
    password: <input type="password" />
  </fieldset>
</form>

4. frameset框架集

<frameset  rows| cols="10%,*，20%" >
     <frame  name="" src=""  noresize="noresize"  scrolling="yes/no/auto" />
     <frame  name="" src="" >
</frameset>

frameset属性

rows 行数
cols 列数
frameborder 0/1 规定是否显示框架边框
border 设置边框粗细

frame属性

noresize 规定无法调整框架的大小
scrolling yes/no/auto 规定框架是否出现滚动条

注：不能将标签与标签嵌套使用

4.1 frameset跳转

跳转到frame指定板块

给对应的frame定义name名字 < frame name="right" src="left.html"/ > 修改跳转方式 < a href="one.html" target="right">第一页

noframes

<frameset cols = "25%,*"> 
  <noframes> 
    <body>
      你的浏览器不支持框架
    </body> 
  </noframes> 
  <frame src ="" /> 
  <frame src ="" /> 
</frameset>

noframes 元素可为那些不支持框架的浏览器显示文本必须把其中的文本包装在标签中在XHTML 1.0 Strict DTD 中，标签是不被允许

5. iframe内连框架【了解】

<iframe name="" src="" frameborder="0|1" width="" height="" scrolling="no|auto|yes"></iframe>

name:规定 iframe 的名称 src:规定在 iframe 中显示的文档的 URL width:规定 iframe 的宽度 height:规定 iframe 的高度 scrolling:规定是否在 iframe 中显示滚动条

5.1 iframe跳转

<iframe name="" src="" frameborder="0|1" width="" height="" scrolling="no|auto|yes"></iframe>
<a href="http://www.baidu.com" target='_top|_parent'>百度</a>

四.总结

1、区块

div标签和span标签 a、一个是块元素，一个是行内元素 b、span 内只能放文本、图片、表单元素注意：span里面不能放p、h、ul、dl、ol、div等标签

2、表单元素

form 表示表单
- action 是表单的提交地址
- method 有get和post两个值
  - get是明文显示，不安全
  - post是隐藏显示，安全
- enctype 当有文件上传时，必须要有当前的属性值
input 标签
- type="text" 文本输入框
  - value 默认值
  - placeholder 输入提示
  - maxlength 最大字符长度
  - minlength 最小字符长度
  - autofocus 自动获取当前焦点
- type="password" 密码输入框
  - value 默认值
  - placeholder 输入提示
  - autofocus 自动获取当前焦点
- type="radio" 单选
  - name 是当前需要选择的一组值的名字
  - value 选中值
  - checked 选中当前值
- type="checkbox" 多选
  - name 是当前需要选择的一组值的名字
  - value 选中值
- type="button" 普通按钮
- type="submit" 提交按钮
  - value 是按钮的文本内容
  - 提交当前表单的数据
- type="reset" 重置按钮
  - value 是按钮的文本内容
  - 重置当前表单的数据，恢复默认值
- type="file" 文件提交
  - 跟form属性enctype一起使用
- type="hidden" 隐藏域
  - 隐藏当前页面中，需要用，但是不需要给用户展示的内容
  - 数据值会提交给后台
- type="image" 图片提交按钮
  - src 图片的地址
  - alt="submit" 提交按钮
label 标签
- input 设置 id 值，label 属性 for 保持一致
textarea 文本域
- rows 显示的行数
- cols 显示的列数
select 下拉菜单
- 要与 option 一起使用
- multipe 多重选择，配合键盘的 ctrl + 鼠标单击键
- size 显示的数量
fieldset 标签
- legend 显示标题

3、通用属性

name 提交到服务器需要识别的名字，需要首先设置
value 当前的表单元素的值
required 必选项
- 与 disabled 一起使用未生效
disabled 禁用当前表单元素
readonly 只读，只能看不能编辑
- 只针对输入类型生效

上一篇：基于php的环保网站

下一篇： HTML光速入门--