结构标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">             //编码方式为utf-8
		<title>第一个HTML</title>
	</head>
	<body>
        <p>
            这是我的第一个html文件
        </p>
    </body>
</html>

以上为基本应该存在的结构框架，效果图如下：

2

文字段落标签

标题与段落标签

标题标签

<h1> <h2> <h3> <h4> <h5> <h6> //从左到右重要性递减
    <hn align="对齐方式">标题内容</hn>

段落标签

<p align="对齐方式">段落文本</p>

水平分割线标签

<hr 属性="属性值"/>
//size设置粗细，align对齐方式，width设置宽度，color设置颜色，noshade设置3d阴影

换行缩进标签

<br/>						//强制换行
<blockquote></blockquote>   //缩进

文本的格式化标签

<b></b>						//粗体
<strong></strong>			//强调，一般为粗体
<i></i>						//斜体
<em></em>					//强调，一般为斜体
<del></del>					//删除线
<ins></ins>					//加下划线
<sup></sup>					//上标
<sub></sub>					//下标

特殊字符标签

特殊字符 字符代码 特殊字符 字符代码
空格 &nbsp； “ &quot；
< &lt； © &copy；
> &gt； ® &reg；
& &amp； × &times；

图像与超链接标签

图像标签

<img src="图像URL"/>

超链接标签

创建超链接

<a href="资源地址" target="窗口名称" title="链接提示">链接对象</a>

绝对路径和相对路径

  1. 绝对路径：网络主页上所存在的，或是文件在硬盘上的真实路径。
  2. 相对路径：以当前文件为起点，进行相对文件的查找。
./          //指当前文件所在目录下（可省略）
../         //指当前文件所在目录的上一目录下

锚点链接

锚点定义：

<a name="锚点名称">文字</a>
//或将name改做id

跳转锚点：

<a href="锚点名称">链接的文字</a>

影像地图

<img src="图像地址" usemap="#影像地图名称">   //使用影像地图

<map name="影像地图名称">					  //定义影像地图
	<area shape="热区形状" coords="热区坐标" href="链接地址">
    <!--此处可以添加多个area-->
</map>

shape与coords的附加说明：

  • shape=”circle“，coords=”x,y,z“（x,y定义圆心位置，z为半径)
  • shape=“polygon”，coords=“x1,y1,x2,y2……”（每个顶点的坐标都要写入）
  • shape=“rectangle”，coords=“x1,y1,x2,y2”（一个顶点的坐标和其对角顶点坐标）

表格与列表标签

表格标签

表格的定义范例

<table>
    <tr>								//表格的第一个横行
    	<th>此处表头字体自动加粗</th>		 //具体到行内的一个单元格
        <td></td>
        <td></td>
    </tr>
    <tr>								//表格的第二个横行
    	<td></td>
        <td></td>
        <td></td>
    </tr>
</table>
<caption>定义表格的标题</caption>
<thead>定义表格的表头</thead>
<tbody>对表格中的主体内容进行分组</tbody>
<tfoot>对表格中的页脚内容进行分组</tfoot>
// 后三个标签应该结合使用

表格标签”table”的属性：

属性 描述
width/height 表格的宽度（高度），值可以是数值或百分比，数值表示像素点数，百分比是占浏览器宽度（高度）的比例
align 表格相对周围元素的对齐方式
background 表格的背景图片
bgcolor 表格的背景颜色，一般后期通过样式控制，不建议使用
border 表格边框宽度（像素为单位）
bordercolor 表格边框的颜色
cellspacing 单元格之间的间距
cellpadding 单元格内容与边界之间空白距离的大小

表格设置border时，可以设置显示隐藏边框

frame 描述 frame 描述
box 显示所有边框 alove 只显示上边框
void 不显示边框 below 只显示下边框
hsides 只显示上下边框 lhs 只显示左边框
vsides 只显示左右边框 rhs 只显示右边框

单元格td的设置

属性 描述 属性 描述
width/height 单元格的宽和高，接受绝对值和相对值 align 单元格内容的水平对齐方式（left、right、center等）
colspan 规定单元格横跨列数（纵向合并单元格） valign 单元格内容的垂直对齐方式（top、middle、bottom等）
rowspan 规定单元格横跨行数（横向合并单元格） bgcolor 单元格的背景色

列表标签

  • 无序列表

    <ul type=编号类型>
        <li>第一项</li>
        <li>第二项</li>
        <li>第三项</li>
    </ul>

    type决定列表图标类型：

    • disc为实心圆（默认）

    • circle为空心圆

    • square为方块

  • 有序列表

    <ol type="编号类型" start=value>
        <li>第一项</li>
        <li>第二项</li>
        <li>第三项</li>
    </ol>

    type决定列表序号样式：

    • type=1：1,2,3,4,5……
    • type=A：A,B,C,D,E……
    • type=a：a,b,c,d,e……
    • type=I：I,II,III,IV,V……
    • type=i：i,ii,iii,iv,v……

    reversed属性为true时，可以实现倒序排列，start指定第一项的序号

  • 定义列表

<dl>
    <dt>第一项</dt><dd>注释一</dd>
    <dt>第二项</dt><dd>注释二</dd>
    <dt>第三项</dt><dd>注释三</dd>
</dl>

  • 实例：

<ul type="circle">
    <li>北京</li>
    <li>上海
        <ol start="6" type="1" reversed="true">
        <li>浦东新区</li>
        <li>徐汇区</li>
        <li>长宁区</li>
        <li>普陀区</li>
        </ol>
    </li>
    <li>广州</li>
    <li>深圳</li>
</ul>

以上代码为无序列表嵌套有序列表，效果图如下

1

页面布局与float浮动

  • 页面布局方式

    主要包括文档流和浮动层，通常以文档流为默认

    文档流：从上到下，从左到右排布，遇到块级元素换行

    浮动层：给元素的float属性赋值后元素将紧贴父元素的左右边框，从上到下，从左到右，遇块换行排布，能够实现板块的拼接

    3

    前者为文档流，后者为div2向右浮动

    4

  • float浮动的特点

    1. 让页面中的元素可以水平排列
    2. 浮动元素会完全脱离文档流，不再占据文档流中的位置
    3. 设置浮动后，元素会向父元素的左侧或右侧移动
    4. 浮动元素默认不会从父元素中移除
    5. 浮动元素向左或向右移动时，不会超过前面的其他浮动元素
    6. 如果浮动元素的上面是一个没有浮动的块级元素，则浮动元素无法上浮
    7. 浮动元素不会超过上一个浮动的兄弟元素，最多保持等高