devbox
花生_TL007
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

前端HTML知识总结_下拉框是什么标签

作者：花生_TL007 | 2024-02-16 11:57:04

赞

踩

下拉框是什么标签

目录

1 HTML前言

1.1HTML介绍

1.2 web标准

2 HTML基本结构

2.1 结构

2.2 语法

2.3转义符

3 常用标签

3.1 常用的标签 

 3.2 表单标签

3.2.1 form的属性

 3.2.2 input标签

 3.2.3select标签

 3.2.4 textarea标签

3.3常用的一些属性

 3.4 a标签

3.5  img标签

3.5.1 img常见属性

3.5.2 位图

3.5.3多媒体标签

3.6表格布局

3.6.1 表格的属性

3.6.2 表格的嵌套

3.7 列表标签

3.8 多窗口框架

1 HTML前言

1.1HTML介绍

HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。

超文本是一种组织信息的，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便。

1.2 web标准

web标准有三层结构：分别是结构（html）,表现（css）和行为（Javascript）

其中结构类似人的身体，表现类似人的穿着，行为类似人的行为动作

理想状态下，他们三层相互独立，放在不同的文件中

2 HTML基本结构

2.1 结构

  1. <html>
  2.  
  3. <head>
  4.     <title>我的第一个网页</title>
  5. </head>
  6. <body>
  7.     我的第一个网页
  8. </body>
  9. </html>

              <head>......</head>网页头部：网页的标题与信息。

              <body>......</body>：主体部分：网页的主体内容，这里的东西都会在浏览器上面去呈现出来。

2.2 语法

        如上<body></body>等称之为标签，他们都有一个特点，都是成对出现的，而且第二个标签都有一个斜杠来表示闭合，否则都是开放标签，无法配对，从而引起页面的错乱，也有一些是单个出现的。

2.3转义符

 &nbsp;空格
&lt;<
&gt;>
&yen;￥
&quot;"
&copy;©
&reg;®
&plusmn;±
&permil;‰
&divide;÷
.............

3 常用标签

 

 

 

 

3.1 常用的标签 

< 标签名 属性 = "属性值">

 

 

 

 

 

 

 

 

 

 

 

 

 

 3.2 表单标签

<form 属性名称=“属性值”>

.......

</form>

表单标签一般会和input标签、textarea标签、select标签连用

例如：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>表单标签</title>
  5. </head>
  6. <body>
  7. <form>
  8. 用户名：<input type="text"><br>
  9. <input type="submit" value="按钮">
  10. </form>
  11. </body>
  12. </html>

3.2.1 form的属性

 文件路径例子：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>表单标签</title>
  5. </head>
  6. <body>
  7. <form action="..\demo01\demo04.html">
  8. 用户名：<input type="text"><br>
  9. <input type="submit" value="提交">
  10. </form>
  11. </body>
  12. </html>

 3.2.2 input标签

 <input type="元素类型" name="元素名称" value="元素值" id="客户唯一标识"

input的属性说明
checked默认选择
readonly字段只读不能修改
disabled表示input禁用 不可点击
autofocus默认光标的位置
requiredinput不能为空白提交
size
maxlength

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

例如：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>type属性</title>
  5. </head>
  6. <body>
  7. <div align="center">
  8. <h1>用户注册</h1>
  9. 2.3.2 select标签
  10. select标签表示下拉选择框
  11. 会和option标签连用 option表示的下拉选择框中的选项
  12. 属性：
  13. value ---- 选项的值
  14. name ---- 下拉框的名称
  15. selected ----- 默认被选中的选项
  16. multiple ----- 以列表的形式显示
  17. <form>
  18. 用户名：<input type="text" name="username" id="username"
  19. value="zhangsan" readonly="readonly" disabled="disabled"><br>
  20. 密码：<input type="password" name="password" autofocus><br>
  21. 确认密码：<input type="password" name="password" required><br>
  22. 请选择你的性别：<input type="radio" value="男" name="gender" checked>男
  23. <input type="radio" value="女" name="gender">女<br>
  24. <p>
  25. <input type="checkbox" value="跳舞" name="dance">跳舞
  26. <input type="checkbox" value="跳舞" name="dance">唱歌
  27. <input type="checkbox" value="跳舞" name="dance">打篮球
  28. <input type="checkbox" value="跳舞" name="dance">看书
  29. <input type="checkbox" value="跳舞" name="dance">说唱
  30. </p>
  31. <input type="submit" value="提交">
  32. <input type="reset" value="复位">
  33. <input type="button" value="按钮"><br>
  34. <!--<input type="image" src="..\images\按钮1.jpg">-->
  35. <input type="file">
  36. <input type="hidden">
  37. 请您输入您的邮箱：<input type="email">
  38. <input type="color">
  39. <input type="date">
  40. <input type="datetime-local">
  41. <input type="time">
  42. <input type="range">
  43. </form>
  44. </div>
  45. </body>
  46. </html>

 3.2.3select标签

 select标签表示下拉选择框    会和option标签连用 option表示的下拉选择框中的选项

select标签的属性说明
value选项的值
name下拉框的名称
selected默认被选中的选项
multiple以列表的形式显示

 例如：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>select</title>
  5. </head>
  6. <body>
  7. <form>
  8. 请选择您所在的城市：
  9. <select multiple="multiple">
  10. <option value="北京">北京</option>
  11. <option>上海</option>
  12. 2.3.3 textarea标签
  13. 语法结构：
  14. cols ---- 多少列 表示的是文本域的宽度
  15. rows --- 多少行 表示的文本域的高度
  16. 2.4 常用的一些属性
  17. 常用属性（以body标签为例）
  18. Text --- 文本颜色
  19. link ------ 超链接文本的颜色
  20. vlink --- 访问过的超链接的文本颜色
  21. Alink --- 激活超链接文本的颜色
  22. bgcolor ---- 背景颜色
  23. background --- 背景图片 一般不建议背景使用图片
  24. 背景图片和背景颜色同时存在时候要注意优先级的问题（自己下来看）
  25. <option>广州</option>
  26. <option selected="selected">重庆</option>
  27. </select>
  28. </form>
  29. </body>
  30. </html>

 3.2.4 textarea标签

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

cols-----多少列   表示的是文本域的宽度

rows-----多少行   表示的文本域的高度

例如：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>select</title>
  5. </head>
  6. <body>
  7. <form>
  8. <textarea cols="20" rows="5">阿福讲案例法案件发了软件上！！！！</textarea>
  9. </form>
  10. </body>
  11. </html>

3.3常用的一些属性

<label>标签         意义不太明确，一般会和input连用

常用属性（以body标签为例）

<a>-----超链接

例如：<a href="https://www.baidu.com/">点击我</a>

属性说明
跑马灯（弹幕） marquee 标签淘汰
direction-表示滚动的方向，值可以是left，right，up，down，默认为left
behavior表示滚动的方式，值可以是scroll（连续滚动）slide（滑动一次）alternate（往返滚动）
loop表示循环的次数，值是正整数，默认为无限循环
scrollamount-表示运动速度，值是正整数，默认为6
scrolldelay表示停顿时间，值是正整数，默认为0，单位似乎是毫秒
align--表示元素的垂直对齐方式，值可以是top，middle，bottom，默认为middle
bgcolor表示运动区域的背景色，值是16进制的RGB颜色，默认为白色
height、width表示运动区域的高度度和宽度，值是正整数（单位是像素）或百分数，默认 width=100% height为标签内元素的高度
hspace、vspace-表示元素到区域边界的水平距离和垂直距离，值是正整数，单位是像素。
οnmοuseοver=this.stop() οnmοuseοut=this.start()表示当鼠标移上区域的时候滚动停止，当鼠标 移开的时候又继续滚动。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 3.4 a标签

超链接标签，语法：

<a href="链接地址">链接别名</a>

Target属性值

值说明
_blank在新窗口中打开被链接文档
_self（默认）在相同的框架中打开被链接文档
_parent在父框架集中打开被链接文档
_top在整个窗口中打开被链接文档
framename在指定的框架中打开被链接文档

 

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title></title>
  5. </head>
  6. <body>
  7. <a href="https://www.baidu.com/">点击我</a>
  8. <a href="https://www.baidu.com/" target="_blank">点击我1</a>
  9. <a href="https://www.baidu.com/" target="_self">点击我2</a>
  10. </body>
  11. </html>

 锚点

  1. <body>
  2. <h3>XXX小说</h3>
  3. <a href="#01"><h5>第一章</h5></a>
  4. <a href="#02"><h5>第二章</h5></a>
  5. <a href="#03"><h5>第三章</h5></a>
  6. <a href="#04"><h5>第四章</h5></a>
  7. <a href="#05"><h5>第五章</h5></a>
  8. <a href="#06"><h5>第六章</h5></a>
  9. <p>
  10. <a id=“01”>第一章</a>
  11. .........
  12. </p>
  13. </body>

 回到顶部：

  1. <body>
  2. <a id="top"><h3>XXX小说</h3></a>
  3. <a href="#01"><h5>第一章</h5></a>
  4. <a href="#02"><h5>第二章</h5></a>
  5. 2.6 img标签
  6. 图片格式：GIF JPG PNG BMP
  7. 2.6.1 常见的属性
  8. src属性 ---- 指代图片的路径（相对路径和绝对路径）
  9. alt属性 ---- 表示的图像的代替文本（路径错误或者图片损坏或者浏览器的问题显示不出图片的时候）
  10. width 和 height ----- 控制图片的大小 单位可以使用px %
  11. border -------- 边框 默认边框的取值0 没有边框 >=1 数字越大边框就越大 （大小指的是边框的粗细）
  12. align ----位置 指的是文字和图片的位置 取值 center left right bottom middle top,默认的下对齐
  13. title ---- 图片标题 ，用来显示描述图片的文字，鼠标悬停在图片上的时候会出现的文字
  14. 注意：如果没有设置Alt属性的时候，title就是Alt的取值
  15. <a href="#03"><h5>第三章</h5></a>
  16. <a href="#04"><h5>第四章</h5></a>
  17. <a href="#05"><h5>第五章</h5></a>
  18. <a href="#06"><h5>第六章</h5></a>
  19. <p>
  20. <a id=“01”>第一章</a>
  21. .........
  22. </p>
  23. <a href="#top">回到顶部</a>
  24. </body>

3.5  img标签

插入图片，图片格式:GIF        JPG        PNG        BMP

3.5.1 img常见属性

格式：<img src="image/图片1.png" alt="哆啦">

img属性说明
src指代图片的路径（相对路径和绝对路径）
alt表示的图像的代替文本（路径错误或者图片损坏或者浏览器的问题显示不出图片的时候）
width 和 height控制图片的大小 单位可以使用px %
border边框 默认边框的取值0 没有边框 >=1 数字越大边框就越大 （大小指的是边框的粗细）
align-位置 指的是文字和图片的位置 取值 center left right bottom middle top,默认的下对齐
title图片标题 ，用来显示描述图片的文字，鼠标悬停在图片上的时候会出现的文字

注意：如果没有设置Alt属性的时候，title就是Alt的取值

 

  1. <body>
  2. 哆啦A梦<img src="images/图片1.png" alt="哆啦" width="200px" height="150px"
  3. border="1"><br>
  4. 哆啦A梦居中<img src="images/图片1.png" alt="哆啦" width="200px" height="150px"
  5. align="center"><br>
  6. 哆啦A梦居左<img src="images/图片1.png" alt="哆啦" width="200px" height="150px"
  7. align="left"><br>
  8. 哆啦A梦居中<img src="images/图片1.png" alt="哆啦" width="200px" height="150px"
  9. align="middle"><br>
  10. 哆啦A梦下对齐<img src="images/图片1.png" alt="哆啦" width="200px" height="150px"
  11. align="bottom"><br>
  12. 哆啦A梦上对齐<img src="images/图片1.png" alt="哆啦" width="200px" height="150px"
  13. align="top"><br>
  14. 哆啦A梦居右<img src="images/图片1.png" alt="哆啦" width="200px" height="150px"
  15. align="right"><br>
  16. </body>

3.5.2 位图

usemap属性

map标签和area标签连用

shape属性鼠标点击的形状
coords属性点击形状的大小
href属性表示跳转的路径

 例如：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title></title>
  5. </head>
  6. <body>
  7. <img src="images/猫咪.jpg" usemap="#image">
  8. <map name="image">
  9. <area shape="circle" coords="154,132,50" href="demo01.html"></area>
  10. </map>
  11. </body>
  12. </html>

3.5.3多媒体标签

视频标签 video 音频标签 audio

src表示音频和视频的文件位置（相对路径或者绝对路径）
controls表示的是显示播放器的组件
autoplay自动播放

 

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>音频和视频</title>
  5. </head>
  6. <body>
  7. <audio src="D:\重大城科\前端0601\第四天\video\汪苏泷 - 小星星.mp3" controls
  8. autoplay></audio>
  9. <video src="D:\重大城科\前端0601\第四天\video\花园宝宝2.mp4" controls autoplay>
  10. </video>
  11. </body>
  12. </html>

3.6表格布局

表格的作用：用来描述具有二维结构的数据

包括的标签有：table thead tbody tfoot tr td

table标签用于定义一个表格
thead定义表头
tr行
td列 单元格 必须放在tr
tbody主干
tfoot尾
  1. <!DOCTYPE html>
  2. <html>
  3. table标签 ------- 用于定义一个表格
  4. thead ---- 定义表头
  5. tr ---- 行
  6. td ---- 列 单元格 必须放在tr
  7. tbody --- 主干
  8. tfoot----- 尾
  9. 2.7.1 表格的属性
  10. 2.7.1.1 表格的边框
  11. border 属性 ------ 边框 取值是数字 单位是像素 当取值为0的时候表示没有边框（默认）大于0的时候表
  12. 格是有边框的，数值一定要为整数
  13. <head>
  14. <title>表格标签</title>
  15. </head>
  16. <body>
  17. <table border="1">
  18. <thead>
  19. <tr>
  20. <td>this text is in the thead</td>
  21. </tr>
  22. </thead>
  23. <tbody>
  24. <tr>
  25. <td>this text is in the tbody</td>
  26. </tr>
  27. </tbody>
  28. <tfoot>
  29. <tr>
  30. <td>this text is in the tfoot</td>
  31. </tr>
  32. </tfoot>
  33. </table>
  34. </body>
  35. </html>

 

3.6.1 表格的属性

表格属性说明
表格的边框border 属性- 边框 取值是数字 单位是像素 当取值为0的时候表示没有边框（默认）大于0的时候表 格是有边框的，数值一定要为整数
表格的宽和高width表示的是表格宽度（单位是像素，百分）
height表示表格高度（单位是像素，百分）
表格的对齐align表示的是表格对齐方式 left center right,默认是lef
表格的背景bgcolor表示的是表格的背景颜色
background表示背景图像
注意：表格的tr和td也是可以设置宽度和高度已经背景颜色
表格的间距和边距（默认都为2px）cellpadding表示表格边距（单元格内元素距离单元格边缘的距离）
cellspacing表示表格间距（单元格与单元格之间的距离）
表格合并rowspan="n"- n是一个整数，表示的是单元格在垂直方向跨的行数 单元格跨列-----合并的是列
colspan="n"n是一个整数，表示的是单元格在水平方向跨的列数

 设置表格高度和宽度：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>表格标签</title>
  5. </head>
  6. <body>
  7. <table border="1" width="200" height="100">
  8. <tr>
  9. <td>&nbsp;</td>
  10. <td>&nbsp;</td>
  11. </tr>
  12. <tr>
  13. <td>&nbsp;</td>
  14. <td>&nbsp;</td>
  15. </tr>
  16. </table>
  17. </body>
  18. </html>

 表格的对齐例子

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>表格标签</title>
  5. </head>
  6. <body>
  7. <table border="1" width="200" height="100" align="right">
  8. <tr>
  9. <td>&nbsp;</td>
  10. <td>&nbsp;</td>
  11. </tr>
  12. <tr>
  13. <td>&nbsp;</td>
  14. <td>&nbsp;</td>
  15. </tr>
  16. </table>
  17. </body>
  18. </html>

 表格背景

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>表格标签</title>
  5. </head>
  6. <body>
  7. <table border="1" width="200" height="100" align="center" background =
  8. "bg.jpg" bgcolor="#cccccc">
  9. <tr>
  10. <td >&nbsp;</td>
  11. <td>&nbsp;</td>
  12. </tr>
  13. <tr>
  14. <td>&nbsp;</td>
  15. <td>&nbsp;</td>
  16. </tr>
  17. </table>
  18. </body>
  19. </html>

3.6.2 表格的嵌套

表格嵌套指的是一个表格放在另一个表格单元格中。可以用来布局,如下

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>表格标签</title>
  5. </head>
  6. <body>
  7. <table width="300" border="1">
  8. <tr>
  9. <td>&nbsp;</td>
  10. <td>
  11. <table width="100" border="1" align="center">
  12. <tr>
  13. <td>&nbsp;</td>
  14. <td>&nbsp;</td>
  15. </tr>
  16. 2.7.3 表格合并
  17. 单元格跨行---- 合并的是行
  18. rowspan="n" ----- n是一个整数，表示的是单元格在垂直方向跨的行数
  19. 单元格跨列-----合并的是列
  20. </table>
  21. </td>
  22. </tr>
  23. </table>
  24. </body>
  25. </html>

3.7 列表标签

主要有三种----- 有序、无序、数据列表

列表标签属性说明
有序列表 oltype属性表示设置序号的种类，1、A、a、I、i,默认取值是1
start 属性控制开始序号的位置
reversed降序（反序）
无序列表 uldisc（默认）实心圆
clrcle空心圆
square实心方块

3.8 多窗口框架

一个页面可以显示多个窗口 ----- frameset

4.0版本 多窗口 5.0版本中 内嵌窗口

注意：如果要使用frameset标签，就不能和body标签连用

属性值说明
cols

plxels

%

*

定义框架集中列的数目和尺寸
rows定义框架集中行的数目和尺寸

例如

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title></title>
  5. </head>
  6. <frameset rows="15%,*,15%">
  7. <frame src="demo01.html"></frame>
  8. <frameset cols="25%,*">
  9. <frame src="demo02.html"></frame>
  10. <frame src="demo03.html"></frame>
  11. </frameset>
  12. <frame src="demo04.html"></frame>
  13. </frameset>
  14. </html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/花生_TL007/article/detail/92947
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号