HTML笔记整理2 -- HTML标签

  • HTML注释
  • 关于标签(标记)
    • 标记的分类
    • 标记的属性
  • 重要的标记
    • ``标签
    • ``标签
      • meta标签中的 --- 字符编码问题
  • 常用标记
    • 常用标记-1---Web页面初步设计
      • 1. 标题字标记
      • 2. 添加空格与特殊符号
    • 常用标记-2---格式化文本标记
      • 1. 文本修饰标记
      • 2. font 字体标记
      • 3. 计算机输出标记
      • 4. 引用和术语标记
    • 常用标记-3---段落与排版标记
      • 1. p 段落标记
      • 2. br 换行标记
      • 3. hr 水平分隔线标记
      • 4. blockquote 段落缩进标记
      • 5. pre 预格式化标记
      • 6. ruby和rt/rp 拼音/音标注释标记
  • 标签---列表
    • 无序列表 unordered list
    • 有序列表 ordered list
    • 定义列表 definition list
  • 标签---超链接
    • 分类
    • 超链接的应用
      • 1. 空链接
      • 2. HTTP文件下载超链接
      • 3. FTP站点访问超链接
      • 4. 电子邮件超链接
      • 5. 页面书签链接(锚链接)
  • ==统一资源定位符URL==
    • 1. 绝对路径
    • 2. 相对路径
    • 3. 根路径
  • 标签---框架
    • 在指定框架中显示页面
  • 标签---浮动框架(内联框架)
  • 标签---图片
  • 标签---滚动文字
  • 标签---音频、视频、flash文件
  • 标签---表格
    • 与表格相关的标记
    • table属性
    • td属性
      • 单元格中数据的对齐方式
      • 合并单元格
    • 表格应用---拼版
      • 表格拼版的特性
      • 表格布局注意点
  • 标签---表单
    • 表单域
    • 表单属性
      • action属性
      • method属性
    • 表单元素
      • 文本框(单行文本)
      • 密码框
      • 单选框
      • 复选框
      • 下拉菜单
      • 下拉列表
      • 文本域(多行文本)
      • 提交按钮
      • 重置按钮
      • 普通按钮

HTML注释

  1. <!--注释信息-->
  2. <comment>注释信息</comment>(很多浏览器会显示,不建议使用)

关于标签(标记)

标记的分类

标记分为两类:容器标记 和 空标记。

容器标记成对出现的标记—双标记

  • 比如:<p></p>

空标记不成对出现的标记—单标记

  • 比如:</br>

标记的属性

每个标记就是一个对象,每个对象都有属性。
一个对象有多个属性,属性和属性之间的关系是无序的。

格式:<元素 属性1=“值” 属性2=“值” …>

  • 比如:<hr width="300" color="#FF0000" size="15">

重要的标记

<!DOCTYPE>标签

:即Document Type

作用:告知浏览器文档使用哪种HTML或XHTML规范。

  • <!DOCTYPE> 声明必须是 HTML 文档的第一行,位于 标签之前。
  • 声明不是 HTML 标签;它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。

详细资料查询:http://www.w3school.com.cn/tags/tag_doctype.asp

<meta>标签

作用

  1. 给搜索引擎搜索
  2. 告知浏览器使用什么编码。告知浏览器使用什么编码。
  • 例如:
    <meta http-equiv="Content-Type" content="text/html";charset="utf-8" />用于字符编码
    <meta name="keywords" content="meta标签的使用" />用于关键字
    <meta name="description" content="使用meta标签" />用于描述

meta标签中的 — 字符编码问题

  • 在head中插入<meta charset="UTF-8">
    charset作用:用来告诉浏览器用什么编码解析页面代码,这个编码要和文件编码一致。

常用字符编码:gb2312 简体中文、gbk 简体中文、utf-8 通用编码(推荐使用)

  • 关于查看时的乱码问题:记事本默认编码方式是ANSI,而ANSI编码与操作系统有关,如果出现乱码一般是与中文编码有关。浏览器打开时默认会用UTF-8编码方式打开,遇到中文会出现乱码。
  • 在查看时解决中文乱码:设置浏览器查看的字符编码为GB2312。

常用标记

常用标记-1—Web页面初步设计

1. 标题字标记

  • 标题字标记是Heading简称。
  • h1~ h6属于块级标记,浏览器会自动在标题前后添加空行。

格式
<h1 aligh="left|center|right|justify"></h1>:一级标题(最大)
<h2 aligh="left|center|right|justify"></h2>:二级标题
<h3 aligh="left|center|right|justify"></h3>:三级标题
<h4 aligh="left|center|right|justify"></h4>:四级标题
<h5 aligh="left|center|right|justify"></h5>:五级标题
<h6 aligh="left|center|right|justify"></h6>:六级标题(最小)

  • 标题字标记的aligh属性包含左对齐、居中对齐、右对齐、两端对齐。
  • h1到h6,标题也是有权重的。

2. 添加空格与特殊符号

特殊字符与对应代码如下:

&nbsp; 即空格
<&lt; 即less than
>&gt; 即greater than
&&amp; 即&符号
"&quot; 即双引号
© : &copy; 即版权
® :&reg; 即注册商标
× :&times; 即乘号
÷ :&divide; 即除号

常用标记-2—格式化文本标记

1. 文本修饰标记

  1. <b></b>:粗体

  2. <i></i>:斜体

  3. <strong></strong>:(通过加粗)强调

  4. <em></em>:(通过倾斜)强调

  • 对比: 从外观上来看<b><strong><i><em>是一样的,但是对SEO(搜索引擎优化)影响很大。<b><i>仅仅是字体,没有强调的作用,在实际工作中建议使用强调标记。
  1. <u></u>:下划线
  2. <del></del>:删除线
  3. <sup></sup>:top 上标
  4. <sub></sub>:bottom 下标
  5. <small></small>:变小字号
  6. <big></big> :变大字号
  • 注意:成对的标记要注意内外嵌套关系。即使嵌套出现问题也不报错。因为HTML语言具有宽容性。
  • 常用标记的应用代码如下:
<html><head><title>欢迎进入html世界</title></head><body><p><b>锄禾日当午,</b><br><i>汗滴禾下土。</i><br><u>谁知盘中餐,</u><br><b><u><i>粒粒皆辛苦。</i></u></b></p><hr><strong>床前明月光,疑是地上霜。</strong><em>举头望明月,低头思故乡。</em><hr>x<sup>2</sup>+y<sup>2</sup>=z<sup>3<sup> <br>Fe<sub>3</sub>O<sub>4</sub>  <br></body>
</html>
  • 效果如下:

<br /> 欢迎进入html世界<br />

锄禾日当午,
汗滴禾下土。
谁知盘中餐,
粒粒皆辛苦。


床前明月光,疑是地上霜。 举头望明月,低头思故乡。


x 2+y 2=z 3
Fe3O4

  • 效果结束

2. font 字体标记

默认情况下,IE浏览器会把字体显示为 3号、黑色、宋体

格式<font face="" size="" color="" ></font>

属性

  1. face:取值字体1,字体2,,字体n;即face属性可以有多个值,由逗号,隔开,且字体使用方式为从左往右依次使用。如果前面字体不存在,则使用后一个;若都不存在,则默认使用“宋体”。
  2. size:取值+1~ +71~ 7-1~ -7 ;即"+“表示比原字体大,”-"表示比原字体小。
  3. color:取值rgb(r,g,b)rgb(r%,g%,b%)#rrggbb 或 #rgb 或 colorname;即rgb函数、十六进制数、颜色英文名称比如red,green,blue等。

3. 计算机输出标记

  1. <code></code>:计算机代码
  2. <kbd></kbd>:键盘码
  3. <samp></samp>:计算机代码样本
  4. <tt></tt>:打字机代码
  5. <var></var>:变量
  6. <pre></pre>:预格式文本

4. 引用和术语标记

  1. <abbr></abbr>:缩写
  2. <address></address>:地址
  3. <blockquote></blockquote>:长的引用
  4. <cite></cite>:引用、引证
  5. <q></q>:短引用语(IE看不到引号,其他可以)
  6. <dfn></dfn>:一个定义项目

常用标记-3—段落与排版标记

1. p 段落标记

  • 它是一个块级标记,该标记不能再包含其他的任何块标记。

效果:自动在其前后创建一些空白,浏览器自动添加空间。
格式<p aligh="left|center|right|justify"></p>

  • 段落p的aligh属性包含左对齐、居中对齐、右对齐、两端对齐。

2. br 换行标记

格式:<br><br />

注意:换段区别于换行,换段的间距大于换行的间距。

3. hr 水平分隔线标记

格式<hr width="" size="" color="" aligh="" noshade>
属性

  1. width:取值像素(px)或百分比;即设置水平线宽度。
  2. size:取整数,单位px;即设置水平线高度。
  3. color:取rbg函数、十六进制数、颜色英文名称;即设置水平线颜色。
  4. aligh: 取值left|center|right;即设置水平线对齐方式。

4. blockquote 段落缩进标记

  • 它是一个块级标记,常称为块级引用标记。

效果:向右缩进5个英文字符的位置,并在其内容的周围增加外边距。
格式<blockquote></blockquote>

5. pre 预格式化标记

效果:浏览器保留设计者在源文件中所定义的格式,包括各种空格、缩进以及其他特殊格式,
文本也会呈现为等宽字体。
格式<pre></pre>
作用:pre标签主要用来做调试,用来表示计算机的源代码。

  • 注意:pre标签不用来做拼版。

6. ruby和rt/rp 拼音/音标注释标记

ruby标记有一个或多个字符(需要解释/发音)和一个提供该信息的rt标记组成,还包括可选的rp标记,定义当浏览器不支持ruby标记时显示的内容。

格式例子:

<ruby>中<rt><rp>(</rp>zhong<rp>)</rp></rt>国<rt><rp>(</rp>guo<rp>)</rp></rt>
</ruby>
  • ruby:包围需要注释的文字。
  • rt:放置音标或注释。
  • rp:防备那些不支持ruby标记的浏览器,主要用来放置括号;对于支持这个标记的浏览器,rp标记的css样式是{display:none;}即不可见。

标签—列表

  • 无序列表<ul></ul>

    • 菜单列表<menu></menu>
    • 目录列表 <dir></dir>
  • 有序列表<ol></ol>
  • 定义列表<dl></dl>

无序列表 unordered list

格式

<ul type=""><li type="">无序列表内容1</li><li type="">无序列表内容2</li>...
</ul>
  • 无序列表标签是<ul>,每一项是<li>标签

属性
type:取值disc实心圆(默认)、circle空心圆、square实心正方形;即表示无序列表前的显示风格。

  • 设置ul标记的type属性会使其所包含的列表项li按统一风格显示,设置其中某一列表项的type属性值时只会影响它自身的显示风格,其他列表项按原样显示。

有序列表 ordered list

格式

<ol type=""><li type="">有序列表内容1</li><li type="">有序列表内容2</li>...
</ol>
  • 有序列表标签是<ol>,每一项是<li>标签

1)列表ol标记的属性

  1. type:取值1数字编号(默认)、A大写字母编号、a小写字母编号、I大写罗马字母编号、i小写罗马字母编号;即列表项li前面的编号类型,编号是有序的。
  2. start:取值整数(如1、2、3…);即表示该列表从第几个开始 。

2)列表项li标记的属性

  1. type:取值同ul的type属性;但只影响当前列表项li编号类型,不影响后续列表项。
  2. value:取值捅ul的start属性;即改变当前列表项编号的值,并影响其后所有列表项的编号。

定义列表 definition list

效果:定义列表的每一列表项前面既没有符号,也没有编号。
格式

<dl><dt>项目1</dt><dd>描述1</dd><dd>描述2</dd><dd>描述3</dd><dt>项目2</dt><dd>描述1</dd><dd>描述2</dd>...
</dl>
  • 自定义列表标签是<dl>,每项是<dt><dd>标签,这两个标签只能在dl标记中使用。

标签—超链接

:指一个网页指向一个目标的连接关系,这个目标可以是另一个网页,也可以是相同网页上的不同位置,还可以是一个图片、一个邮件地址、一个文件,甚至是一个应用程序。

格式<a href="" name="" title="" target="">超链接标题</a>

  • 超链接一般有目的地址、链接标题、打开位置三部分组成。
    (文本超链接默认样式是 带下划线的蓝色文本,点击后为紫色)

属性

  1. href :取值URL,即链接指向的目标文件。详见下一部分URL的内容。
  2. name:规定锚(anchor)的名称。
  3. title:指向链接的提示信息,即鼠标划过链接文字时显示的内容(实际开发中作用很大,方便搜索引擎了解链接地址的内容,语义化更友好)
  4. target:取值 _self在当前框架打开、_blank在新空白窗口打开、_top在顶层(根)框架打开、_parent在当前框架上一层打开、framename在指定框架或浮动框架打开(框架名称可自定义);即指定打开超链接的目标窗口。

分类

内部链接:网站内部文件之间的链接。(相对路径)
外部链接:网站内的文件链接到站点内容外的文件。(绝对路径)

  • 注意:外部链接的地址要写全

相对路径和绝对路径知识参照URL知识。

超链接的应用

1. 空链接

格式<a href="#">空链接</a>

2. HTTP文件下载超链接

:下载文件的链接指向文件所在的相对路径或绝对路径。
(对于链接的文件,浏览器无法打开则自动出现下载文件)

文件类型为 *.doc*.pdf*.exe*.rar等。

格式<a href="url">链接内容</a>

3. FTP站点访问超链接

FTP服务器链接和网页链接区别在于所用协议不同,浏览器采用http协议,访问FTP服务器采用FTP协议连接。

格式<a href="ftp://服务器IP地址或域名">链接内容</a>

4. 电子邮件超链接

运用:网站中的“联系我们”栏目,方便用户及时与网站管理员进行沟通与联系。

格式<a href="mailto:E-mail地址">链接内容</a>

  • 邮件地址必须完整

5. 页面书签链接(锚链接)

:书签是指到文章内部的链接,可以实现段落间的任意跳转。
锚链接:用id表示唯一编号,连接到指定锚点处。

分类
    1)链接到同一页面中的书签
    2)链接到不同页面的书签

步骤

  1. 定义书签:<a id="书签名">书签标题</a>
  2. 定义书签链接:
        1)同一页面:<a href="#书签名">书签标题</a>
        2)不同页面:<a href="URL#书签名">书签标题</a>

统一资源定位符URL

在学习到超链接a的href属性时,定义了链接所访问的目标地址,也称为访问地址

定义:每一个网页都有一个相对固定的地址,即统一资源定位符URL,通过独立的URL可以访问不同网站上的不同页面。

在HTML文件中提供了三种路径,分别是绝对路径、相对路径、根路径。

1. 绝对路径

:指文件的完整路径,包括1盘符或2文件传输的协议http、ftp等。

运用:一般用于网站的外部链接。

类型
    1)从盘符开始定义的文件路径。比如:E:/web/index.html
    2)从协议开始定义的URL网址。比如:http://www.edu.cn

2. 相对路径

:指相对于当前文件的路径,从当前文件所在位置指向目的文件的路径。

运用:一般用于网站的内部链接。

类型
    1)同一目录:直接输入要链接的文档
    2)链接上一目录:先输入"../",再输入目录名
    3)链接下一目录:想输入目录名,后加"/"

3. 根路径

:指从网站的最底层开始;一般网站的根目录就是域名下对应的文件夹。

运用:一般用于创建内部链接。(不建议使用)

书写:以斜杠/开头,然后书写文件夹名,及子文件夹名或文件名,直至写完路径为止。

标签—框架

实现在一个浏览器上看到多个页面。

  • 框架属于将要被淘汰的标签,w3c建议以后使用浮动框架,主要应用在后台管理处。

框架集<frameset></frameset>
框架<frame></frame>

  • 如果n个框架,则保存n+1个文件;
    在保存框架的注意事项:光标放在哪个框架中,就保存框架中哪个页面。如果要保存所有的页面,文件–保存全部(先保存框架集,再陆续保存框架)。

  • 将已经有的界面显示到框架中:光标定位到框架中,执行文件–在框架中打开的命令。

  • 框架中显示其他页面用src属性

在指定框架中显示页面

1.指定框架name属性
2.链接a标记属性中,添加taget="指定框架的名称name" 或者在设计也页面设置目标为指定框架的名称。

标签—浮动框架(内联框架)

:浏览器窗口含有孤立的子窗口。

  • 必须插入在body标记中,不能插入到frameset标记中。

格式
<iframe属性名称="value" name="iframename"></iframe>
<a href="target.html" target="iframename">链接标题</a>

属性

  1. name :设置框架名称
  2. src :设置源文件属性
  3. width :设置浮动框架窗口宽度
  4. height :设置浮动框架窗口高度
  5. frameborder :设置框架边框
  6. scrolling :设置框架滚动条
  7. marginwidth: 设置框架左右边距(页面距左的边界)
  8. marginheight :设置边框上下边距(页面距上的边界)

标签—图片

在网页上,常见的图像格式:

  • JPG
  • GIF
  • PNG

格式<img src="" alt="" />
属性

  1. src: 取值URL,即图片路径
  2. alt :取值可是中英文,即规定图片的替代文本
        1)浏览网页时,鼠标悬停在图像上,鼠标旁边会出现替代文本。
        2)当图片无法显示的时候,将图片的说明性文字显示到图片的位置上。
        3)给搜索引擎来用,目前搜索引擎确定图片还是通过alt属性。
  3. title:当鼠标移动到图片上时,显示图片的说明文字。
  4. name:图片的名称
  5. width: 取值像素或百分比,即图片的宽度
  6. height :取值像素或百分比,即图片的高度
  • 只设置高度或高度,图片等比例显示;同时设置图片容易拉伸变形。
  1. aline:设置图像和文字之间的对齐方式;
    取值:
        1)垂直:图像端和当前行的文字端对齐,当前行高度相应扩大,top顶端对齐、middle水平中线对齐、bottom底端对齐;
        2)水平:图像左或右对齐,浮动游离于文字之外,文字行高无变化left左对齐、right右对齐;center图像中线和当前行文字的中线对齐,当前行高度相应扩大。
  2. border:取值数字,单位像素,即边框线的长度。
  • 该属性的边框颜色不能设置,当没有设置图像链接时边框颜色是黑色,否则与链接文字颜色,默认深蓝色。通过样式表修改边框的线性、宽度和颜色。
  1. usemap:图像地图,热区链接,即在一张图上点击不同区域(热区),跳转到不同的页面。
    格式:
     <img src="图片地址" usemap="#映射图像名称" /><map name="映射图像名称"><area shape="rect矩形" coords="顶点1的x,顶点1的y,顶点2的x,顶点2的y" href="URL" /><area shape="circle圆形" coords="圆心x,圆心y,半径" href="URL" /><area shape="poly多边形" coords="x1,y2,...,...,xn,yn,...,...,x1,y1" href="URL" /></map>
  • 建议使用Dw工具,在设计模式下操作。
    dw使用:选中图片,在属性栏上就会出现热点的按钮,点击热点按钮画出热点形状,选中热点形状做出超链接。

标签—滚动文字

格式<marquee></marquee>
属性

  1. 设置滚动范围(滚动的背景面积范围)
        1)width:取值数字,单位像素;设置宽度 ,即
        1)height:取值数字,单位像素;设置高度,即滚动范围(滚动的背景面积范围)
  2. bgcolor:取值十六进制数、rgb函数;即滚动文字背景颜色
  3. direction : 取值left向左(默认)、rightupdown;即滚动方向
  4. behavior:取值scroll循环往复滚动(默认)、slide滚动一次就停止、alternate来回交替滚动;即滚动方式
  5. loop:取值整数;即设置滚动文字的滚动次数(默认为**-1**,无限循环)。
  6. scrollamount: 取值数字,单位像素;即滚动速度(滚动文字每次移动的长度)
  7. scrolldelay:取值数字,单位毫秒;即滚动延迟时间,值越小滚动速度越快。
  8. onMouseOver : 当鼠标移上时:设置鼠标经过时的动作;当取值为this.stop() 设置为鼠标经过时停止滚动。
  9. onMouseOut: 当鼠标移开时:设置鼠标离开时的动作;当取值为this.start() 设置为鼠标离开时开始滚动。

标签—音频、视频、flash文件

格式<embed src="" width="" height=""></embed>
可以播放的文件类型:Midi、Mav、AIFF、SWF、AV、MP3、MOV、AVI等。
属性

  1. src:取值URL;即多媒体文件地址
  2. widthheight:取值整数,单位像素;即设置播放界面的大小,默认不出现播放界面,高版本浏览器可能会出现(背景音乐设置0)
  3. autostart:取值truefalse;即设置多媒体是否自动播放
  4. loop:取值truefalse;即设置多媒体文件是否循环

使用工具插入flash
在Dw中点击媒体图标–SWF;
在设计栏下端设置属性;

  • 例如:透明等…

标签—表格

  • 默认情况下,网页的布局是流布局(类似于排队的方式),不能够随意摆放位置。

作用:用来做页面布局。
组成:行、列、(列标题)。

与表格相关的标记

表格标记table:<table></table>
标题标记caption:<caption></caption>
行标记table row:<tr></tr>
表格头部单元格标记table head:<th></th>(默认样式是粗体、居中)
列(单元格)标记table date:<td></td>

table属性

  • border边框 数值取值 默认无边框
  • width宽度 数值取值
  • height高度 数值取值
  • cellspacing: 单元格与单元格之间的距离 数值取值(默认=2px)
  • cellpadding :内容和单元格的距离 数值取值(默认=1px)
  • align:水平对齐 center水平对齐
  • bgcolor:设置背景色
  • bordercolor边框颜色 颜色取值

td属性

单元格中数据的对齐方式

对齐分为水平对齐和垂直对齐。
默认是水平居左,垂直居中。
水平对齐aligh =left、center、right
垂直对齐valigh =top、middle、bottom

合并单元格

合并单元格分为合并行和和并列。
合并行:把不同行合并起来。
rowspan=数值

合并列:把不同列合并起来。
colspan=数值

例子:

<table width="500" border="1" bordercolor="#0000FF" aligh="center" height="400"><tr><th colspan="3">学生证</th></tr><tr><td>姓名</td><td>&nbsp;</td><td rowspan="3">照片</td></tr><tr><td>性别</td><td>&nbsp;</td></tr><tr><td>年龄</td><td>&nbsp;</td></tr>
</table>

效果如下:

其中的关系如下图所示:

表格应用—拼版

表格拼版的特性

  1. 表格可以被内容的撑开,不能被背景撑开。
  2. 背景默认是平铺的,标签有多大,背景就铺多大。
  3. 内容不能放在内容上面,但可以放在背景上。
    使用背景图的情况:
    1.图在图上或字在图上
    2.一张图重复出现

表格布局注意点

  1. 整个页面不要嵌套在一个表格里,尽量拆分多个表格;若将内容都放在一个表格里,下载速度会很慢。
  2. 表格的结构尽量整齐。

标签—表单

用途

  1. 用户注册某种服务时,收集其姓名、地址、电话号码、电子邮件地址和其他信息。
  2. 收集购买物品所需的信息,例如填写姓名、邮政地址和付款方式等。

标记<form></form>

表单域

表单域是表单的区域,用来控制表单提交时候的数据访问。

表单属性

表单中包含action属性和method属性。

action属性

作用:指定处理提交的表单的脚本的位置。
使用action="数据提交的位置"

  • action=“表示提交到本页面”

method属性

作用:指定向服务器发送数据的方法。
使用method="get | post "
数据提交的方法有两种:getpost

get和post的区别:

  1. 从外观上,get方法在地址栏上带有?问号,post方法没有?问号;
  2. 从提交的数据量上:get方法只能提交少量数据,一般低于
    2K;post方法则能够提交大量数据,PHP默认可以提交8M的数据,甚至更多;
  3. 从安全性上,get方法不安全,post方法较为安全;
  4. 从提交原理上,get方法提交的数据之间都是独立的,post方法提交的数据作为一个整体一起提交;
  5. 在灵活性上,get方法很灵活,只要页面跳转就可以传递数据;post方法不灵活,必须要有表单的参与。

表单元素

所有的表单元素都要放到表单中。

文本框(单行文本)

标记<input />
属性

  • type类别 ="text" :该元素是文本框
  • name名称:文本框的名称
  • placeholder占位符:把placeholder内容写入文本框内
  • size尺寸:设置文本框的宽度大小(单位:字符);数值取值,单位是字符
  • maxlength最大长度:设置文本框中能够输入的字符串最大长度
  • value:为文本输入框设置默认值(一般起到提示作用)

密码框

标记<input />
属性

  • type类别 ="password" :该元素是密码框
  • name名称:密码框的名称
  • size尺寸:设置密码框的宽度大小(单位:字符);数值取值,单位是字符
  • maxlength最大长度:设置密码框中能够输入的字符串最大长度
  • value:为密码输入框设置默认值(一般起到提示作用)

单选框

标记<input />
属性

  • type类别 ="radio" :该元素是单选框
  • name名称:单选框的名称
  • value值:选中该元素的值
  • checked 默认选中:checked="checked"

注意

  1. 同一组的name应一致
  2. 必须给无法输入的表单元素赋值,即给value赋值

复选框

标记<input />
属性

  • type类别 ="checkbox" :该元素是复选框
  • name名称:复选框的名称
  • value值:选中该元素的值
  • checked 默认选中:checked="checked"

注意

  1. 同一组的name应一致
  2. 必须给无法输入的表单元素赋值,即给value赋值

下拉菜单

标记

<select><option>选项1</option><option>选项2</option>
</select>
  • 下拉菜单的标签是<select>,下拉菜单项的标签是<option>

select的属性

  • name名称:下拉菜单的名称

option的属性

  • value值:选择该元素的值
  • selected默认选择:selected="selected"

下拉列表

标记

<select><option>选项1</option><option>选项2</option>
</select>
  • 下拉列表的标签是<select>,下拉列表项的标签是<option>

select的属性

  • size显示选项的个数 数值取值
  • multiple可多选 ="multiple":设置按住ctrl可多选
  • name名称:下拉列表的名称

option的属性

  • value值:选择该元素的值
  • selected默认选择:selected="selected"

文本域(多行文本)

标记<textarea></textarea>
属性

  • name名称:文本域的名称
  • cols容纳列数:相当于设置宽度,数值取值
  • rows容纳行数:相当于设置高度,数值取值

提交按钮

作用:用来向服务器提交数据。
标记<input />
属性

  • type类别 ="submit" :该元素是提交按钮
  • name名称:提交按钮的名称
  • value值:按钮显示的内容

重置按钮

作用:用来清空填写的数据,将表单恢复到初始值。
标记<input />
属性

  • type类别 ="reset" :该元素是重置按钮
  • name名称:重置按钮的名称
  • value值:重置显示的内容

普通按钮

提交按钮和重置按钮都是带有功能的按钮,在很多情况下,我们点击按钮的时候不是需要提交和重置,而是执行我们自己的功能,这时候就需要一个不带有功能的按钮。

标记<input />
属性

  • type类别 ="button" :该元素是普通按钮
  • name名称:普通按钮的名称
  • value值:按钮显示的内容

HTML笔记整理2 -- HTML标签相关推荐

  1. 《繁凡的深度学习笔记》前言、目录大纲 一文让你完全弄懂深度学习所有基础(DL笔记整理系列)

    <繁凡的深度学习笔记>前言.目录大纲 (DL笔记整理系列) 一文弄懂深度学习所有基础 ! 3043331995@qq.com https://fanfansann.blog.csdn.ne ...

  2. 一文让你完全弄懂逻辑回归和分类问题实战《繁凡的深度学习笔记》第 3 章 分类问题与信息论基础(上)(DL笔记整理系列)

    好吧,只好拆分为上下两篇发布了>_< 终于肝出来了,今天就是除夕夜了,祝大家新快乐!^q^ <繁凡的深度学习笔记>第 3 章 分类问题与信息论基础 (上)(逻辑回归.Softm ...

  3. 一文让你完全弄懂回归问题、激活函数、梯度下降和神经元模型实战《繁凡的深度学习笔记》第 2 章 回归问题与神经元模型(DL笔记整理系列)

    <繁凡的深度学习笔记>第 2 章 回归问题与神经元模型(DL笔记整理系列) 3043331995@qq.com https://fanfansann.blog.csdn.net/ http ...

  4. 深度学习总结——CS231n课程深度学习(机器视觉相关)笔记整理

    深度学习笔记整理 说明 基本知识点一:模型的设置(基本) 1. 激活函数的设置 2. 损失函数的设置 (1) 分类问题 (2) 属性问题 (3) 回归问题 3. 正则化方式的设置 (1) 损失函数添加 ...

  5. Deep Learning(深度学习)学习笔记整理系列三

    Deep Learning(深度学习)学习笔记整理系列 声明: 1)该Deep Learning的学习系列是整理自网上很大牛和机器学习专家所无私奉献的资料的.具体引用的资料请看参考文献.具体的版本声明 ...

  6. 移动web——学习笔记整理

    目录 Day1 00.流式布局 00.1目标 00.2目录 01.移动端浏览器 02.视口(layout viewport) 03.meta视口标签(单标签) 04.物理像素&物理像素比 05 ...

  7. mybatis笔记整理

    前言: mybatis可以说是最容易上手的持久层框架了,相比于hibernate 而言,它都是直接用sql语句对数据库进行操作,而不是用hql,尤其是关联关系复杂的时候,mybatis更容易实现.下面 ...

  8. 千锋 Vue 详细笔记整理

    视频笔记是根据B站 千锋 涛哥 - SpringBoot+vue+前后端分离项目<锋迷商城>实战课-完结版 进行整理的 笔记可上 gitee仓库 自取 千锋 Vue 笔记整理 一.vue ...

  9. Deep Learning(深度学习)学习笔记整理系列之常用模型

    Deep Learning(深度学习)学习笔记整理系列之常用模型(四.五.六.七) 九.Deep Learning的常用模型或者方法 9.1.AutoEncoder自动编码器 Deep Learnin ...

最新文章

  1. SCI论文写作视频1.论文的三段式结构
  2. GNN与Transformer融合促进药物发现 | 2022几何图机器学习展望
  3. kubernetes apiserver认证
  4. XAML Region标签功能
  5. hdf5与hdfs的区别
  6. 重磅嘉宾公布,第四范式AI新品发布会进入报名倒计时
  7. 通讯录排序 (20分)_算法入门篇:简单的排序算法
  8. C++和C#的指针小解
  9. Java LinkedList对象的get(int index)方法与示例
  10. VS2010断点设置技巧
  11. [拇指飞动]读《程序员修炼之道:从小工到专家》
  12. 基于Linux的集群系统(五) Linux集群系统的实现
  13. JS动态修改页面EasyUI datebox不生效、EasyUI动态添加Class、EasyUI动态渲染解析解决方案
  14. P1262 间谍网络
  15. 用EasyRecovery“监控硬盘”功能检测硬盘问题的方法
  16. 从stm32转向Linux,STM32MP1Distrib
  17. python2000个5除以84的余数_python中负数除法的求商和取余的问题
  18. bug10下的工具(以防重新装机)
  19. 模拟点击框架网页内无id无name的按钮
  20. python获取字典末端value值的取值方式

热门文章

  1. Anaconda+Tensorflow_Gpu+Spyder安装记录(2022年10月14日更新)
  2. 豆豆趣事[2015年10月]
  3. 别人的VIVO手机为什么不会卡?教你从两方面解决,再用两年也不卡
  4. 利用U盘进行Windows11系统重装
  5. vue作用域插槽,你真的懂了吗?
  6. PID控制器、模糊控制器、神经网络控制器的对比仿真
  7. 【笔记】linux下手机投屏电脑与录屏
  8. oracle创建job pls-00103,创建oracle包遇到PLS-00103:遇到符号“CREATE”
  9. css-------
  10. Lua 文件加载执行方法