网页和HTML介绍之三

最新推荐文章于 2024-01-06 12:07:19 发布

码农大圣

最新推荐文章于 2024-01-06 12:07:19 发布

阅读量471

点赞数

分类专栏： java基础 java基础

本文链接：https://blog.csdn.net/zalan01408980/article/details/94858340

版权

java基础同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

java基础

4 篇文章 0 订阅

订阅专栏

HTML常见标签

基本标签

:定义HML注释的标签;

<html>:定义HTML文档的根标签;

<head>:定义HTML页面的头部标签;

<title>:定义HTML页面标题,放置于<head></head>之间;

<body>:定义HTML页面主体部分;

设置关键字：<meta name = "keywords" content="Java,etcxm"/>
设置描述： <meta name = "description" content="java培训"/>
设置作者： <meta name = "author" content="will"/>
设置字符集：

设置页面定时跳转：

排版标签

<h1>到<h6>:定义标题一到标题六,和world一致;

<p>:定义段落,使用如:<p>床前明月光</p><p>疑是地上霜</p>

<div>:定义文档中的结构;为HTML提供结构和背景;

<span>:和<div>基本相似,区别是<span>定义的节默认不换行;

<br/>:单标签,插入一个换行;

<hr/>:单标签,定义一条水平线;

<center>:网页的内容默认是居左显示,而<center></center>之间的内容居中;

<address>:表示一个地址,浏览器默认以斜体显示其包含文本;

<pre>:该标签表示的文本可”预格式化”,即该标签能保留文本中的空格,回车,制表符等字符;

文本标签

<font>:用于设置字体颜色,大小,字体;

<b>:定义粗体文本;<b>我是粗体文本</b>

<i>:定义斜体文本;

<em>:定义强调文本,效果和<i>差不多;

<strong>:定义粗体文本,和<b>效果差不多;

<sup>:定义上标文本,主要做数学上的次方表达式;

<sub>:定义下标文本,主要做化学上的分子式;

<bdo>:定义文本显示方向,属性dir值有ltr(左到右)和rtl(右到左);

<del>:定义删除体文本,即文本有中线;

<blink>:可定义闪烁文本,但是有浏览器不兼容问题;

语义相关标签

超链接和锚点

a标签:可定义锚(anchor),锚有两种用法：

通过使用 href 属性，创建指向另外一个文档的链接（或超链接）;
通过使用 name 或 id 属性，创建一个文档内部的书签（也就是说，可以创建指向文档片段的链接）;

<a name =”A1”>第一章内容</name>

<a name =”A2”>第二章内容</name>

<a> 标签的两个重要属性:

href:它指链接的目标,也就是超链接关联的另一个资源;

target:指定使用框架集中的哪个框架来装载另一个资源;属性值有:

_slef:表示自身,默认;
_blank:新窗口;
_top:顶层框架;
_parent:父框架;

<base>:标签为页面上的所有链接指定默认地址或默认目标;<base>必须位于 <head></head>标签之间;

<a>标签还可以发送邮件:

列表相关标签

四大名著

西游记
红楼梦
三国
演义

<ul>:定义无序列表;该元素只能包含<li>子标签;

type属性:可指定列表项目符号类型,属性值有:

disc:表示实心圆点;●
square:表示空心圆圈;○
circle:表示实现方块;■

<ol>:定义有序列表;该元素只能包含<li>子标签;

type属性:可指定列表项目序号类型,属性值有:

A:表示使用大写英文字母作为序号;如A、B、C 等;

a:表示使用小写英文字母作为序号;如a、b、c 等;

I:表示使用大写罗马数字作为序号;如I、II、III 等;

i:表示使用小写罗马数字作为序号;如i、ii、iii 等;

1:表示使用阿拉伯数字作为序号;如1、2、3 等;

start属性:可表示列表的起始序号;

<li>:定义列表项目,该标签可以包含多种子元素;如<li>三国演义</li>

<dl>:用于定义列表;该标签只能有<dt>,<dd>两种子标签;

<dt>:定义列表项的标题;

<dd>:定义普通列表项;

图片标签

img标签,用于向网页中嵌入一张图片;请注意,从技术上讲<img> 标签并不会在网页中插入图像,而是从网页上链接图像。

<img> 标签有两个必需的属性：src和alt:

src:该属性指定显示图片文件所在位置;

alt:该属性指定一段文本,可用于当图片不能显示时显示的提示信息;

height:指定图片高度,可是像素值或百分比;

width:指定图片宽度,可是像素值或百分比;

<map>:创建图像地图:指带有可点击区域的一幅图像

<img>做图片超链接;

表格标签

<table>:用于定义表格,<table>由0或1个<caption>子标签,0到1个<thead>子标签,0到1个<tfoot>子标签,多个<tr>子标签,多个<tbody>子标签组成;

<table>常用的属性如下:

border:指定表格边框的宽度,默认是0;

cellpadding:指定单元格内容和单元格边框的间距,值可是像素或百分比;

cellspacing:指定单元格之间的间距,值可是像素或百分比;

width:指定表格的宽度,值可是像素或百分比;

<caption>:用于定义表格的标题,必须放在<table></table>之间;

<tr>:定义表格行,该标签只能有<td>或<th>子标签;

<td>:定义单元格,放在<tr>中,表示把一行分成N个单元格;(N取决于N对<td>); <td>常见属性如下:

colspan:指定该单元格跨多少列,属性值是数字;
rowspan:指定该单元格横跨的行数;
height:指定单元格的高度;
width:指定单元格的宽度;

<th>:定义表格页眉的单元格;用法和<td>标签一直,只是显示效果有差别;

<tbody>:定义表格的主体,该标签只能包含<tr>子元素;使用<tbody>标签可以将一个表格分成几个独立的部分;<tbody>可以讲表格里的一行或多行合并成一组,以后使用Ajax编程的时候常常需要动态修改表格的某几行,此时就得使用<tbody>标签了;

<thead>:定义表格头,用法和<tbody>一致,功能有点差别;

<tfoot>:定义表格脚,用法和<tbody>一致,功能有点差别;

<thead>,<tbody>,<tfoot>标签可以对表格的行进行分组,每对<tbody>就是一组;除此之外,当创建某个表格时.希望拥有一个标题行,以及底部的一个统计行;当打印表格式,表格头和表格脚的数据也会包含在数据的页面上;

无论<thead>,<tbody>,<tfoot>三者的先后顺序如何,页面上总会是最上面显示表格头,中间是显示表格体,最下面显示表格脚数据;一般开发中建议从上到下的顺序是:<thead>,<tfoot>,<tbody>;好处是即使网速慢没有加载出表格体的数据,但是表格头和表格脚的信息会先显示出来,以”安抚民心”;

表单标签

form标签,用于生成输入表单,该标签不可见;在HTML5之前,表单控件,如单行文本框,密码框,单选框等都必须放在<form></form>之间;常见属性如下:

action:必填属性,表示当点击”提交”按钮时,表单数据提交到哪个地址;
method:指定表单提交时的请求类型,该属性值有get或post,分别用于GET或POST请求,默认是get方式,开发建议使用post方式;
enctype:指定表单数据的编码方式,属性有3个值:

application/x-www-form-urlencoded	默认,只处理表单控件里的value属性值;
multipart/form-data	以二进制流的方式处理表单数据,文件上传时必须使用该属性值;
text/plain	不对特殊字符编码,适合于表单的属性值为mailto”URL形式,也就是说该方式适用于表单邮件的发送;