【HTML、JAVASCRIPT、CSS】2、HTML语言入门2

简介: 1、HTML中实现超链接 超链接以标签实现,具体方法如: 无标题文档 打开百度 执行后发现网页中出现了“打开百度”的链接并链接到标签中的网址。

1、HTML中实现超链接

超链接以<a>标签实现,具体方法如:

<html>
  <head>
    <title>无标题文档</title>
  </head>

  <body>
    <a href="http://www.baidu.com" target="_blank">打开百度</a>
  </body>
</html>

执行后发现网页中出现了“打开百度”的链接并链接到<a>标签中的网址。另外 ,还可以在链接中实现邮件链接等其他协议。


第二种用法,使用超链接实现页面定位功能。

首先使用<a>标签定义目标位置:

<a name="target">目标</a>
....
<a href="#target">返回目标</a>
此时,单击“返回目标”链接,页面会自动跳转回“目标”标签所在位置。


2、表单标签<form>:用于页面与服务器的交互。

<input>标签,实现在页面上显示一个输入框,通过设置不同的type,实现不同的功能:

<html>
	<head>
		<title>无标题文档</title>
	</head>

	<body>
		<form>
			User Name:<input type="text" name = "user"/><br />
			Password:<input type="password" name = "psw"/><br />
			Gender:<input type="radio" name = "Gender" value="M"/>Male<input type="radio" name = "Gender" value="F"/>Female<br />
			Skill:
				<input type="checkbox" name="skill" value="C">C/C++
				<input type="checkbox" name="skill" value="OC">Objective-C
				<input type="checkbox" name="skill" value="M">Matlab
				<input type="checkbox" name="skill" value="H">HTML<br />
			File:<input type="file"><br />
			Enter:<input type="button" value="YES"><br />
			<input type="submit"><br />
			<input type="reset">
		</form>
	</body>
</html>
此外,还可以设置hidden和img类型的input标签,分别用于设置要上传的隐藏信息,以及设置图片类型的上传按钮。

3、<select>标签,实现下拉菜单选择框:

<html>
	<head>
		<title>无标题文档</title>
	</head>

	<body>
		<form>			
			<select name="country">
				<option value="none">--选择国家--</option>
				<option value="CH">China</option>
				<option value="US">United States</option>
				<option value="UK">Briton</option>
			</select>
			<br />
			<textarea cols="30" rows="10">
			</textarea>
		</form>
	</body>
</html>

4、<Label>标签,用于实现输入框的快捷键

关键在于两个属性:for属性——指定快捷键的表单元素,必须与表单元素的id相同;accessKey属性——指定快捷键,需要与alt键组合使用。


5、 <pre>标签,用于使html脚本中输入的文字信息在显示的时候保持输入样式(比如可以通过这种方式在页面上显示某种程序代码)。


6、文本编辑标签:<p>标签,用于标识段落之间的空行;<b>标签,用于标记文本内容为加粗;<i>标签,用于标记文本内容为倾斜;<u>标签,在标记文字上加下划线;<strong>标签,意义同<b>标签;<sub>、<sup>标签:分别表示某文本为上下标;


7、<marquee>标签,标记文本飞入效果。


8、头标签<head>

头标签中包含了多种文档的属性信息。除了<title>标签外,还有<base>标签,用href属性表示超链接的目录。

<meta>标签:属性keyword可以设置页面的关键字;属性http-equiv属性,模拟http协议的响应消息头。

<link>标签:给页面关联指定文件。rel属性用于标记文件类型,href用于指定文件路径,media属性用于指定作用媒体类型(如打印机显示器等)。

目录
相关文章
|
1月前
|
JSON 自然语言处理 前端开发
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
140 72
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
|
1月前
|
JSON JavaScript 前端开发
菜鸟之路Day23一一JavaScript 入门
本文介绍了 JavaScript 的基础内容,包括 JS 的引入方式、基础语法、数据类型、运算符、类型转换、函数、对象(如 Array、String、自定义对象、JSON、BOM 和 DOM)、事件监听,以及 Vue 框架的初步使用。重点讲解了内部和外部脚本的引入、变量声明(var、let、const)、常见输出语句、数组与字符串的操作方法、DOM 操作及事件绑定,并通过实例展示了 Vue 的双向数据绑定和常用指令(v-bind、v-model、v-on、v-if、v-for 等)。
58 7
|
2月前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
69 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
3月前
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
173 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
3月前
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
80 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
3月前
html+js+css实现的建筑方块立体数字时钟源码
html+js+css实现的建筑方块立体数字时钟源码
124 33
|
3月前
css3 svg制作404页面动画效果HTML源码
css3 svg制作404页面动画效果HTML源码
81 34
|
4月前
一个好看的小时钟html+js+css源码
一个好看的小时钟html+js+css源码
140 24
|
6月前
|
前端开发 JavaScript 搜索推荐
打造个人博客网站:从零开始的HTML和CSS之旅
【9月更文挑战第32天】在这个数字化的时代,拥有一个个人博客不仅是展示自我的平台,也是技术交流的桥梁。本文将引导初学者理解并实现一个简单的个人博客网站的搭建,涵盖HTML的基础结构、CSS样式的美化技巧以及如何将两者结合来制作一个完整的网页。通过这篇文章,你将学会如何从零开始构建自己的网络空间,并在互联网世界留下你的足迹。