HTML学习笔记五————总结

<head>标签

<body>标签


1.基本标签

a.<h1>~<h6>  标题标签

<hn 属性=“属性值”>标题文本</hn>

改变对齐方式,用align属性

                              left:左对齐

                              center:居中对齐

                              right:右对齐

注意:一般一个页面只能有一个<h1>,而<h2>~<h6>可以有多个


b.<p> 段落标签

包裹的内容被换行.并且也上下内容之间有一行空白.

    style="text-indent: 2em"可以设置样式为首行缩进两个字符。

    <blockquote></blockquote>可以用来设置整个段落的缩进。


c.文本格式化标签

<strong><b> 强调加粗(<b>不具备语义化强调的功能)

<em> <i> 强调斜体(<i>不具备语义化强调的功能)

<sub>下标文本,下角标

<sup>上标文本,上角标

<del> 加删除线方式

<ins> 加下划线方式

<u>: 文字下方加下划线

<strike>: 为文字加上一条中线.

<br>:换行.


d.引用标签

<blockquote> 引用大段的段落解释

<q> 引用小段的段落解释

<abbr> 缩写或首字母缩略词

<cite> 引用著作的标题


e.水平线标签

<hr>

属性:

align:设置水平线对齐方式,可选择left、center、right,默认为center居中对齐

size:设置水平线粗细,以像素 为单位,默认为2像素

width:设置水平线宽度,确定像素值或浏览器窗口的百分比(默认为100%)

color:设置水平线颜色,可用颜色名称、十六进制#RGB、rgb(r,g,b)设置颜色值


f:特殊符号

&gt;            > 大于

&lt;             < 小于

&nbsp        空格

&quot         引号

&copy        版权符号©

&reg;       注册商标®

&amp;      和号&

&yen;          人民币¥

&deg;       摄氏度

&plusmn;    正负号±

&times;     乘号*

&divide;       除号

&sup1;      上标1

&sect ;          §

&cent ;          ¢   

&middot ;      ·   

&pound ;       £   

&trade ;         ™   


g.<img> 图形标签

HTML中使用<img>标签来添加图片,<img>属于单标签,其语法格式如下

<img src=”图像URL”/>

重要属性有:src、title、alt、width、height、align

src  图片地址。

    title  鼠标悬浮在图片上的文字。

      alt  图片找不到时要替换的文字。如果图片资源使用的是外网资源,则不会显示要替换的文字。如果使用的是本网站的资源(相对路径给出),则找不到图片时会显示替换的文字,并保留图片设置的宽高结构。

    align  图片周围文字的垂直对齐情况。常用的属性值有:top(与图片的顶部对齐)、middle(与图片的中部对齐)、bottom(默认,与图片的底部对齐)。

        width  图片的宽

        height  图片的高 (宽高两个属性只用一个会自动等比缩放.)

img标签的属性

属性

属性值

描述

src

URL

图片的地址

alt

文本

图片显示不出来时的提示文字

title

文本

鼠标移动到图片上的提示文字

width

像素(XHTML不支持页面百分比)

设置图片的宽度

height

像素(XHTML不支持页面百分比)

设置图片的高度

border

数字

设置图片边框的宽度

vspace

像素

设置图片顶部和底部的空白(垂直边距)

hspace

像素

设置图片左侧和右侧的空白(水平边距)

align

left

将图片对齐到左边

right

将图片对齐到右边

top

将图片的顶端和文本的第一行文字对齐,其他文字位于图片下方

middle

将图片的水平中线和文本的第一行文字对齐,其他文字位于图片下方

bottom

将图片的底部和文本的第一行文字对齐,其他文字位于图片的下方

 


h.链接标签<a>

HTML中使用<a></a>标签来定义链接部分实现网页的跳转,其语法格式如下。

<a href=“链接页面地址” target=“链接打开的方式”>链接对象</a>

重要属性有三个:href、target、name

href  超链接地址:可以是Web上任意资源,包括图片,网页,样式,脚本文件等。href="#"时,表示被链接页面就是当前页面。

target  文档打开时要显示的目标位置,属性值一般有:_blank(新窗口中打开)、_self(默认,在超链接所在的容器中打开)、_parent(在超链接的父容器中打开)、_top(整个容器中打开)、name(框架名称)。

target取值表

属性取值

打开方式

_self

在当前窗口打开链接,默认方式

_blank

在新的窗口中打开链接

_top

在顶层框架中打开链接

_parent

在当前框架的上一层打开链接

目前常用的取值有_self和_blank两种

name  锚记名称。作用:跳转到文档的某个地方。返回首页。


I:列表标签

<ul> 无序列表标签

             <li>标签表示列表中的每一项

无序列表type属性取值表

属性取值

显示效果

disc(默认值)

实心圆(●)

circle

空心圆(○)

square

实心正方形(■)

<li></li>之间相当于一个容器,可以容纳所有的元素。但是<ul></ul>中只能嵌套<li></li>,不允许直接在<ul></ul>标记中输入文字。

<ol> 有序列表标签

             <li>标签表示列表中的每一项

              属性主要有type和value

                          

  • type指明项目的类型,属性值有:A,a,I,i,1,disc(实心圆),square(实心正方形),circle(空心圆)。
  • value表示序号值从几开始。

有序列表type属性取值表

属性取值

显示效果

1(默认值)

数字(1、2、3……)

a

小写英文字母(a、b、c……)

A

大写英文字母(A、B、C……)

i

小写罗马数字(i、ii、iii……)

I

大写罗马数字(I、II、III……)

<dl> 自定义列表标签

<dl>

<dt>定义名词(列表标题)</dt>

<dd>名词解释和描述(列表项)</dd>

……

</dl>

上面的语法中,<dl></dl>标签用于定义列表,<dt></dt>和<dd></dd>并列嵌套于<dl></dl>中,其中<dt></dt>标签用于定义专业术语或名词,<dd></dd>标签用于对名词进行解释和描述。一对<dt></dt>可以对应多对<dd></dd>,即一个名词可以有多个解释和描述

 1   <!doctype html>

 2   <html>

 3   <head>

 4   <meta charset="utf-8">

 5   <title>列表标签</title>

 6   </head>

 7   <body>

 8   <dl>

 9        <dt>HTML</dt>

 10      <dd>超文本标记语言</dd>

 11      <dt>CSS</dt>

 12      <dd>层叠样式表</dd>

 13      <dt>JavaScript</dt>

 14      <dd>网页脚本语言</dd>

 15  </dl>

 16  </body>

 17  </html>


 

J:<div>与<span>

div全称为division,“分割、分区”的意思,<div>标签用来划分一个区域,相当于一块区域容器,可以容纳段落、标题、表格、图像等各种网页元素。即HTML中大多数的标签都可以嵌套在<div>标签中,<div>中还可以嵌套多层<div>,用来将网页分割成独立的、不同的部分,来实现网页的规划和布局。

<span>标签是用来修饰文字的,也叫做内联标签

<div>标签和<span>标签,多数情况下需要配合CSS样式


 

K:<table>表格标签

 

每个表格有三个必须的标签,<table>、<tr>和<td>三个标签,用来创建表格,其语法格式如下。

 

<table>

 

 <tr>

 

      <td>单元格内容</td>

 

……

 

 </tr>

 

</table>

上面三个标签是创建表格的基本标签,其中<table></table>标签用于定义一个表格。<tr>标签用于定义表格中的一行,必须嵌套在<table></table>标签中,在<table></table>标签中包含几对<tr></tr>,表示该表格有几行。<td></td>标签用于定义表格中的单元格,必须嵌套在<tr></tr>标签中,一对<tr></tr>包含几对<td></td>,表示该行中有多少个单元格(列)。

表头与标题:

<th>表头

 

表头<th>是<td>单元格的一种标题,其本质还是一种单元格,一般位于表格的第一行或第一列,用来表明这一行或列的内容类别。浏览器会将表头默认以粗体居中的样式显示在网页中。

<th>标签和<td>在本质上都是单元格,但这两种不可以互换使用。th,即“table header(表头单元格)”。而td,即“table data(单元格)”。

<caption>表格标题

表格一般都有一个标题,用来表明表格的内容,一般位于整个表格的第一行,使用<caption>标签。一个表格只能含有一个表格标题。

表格语义化:

为了使网页内容更好的被搜索引擎理解,在使用表格进行布局时,HTML中引入了<thead>、<tbody>和<tfoot>这三个语义化标签,用来将表格划分为头部、主体和页脚三部分。用这三个部分来定义网页中不同的内容,三个标签的详细理解如下。

<thead></thead>标签:用于定义表格的头部,位于<table></table>标签中,一般包含网页的logo和导航等头部信息。

<tfoot></tfoot>标签:用于定义表格的页脚,位于<table></table>标签中<thead></thead>标签之后,一般包含网页底部的企业信息等。

<tbody></tbody>标签:用于定义表格的主体,位于<table></table>标签中<tfoot></tfoot>标签之后,一般包含网页中除头部和底部以外的其他内容。

<thead>、<tbody>和<tfoot>三个标签不带任何效果,只是更好提供了语义化的功能,根据表格的需求尽量添加相应的语义化标签。需要注意<thead>、<tfoot>这两个标签在一个<table>标签中只能出现一次,而<tbody>标签可以出现多次。

rowspan:合并行使用<td>或<th>标签的rowspan属性

colspan:合并列则用到<td>或<th>标签的colspan属性

cellpadding:用于设置单元格内容与单元格边框之间的空白间距,默认为1px.(内边距,单元格与内容之间的距离)

cellspacing:属性用于设置单元格与单元格边框之间的空白间距,默认为2px(外边距,单元格的间距,设置为0时,表格变为实线表格)

border:(表格边框)

align(水平对齐方式,<th>标签的align属性默认为center,<td>标签的align属性默认为left。<table>标签也有align属性,用来设置表格在网页中的水平对齐方式)

bgcolor(背景颜色)

width(表格的宽度,可以用%或者像素,最好通过css来设置长宽)

<table>标签常用属性

属性名

含义

属性值

width

设置表格的宽度

像素值(width属性可以设置单元格的宽度,当一列有多个不同width属性值时,取最大值作为这一列的宽度)

height

设置表格的高度

像素值(height属性可以设置单元格的高度,当一行有多个不同height属性值时,取最大值作为这一行的高度)

align

设置单元格内容的水平对齐方式

left(左对齐)、enter(居中对齐)、right(右对齐)

valign

设置单元格内容的垂直对齐方式

baseline(基线对齐)、top(上对齐)、middle(居中对齐)、bottom(下对齐)(设置单元格的内容垂直对齐的方向,默认为center(居中对齐))


L:<form>标签

 

 

框架

猜你喜欢

转载自www.cnblogs.com/anniedaniel/p/12456680.html