HTML基础学习笔记（中）

来源：互联网发布：西安财经行知特点编辑：程序博客网时间：2024/05/29 19:21

仅仅是自己对着W3CSchool整理的一些HTML基础知识点，敲一遍加深下印象也方便以后复习。

HTML文本格式化

<strong>This text is strong</strong>

<em>This text is emphasized</em>

<i>This text is italic</i>

<small>This text is small</small>

This text contains <sub>subscript</sub>

This text contains <sup>superscript</sup>

预格式文本

<pre></pre>标签中的内容保留换行和空格，很合适显示代码等格式

计算机输出代码

<code>Computer Code</code>

<kbd>Keyboard input</kbd>

<tt>Teletype text</tt>

<samp>Sample text</samp>

<var>Computer variable</var>

这些标签常用于显示计算机/编程代码。

地址

上海市杨浦区军工路516号<br/>

上海理工大学<br/>

邮编：200093

</address>

缩写和首字母缩写

缩写，鼠标移到缩写上会显示标签<abbr title="etcetera">etc.</abbr>

首字母缩写，鼠标移到缩写上会显示标签<acronym title="World Wide Web">WWW</acronym>

文字方向

Here is some Hebrew text

</bdo>

块引用

长块引用

长块引用浏览器会插入换行和外边距。

</blockquote>

短的引用

<q>

短引用

</q>

另：

<cite>定义引用、引证。<dfn>定义一个定义项目。

删除字与插入字效果

后面的两个字被<del>删除</del>了

后面的两个字是<ins>插入</ins>的

HTML CSS

如何使用样式

1.外部样式表

适用于样式应用到很多页面，可以通过一个文件来改变多个页面的外观

<head>

</head>

2.内部样式表

适用于单个文件使用特别的样式

<head>

body{background-color:red}

p{margin-left:20px}

</style>

</head>

3.内联样式

特殊的样式需要应用到个别元素

This is a paragraph

</p>

详见CSS教程http://www.w3school.com.cn/css/index.asp

图像标签和源属性

<img>是空标签，它只包含属性，并且没有闭合标签，在页面上显示图像，需要使用src属性。

替换文本属性(Alt)

alt属性为图像定义一串预备的可替换的文本。

图像背景

注：如果图像小于页面，图像会进行重复。

图像对齐方式

<img src = "images/a.jpg" align = "bottom">（默认对齐方式）

浮动图像

<p>

带有图像的一个段落，align属性为left，图像会浮动在文本的左侧。

</p>

<p>

带有图像的一个段落，align属性为right，图像会浮动在文本的右侧。

</p>

调整图像尺寸

图像链接

</a>

创建图像映射

http://www.w3school.com.cn/tiy/t.asp?f=html_areamap

HTML表格

表格由<table></table>定义，每个表格由若干行（行由<tr></tr>定义），每行分割为若个单元格（单元格由<td></td>定义，td即table data）

单元格内可以包含文本、图片、列表、表单、水平线、表格等

<tr>

</tr>

<tr>

</tr>

</table>

表格和边框属性

<tr>

</tr>

</table>

如果不定义边框，表格将不显示边框。

表格的表头

表格的表头使用<th>标签来定义。

大多数浏览器会把表头显示为粗体居中的文本。

<tr>

<th>Heading</th>

<th>Another Heading</th>

</tr>

<tr>

</tr>

</table>

表格中的空单元格

<tr>

</tr>

</table>

带有标题的表格

<caption>My title</caption>

<tr>

</tr>

</table>

跨行/跨列的单元格

跨行

<tr>

</tr>

<tr>

</tr>

</table>

跨列

<tr>

</tr>

<tr>

<td rowspan="2">Information</td>

<td>hahaha1</td>

</tr>

<tr>

<td>hahaha2</td>

</tr>

</table>

表格内嵌套标签

<tr>

<td>

<p>This is a pragraph in table</p>

</td>

</tr>

</table>

单元格边距

<tr>

</tr>

</table>

单元格间距

<tr>

</tr>

</table>

表格的背景颜色与背景图片

背景颜色

<tr>

</tr>

</table>

背景图片

<tr>

</tr>

</table>

单元格的背景颜色与图片

与表格的操作方式类似

框架(frame)属性

frame属性有：box-包围、above-上方、below-下方、hsides-上下、vsides-左右

<tr>

</tr>

</table>

HTML列表

无序列表

<ul></ul>标签定义列表，<li></li>标签定义项目，此项目使用粗体圆点进行标记

项目符号

有序列表

<ol></ol>标签定义列表，<li></li>标签定义项目，此项目使用数字进行标记

项目符号

定义列表

定义列表不仅是一列项目，而是项目及其注释的组合。

<dl></dl>标签定义列表，<dt></dt>定义项目，<dd></dd>定义注释

嵌套列表

以上列表均可以嵌套使用

0 0