HTML系列之（二）常用元素

常用元素

1. <head>元素

该元素的内容对用户不可见，包含面向搜索引擎的关键字、字符编码等，最先加载

1.1 <base>元素

指定网页中所有超链接的属性，只需设置一次相关属性即可对网页中的所有超链接生效。否则，如果想要网页中的每个超链接都设置相同属性，需要对每个超链接进行设置。

  1. href
    指定网页中所有超链接的目录
  2. target
    指定网页中所有超链接打开超链接的方式，如：_blank表示所有的超链接都用新窗口打开显示。

1.2 <meta>元素

  1. 定时刷新页面
<meta http-equiv="refresh" content="3;url=http://www.baidu.com"/>
  1. 指定页面编码格式
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

1.3 <link>元素

链接一个与当前网页相关的其他文件资源
如：链接css文件

<link rel="stylesheet" type="text/css" media="screen,print" href="a.css"/>

2. <title>元素

设置页面标题，显示在浏览器标签页上，也作为收藏页面的描述文字
在这里插入图片描述

3. <body>元素

包含期望让用户在访问页面时看到的内容

4. <img>元素

alt属性，图像的描述文本，设置的值用于当图像显示不出来时显示，如测试图片的路径错误
在这里插入图片描述
注：当客户端请求包含一个<img>元素的html网页时，共产生两次请求，第一次请求html页面，第二次请求img图片

4.1 图像地图

把一幅图分为多个区域，每个区域指向不同的Url地址，单击某个区域，链接到相应的有关的页面

5. <hx>元素

共六级标题，<h1> - <h6>

  1. 不要发生标题级别跳跃，两级别之间不要跨过其他的级别
  2. 不要为了设置字体格式而使用标题元素，如字体加粗、加大

6. 列表元素

6.1 <dl>元素

列表标签，<dl>标签用于界定列表范围，<dt>标签表示上层项目内容，<dd>标签表示下层项目内容，<dd>标签封装的内容有缩进效果。
在这里插入图片描述

6.2 <ul>元素

无序项目列表，列表项通过<li>标签进行封装，封装的内容有缩进效果。
在这里插入图片描述
可以通过type属性设置项目编号的类型

  1. circle 空心圆
  2. disc 实心圆
  3. square 方块
    在这里插入图片描述

6.3 <ol>元素

有序项目列表，列表项通过<li>标签进行封装，封装的内容有缩进效果。
在这里插入图片描述
可以通过type属性设置项目编号的类型

  1. 1：1，2，3，4，...
  2. A：A，B，C，D，...
  3. Ⅰ：Ⅰ，Ⅱ，Ⅲ，Ⅳ，...
  4. a：a，b，c，d，...
  5. i：i，ii，iii，iv，...
    在这里插入图片描述

7. 表格元素

在这里插入图片描述

7.1 <table>元素

属性如下

  1. border：设置表格边框宽度
    在这里插入图片描述
  2. bordercolor：设置表格边框颜色
    在这里插入图片描述
  3. cellpadding：单元格内边距，单元格内容与单元格边界间的距离
    在这里插入图片描述
  4. cellspacing：单元格间距，单元格与单元格之间的距离
    在这里插入图片描述

7.2 <caption>元素

标题元素

7.3 <tr>元素

行元素

7.4 <th>元素

表头元素（第一行的单元格）

7.5 <td>元素

单元格元素

7.6 不规则表格制作

首先确定有几行，然后确定每行有几个单元格

7.6.1 合并列

在这里插入图片描述
这个例子中有两行，第一行一个单元格，第二行两个单元格，然后通过下列属性设置第一行合并列
colspan：设置单元格可横跨的列数
在这里插入图片描述

7.6.1 合并行

在这里插入图片描述
这个例子中有两行，第一行两个单元格，第二行一个单元格，然后通过下列属性设置第一列合并行
rowspan：设置单元格可横跨的行数
在这里插入图片描述

7.7 表格分体

早期网页制作中是通过table标签对网页进行布局，使得页面内容都在table标签内，当网页内容较多或网速较慢时，页面加载速度过慢，因为服务器端往客户端传输页面数据时，需要将table标签完整的传输之后（开始标签到结束标签之前的内容全部传输完成），客户端才能看到页面内容，为了解决这种问题，出现了几个闭合标签，分别是<thead>、<tbody>、<tfoot>
在这里插入图片描述
在这里插入图片描述

8. <a>元素

8.1 超链接打开新窗口

target="_blank"

<a href="http://www.sohu.com.cn" target="_blank">搜狐网站</a>

8.2 取消超链接的默认点击效果

<a href="javascrpit:void(0)">这是一个超链接</a>

8.3 超链接都能链接哪些东西

8.3.1 网页
<a href="http://www.sohu.com.cn">搜狐网站</a>
8.3.2 本地图片
<a href="img/1.jpg">风景图片</a>
8.3.3 邮件协议
<a href="mailto:abs@sina.com">联系我们</a>
8.3.4 资源
<a href="http://www.xunlei.com/movies/fczlm.rmvb">复仇者联盟</a>
8.3.5 自定义协议
<a href="thunder://sdkjgahferutiereiwt==">迅雷下载</a>

注：其他自定义协议如e2k、flashget

8.4 锚（定位标记）

在这里插入图片描述

8.5 <frameset>元素

框架出现之前，一个页面只能显示一种资源，要么显示Html页面，要么显示图片，或者其他的资源，框架出现之后，一个页面可以显示多种资源，实现了资源的复用，通俗的说，就是多个框架共用一个窗体。
在这里插入图片描述
HTML5 不支持 <frame> 标签

<!DOCTYPE html>
<!--frameset.html-->
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<frameset rows="30%, *">
		<frame src="top.html" name="top">
		<frameset cols="30%, *">
			<frame src="link.html" name="left">
			<frame src="right.html" name="right">
		</frameset>
	</frameset>
	<body>
	</body>
</html>

通过指定rows可以定义行布局，分成两块，30%和剩余部分，cols指定列布局，将第二行分为两列，第一列占30%，第二列占剩余部分。
注：<frameset>标签不在<body>标签内部

<!DOCTYPE html>
<!--link.html-->
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<a href="table.html" target="right">搜狐网站</a>
		<hr />
		<a href="link2.html" target="right">风景图片</a>
		<hr />
		<a href="index.html" target="right">联系我们</a>
	</body>
</html>

这里除主文件以外，只给出超级链接文件，target属性用于指定点击链接后在哪个页面展示，target="right"表明点击该超链接后，跳转后的页面会在name为right的框架上显示
请添加图片描述

8.6 <iframe>元素

画中画标签，在窗体的任意位置上打开一个区域并连接资源

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<iframe src="table.html">这是提示信息，如果您看到此信息，说明您的浏览器不支持iframe标签</iframe>
	</body>
</html>

标签内容当浏览器不支持iframe标签时会显示出来
在这里插入图片描述

8.6.1 安全问题

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<iframe src="text.js" width="0" height="0">这是提示信息，如果您看到此信息，说明您的浏览器不支持iframe标签</iframe>
	</body>
</html>

从代码中可以看出，虽然html文件有内容，并且执行了test.js文件，但页面上什么提示信息都没有，存在安全隐患

8.7 表单标签

用于与服务器端交互

8.7.1 <form>元素

定义表单范围

8.7.1.1 action属性

指定服务端位置，表明接收表单数据的目的地，可以是页面

8.7.1.2 method属性

默认为get

  1. get
    提交的信息都显示在地址栏中；对于敏感的数据信息不安全；对于大体积数据不行，因为地址栏存储体积有限；将信息封装到请求消息的请求行中。
  2. post
    提交的信息不显示在地址栏中；对于敏感的数据信息安全；可以提交大体积数据；将信息封装到请求体中。
    15-HTML(GET和POST区别)——服务器代码待实现

http包结构
在这里插入图片描述

8.7.2 <input>元素
8.7.2.1 type属性

  1. text
    用于输入明文信息
    向服务器提交数据的表单组件需要指定name和value

  2. password
    用于输入不直接显示的信息，如密码

  3. radio
    单选按钮，多个单选按钮如果需要只能选中一个，通过设置name属性值相同实现。默认选中项通过"checked=checked"设置。

  4. checkbox
    多选框

  5. file
    文件

  6. image
    图片组件，具备与submit相同的提交效果，可以做成图片按钮，通过src属性指定图片路径

  7. hidden
    隐藏组件，携带的数据客户端无法看到，但服务器端需要知道

  8. button
    无默认点击事件的按钮，通过onclick属性自定义事件

  9. reset
    重置，还原组件的状态

  10. submit
    提交

8.7.3 <select>元素

默认选中项通过selected="selected"进行设置

8.7.4 <textarea>元素

9. <b>元素

加粗

10. <i>元素

斜体

11. <u>元素

下划线

12. <sub>元素

下标

13. <sup>元素

上标
在这里插入图片描述

14. <pre>元素

原样显示
在这里插入图片描述

15. 区域标签

区域标签，能封装数据还不具有特殊含义的标签，不像其他标签，都有具体的功能，像b元素，可以加粗字体，或者其他的元素，都有各自具体的功能。区域标签只为封装数据。

15.1 <div>元素

封装整行区域
在这里插入图片描述

15.2 <span>元素

封装行内区域
在这里插入图片描述

16. <p>元素

在这里插入图片描述

posted @ 2024-02-29 19:27  刘二水  阅读(73)  评论(0)    收藏  举报