前端基础_HTML(DAY02)

最新推荐文章于 2024-06-04 17:52:54 发布

DXXME

最新推荐文章于 2024-06-04 17:52:54 发布

阅读量537

点赞数 4

分类专栏：笔记

本文链接：https://blog.csdn.net/weixin_43716329/article/details/115976859

版权

笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章目录

一、HTML中的select标签
- 1.select(选择框或下拉列表)
- 2.textarea（文本域）
二、a标签
三、img标签
四、table标签
- 1.什么是table标签
- 2.table标签的基本组成

一、HTML中的select标签

1.select(选择框或下拉列表)

常用的属性是：disabled（规定禁用该下拉列表）
multiple(规定可选择多个选项)

<p>
		请选择您喜欢的书籍类型:
		<select name="style" multiple="multiple">
		    <option>--请选择类型--</option>
			<option>都市言情</option>
			<option>古代穿越</option>
			<option>现代科技</option>
			<option>历史人文</option>
			<option>悬疑推理</option>
		</select>
	</p>

注：建议这里的select multiple多选列表用input checkbox代替，更加美观

2.textarea（文本域）

常用的属性是：Rows row 行
Cols column 列

<p>
		<textarea  rows="5" cols="50">
			这家伙很懒，什么都没有留下
		</textarea>

	</p>

二、a标签

1.什么是a标签

a标签就是超链接，用于页面的跳转

2.页面跳转的请求方式：

a.form表单get请求
b.form表单post请求
c.a标签进行页面跳转：get请求方式

3.a标签的使用方式

a.使用a标签进行外部跳转-----外链接
b.使用a标签跳转到网页的内部-----锚点

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body  vlink="gold" link="pink" alink="green">
	<div> <a name="header"><h1>QQ空间</h1></a></div>
	<hr>
	<a href="3.html">主页</a>
	<a href="2.html?username=zhangsanfeng&pwd=123">我的相册</a>
	<a href="1.html">我的日志</a>
	<a href="http://www.baidu.com/">百度</a>
	<a href="http://www.taobao.com/">淘宝</a><br/>


	<p><a href="#R1">第一章</a></p>
	<p><a href="#R2">第二章</a></p>
	<p><a href="#R3">第三章</a></p>
	<p><a href="#R4">第四章</a></p>
	<p><a href="#R5">第五章</a></p>

	<h2><a name="R1">第一章</a></h2>
--------大量文本-----------

	<h2><a name="R2">第二章</a></h2>
--------大量文本-----------
	<div class="foot">
	底部
	<a href="#header">回到顶部 </a>
</div>
</body>
</html>

3.在a标签页面跳转的Body的三个特殊属性

a.alink 活动链接（就是鼠标点击链接的那一刻）
b.link 未访问链接
c.vlink 访问链接
代码如上

三、img标签

1.img标签的作用

在页面中引入图片

2.img标签的必需属性

a.src source 源代码
b.alt 图片命名（在图片无法使用时用alt内的本文代替）

2.img标签的重要属性

a.boder 边框以像素值为单位px
b.width 宽度 height 高度以像素值为单位px或者以百分比为单位
c.usemap 用于做位图 map 位图，映射 area 规定位图区域

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
<img src="./image/w.png" alt="小猫" usemap="#Wxy" >
<map  name="Wxy" >
<area  href="https://www.baidu.com" shape="circle" coords="300,300,60"></a>&gt;
	
</map>
	
</body>
</html>

如图为位图选择的区域，在该区域点击就会跳转到所设定的界面

四、table标签

1.什么是table标签

该标签表示的是表格

2.table标签的基本组成

a.<table>
b.<tr>表行
c.<th>表头默认加粗
d.<td>表元
代码如下：

<table border="1px">
		<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>

DXXME

关注

4
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
前端基础_HTML(DAY02)

前端基础_HTML(DAY02)提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前端基础_HTML(DAY02)一、HTML中的select标签1.select(选择框或下拉列表)2.textarea（文本域）二、a标签1.什么是a标签2.页面跳转的请求方式：3.a标签的使用方式3.在a标签页面跳转的Body的三个特殊属性三、img标签1.img标签的作用2.img标签的必需属性2.img标签的重要属性四、table标签1.什么是table标签2.table标签的基本组成
复制链接

扫一扫