html语言无序下拉菜单,(4条消息)HTML语言标记详解

开发过Android的同学都知道,Android应用程序中的界面是由一个个控件组合而成的,比如说按钮控件,图片控件,文本输入框控件等。HTML语言的标记就可以理解成控件的标记,一个标记指定了一个控件,但是标记并不是控件本身,仅仅是那个控件的标记。HTML文件中的标记由浏览器来解析,产生相应的界面元素(控件),最终生成网页上可见的那些内容。

标记可以有自己的属性和内容。标记的属性指定内容显示的方式,标记的内容在标记对中直接给出即可。

HTML页面就是由标记来构建的,通过标记的组合,就可编辑完成一个网页。所以通过标记创建网页是一件不太难的事情。

一  HTML界面的基本标记元素:,

,,。使用这四种标记创建的一个基本HTML文档如下:HTML页面

Hello world!

在浏览器中打开之后显示的界面截图:

202248022_1_20200915051641693

标记是HTML文件的开头,不可缺少。

是标题标记,用于定义网页的标题,如浏览器截图中红色下划线显示的内容,标记放置在标记中。标记是HTML页面的主体标记。页面中的所有内容都定义在标记中。标记还可以控制页面的一些特性,比如页面的背景图片和颜色等。

注:1)HTML的所有标记都以标记名>结尾,而不仅仅是上述四个标签。例如以结尾。

2)如果浏览器对中文显示为乱码,一般是文本编码不正确。可以通过Windows记事本打开文件,另存为ANSI或者Unicode编码格式。或者使用Notepad++转换文件编码方式,然后保存。

二  HTML超文本标记语言的其他标记

HTML中的标记可以设计页面中的文字,图片,定义超链接等。

1)
换行标记

该标记并不是和成对出现,该标记告诉浏览器在哪里换行。例如下面的代码:

应用换行标记实现页面文字换行

黄鹤楼送孟浩然之广陵

故人西辞黄鹤楼,烟花三月下扬州。

孤帆远影碧空尽,唯见长江天际流。

浏览器打开的效果截图:

202248022_2_20200915051641740

2)

段落标记

段落标记在段前和段后各添加一个空行,而定义在段落标记中的内容不受该影响。

3)

六个标题标签

标题标签用于在HTML页面中实现不同层次的标题。从左到右依次表示第一级标题,第二级标题,...,第六级标题。级数越小,级别越高,字体越大。

展示

标签和标签使用的一段代码:

设置标题标记和段落标记

java开发的3个方向

Java SE

主要用于桌面程序的开发。它是学习Java EE和Java ME的基础,也是本书的重点内容。

Java EE

主要用于网页程序的开发。随着互联网的发展,越来越多的企业使用Java语言来开发自己的官方网站,其中不乏世界500强企业。

Java ME

主要用于嵌入式系统程序的开发

在浏览器中的效果截图:

202248022_3_20200915051641802

4)

居中标记

HTML页面内容默认的布局方式从左到右。

标记内容为居中显示。
标记作用域标记区域内的每一段内容,每一个标记。如下面一段演示代码:设置标题标记

java开发的3个方向

Java SE

主要用于桌面程序的开发。它是学习Java EE和Java ME的基础,也是本书的重点内容。

Java EE

主要用于网页程序的开发。随着互联网的发展,越来越多的企业使用java语言来用Java语言来开发自己的官方网站,其中不乏世界500强企业。

Java ME

主要用于嵌入式系统程序的开发

在浏览器中打开文件显示内容如下:

202248022_4_20200915051641990

5)文字列表标记

  • 是无序列表标记,
  1. 是有序列表标记。有序列表和无序列表的不同在于无序列表的每一个列表项前面添加一个点号,有序列表的列表项前面添加一个序号,序号从1开始。

每一个列表项用

标记,这标记不需要结尾,并且一个表项自动占据一行。

如下面无序列表标记代码:

无需列表标记

编程词典有以下几个品种

  • Java编程词典
  • VB编程词典
  • VC编程词典
  • .net编程词典
  • C#编程词典

无序列表运行结果截图:

202248022_5_20200915051642115

有序列表标记代码:

有序列表标记

编程词典有以下几个品种

  1. Java编程词典
  2. VB编程词典
  3. VC编程词典
  4. .net编程词典
  5. C#编程词典

浏览器打开文件显示如下(

):

202248022_6_20200915051642208

(非

截图):

202248022_7_20200915051642255

6),

区域标记

怎么来理解标记?从控件的角度来看,么一个标记是一个页面的控件,是一个实体。从页面内容的创建来看,标记就是依照次序规定了页面显示的内容和每一部分内容的含义,并以此来构建网页。

标记用来组合文档中的行内元素,对它引用样式时,它将会对划分的区域进行渲染。

标签功能和 类似,但是
是组合块元素。

区域标记代码演示:

区域标记

#right {

float:right;

color:blue;

}

#center {

font-family:宋体;

font-size:24px;

color:red;

}

span效果

div效果1

div效果2

浏览器打开文件截图:

202248022_8_20200915051642302

7)

表格用来存储数据的。表格由标题,表头,行和单元格组成,每一个组成元素都对应于一个标记,有这些标记指定表格的内容和构成。

标题标记,属性有align,valign等表头标记,属性有align,background,colspan,valign等。
单元格标记,属性有align,background,valign等。

表格使用小技巧:因为标记是可以嵌套的,所以灵活嵌套会实现很多不同的结构。表格也可以用来设计页面。在页面中创建一个表格,并设置没有边框,之后通过该表格将页面划分成几个区域,分别对几个区域进行设计。

表格标签演示代码如下:

演示表格标记
学生考试成绩单
姓名语文数学英语
张三一899287
李四938680
王五858690
西门吹雪100100100

浏览器打开文件截图如下:

202248022_9_20200915051642365

8)

表单标记

表单是用户与网页交换数据的重要手段,如下面截图,就是一个表单(虽然格式不是很美观),表单中有各种表单元素,比如文本输入框,单选框(radix),复选框(CheckBox)等。

202248022_10_20200915051642537

使用表单标记的基本语法如下:

标记个属性说明如下:

action:指定处理表单数据程序的URL地址。比如将更新后的密码从网页保存到服务器上,就需要指定保存密码的业务逻辑程序,URL就是这段程序在服务器上的地址。

method:指定数据传送到服务器的方式。get表示将输入的数据追加在action指定的地址后面,并传送到服务器。post表示会将输入的数据按照HTTP协议中post传输方式传送到服务器。

name:指定表单的名称,可自定义。

onSubmit:当用户点击提交按钮是触发的事件。

target:指定输入数据结果显示在哪个窗口中。

9)表单输入标记

标记不成对出现,即不需要结束。表单中的账户输入框,密码输入框,复选框等都是一个标记,具体的种类由的type属性指定。比如type="radio"表示单选按钮,type="text"表示文本框。

type属性的值如下:

text(文本框),password(密码域), file(文件域), radio(单选按钮), checkbox(复选按钮), submit(提交按钮), reset(重置按钮), button(不同按钮), hidden(隐藏域), image(图片域)

使用语法如下:

height="digit" maxlength="digit" readonly="" size="digit" src="uri" usemap="uri"

alt="" value="checkbox">

各属性值的含义:

type,name,id分别是输入字段的类别,输入字段的名称和输入字段的标识id。

disabled:表示输入字段不可用,显示为灰色。其值可以是disabled,也可以是空,即不指定

checked:当类型是radio或者checkbox时,表示输入字段是否处于选中状态。值可为空,也可是checked

width和height:当输入是图片时,指定宽和高。

size:指定输入字段的宽度。当type是text和password时,以文字个数为单位。其他类型则以像素为单位。

maxlength:当type是text和password时指定可输入文字个数,默认下没有限制。

readonly:输入字段是否为只读。属性值可以是readonly,也可以为空。

src:用于指定图片来源。

usemap:

alt:当图片无法显示时显示的文字。

value:指定按钮上显示的文字。当类型为radio和checkbox时,指定数据项选中时的值(输入字段默认数据值)。

演示

的代码如下:演示表单标记

用 户 名:

密 码:

确认密码:

性 别:

男 

爱 好:

体育

旅游

听音乐

看书

E-mail:

浏览器中打开文本截图如下:

202248022_10_20200915051642537

10)下拉菜单标记与

在页面中创建下拉菜单。通过标记添加菜单项。

标记的属性如下:

name:下拉菜单的名称

size:指定列表框中显示的选项数量,超出该数量的选项通过拖动滚动条查看。

disabled:用于指定当前列表框不可用(灰色)

multiple:用于让多行列表框支持多选

演示的代码:

演示下拉菜单标记

下拉菜单:

数码相机区

摄影器材

MP3/MP4/MP5

U盘/移动硬盘

 多行列表框(不可多选):

数码相机区

摄影器材

MP3/MP4/MP5

U盘/移动硬盘

 多行列表框(可多选):

数码相机区

摄影器材

MP3/MP4/MP5

U盘/移动硬盘

浏览器打开文件效果:

202248022_11_20200915051642615

11)多行文本标记

一般用于

表单中。多行文本标记用于输入多行文本。属性说明:

name:用于指定多行文本框的名称,档表单提交之后,在服务器端获取表单数据时引用。将表单标记和后台数据库联系起来。当表单很大,内容复杂时,必须要考虑数据库的问题。

cols:显示的列数(宽度)

rows:显示的行数(高度)

disabled:用于指定多行文本框不可用(变成灰色)

readonly:用于指定当前多行文本框为只读

wrap:用于指定多行文本中的文字是否自动换行。

演示代码如下:

演示多行文本标记

人之初 性本善 性相近 习相远

苟不教 性乃迁 教之道 贵以专

昔孟母 择邻处 子不学 断机杼

人生若只如初见,何事秋风悲画扇。

用我三生烟火,换你一世迷离。

人生那么长,等你几年又何妨。

浏览器中打开文件截图:

202248022_12_20200915051642724

12)超链接与图片

超链接实现由一个页面跳转到另一个页面。实现添加图片。

的属性:

src:用于指定图片的来源

width和height:用于指定图片的高和宽

border:指定图片外边框的宽度,默认为0

alt:指定图片无法显示时显示的文字。

演示和的代码如下:

演示超链接和图片

btn_bg.jpg

btn_bg.jpg

查看详情

产看详情

btn_bg.jpg

btn_bg.jpg

查看详情

查看详情

浏览器打开效果:

202248022_13_20200915051642834

超链接显示的页面:

202248022_14_20200915051642927

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值