HTML常用标签1

文章目录

HTML 常用标签1 文本格式化标签2 div 和 span3 图像标签和路径4 超链接5 注释和特殊字符6 表格标签6.1 普通表格6.2 合并单元格 7 列表7.1 无序列表7.2 有序列表7.3 自定义列表

HTML 常用标签

1 文本格式化标签

加粗<strong></strong> (<b></b>) 倾斜<em></em> (<i><i/>) 删除 <del></del> (<s><s/>) 下划线<ins></ins> (<u><u/>)

2 div 和 span

<div> 和 <span> 是没有语义的，他们就是一个盒子，用来装内容的。 div 是division的缩写，表示分割、分区。span 意为跨度、跨距。 <div> 标签用来布局，但是一行只能放一个<div>.大盒子 <span> 标签用来布局，一行可以放多个<span>，小盒子

span是小格子 div是大格子

3 图像标签和路径

图像标签属性：

属性属性值说明src图片路径必须属性alt文本替换文本，图像不能显示时，显示的文字title文本提示文本，鼠标放到图像上，显示的文字width像素设置图像的宽度height像素设置图像的高度border像素设置图像的边框粗细

路径之相对路径 图片相对于HTML页面的位置

相对路径分类符号说明同一级路径图像文件位于HTML文件同一级 如 <img src="1.jpg">下一级路径/图像文件位于HTML文件下一级 如 <img src="images/1.jpg">上一级路径…/图像文件位于HTML文件上一级 如 <img src="../1.jpg">

路径之绝对路径 是指目录下的绝对位置，直接到达目标位置 如：“D:\web\img\1.jpg”.或者完整的网络地址：“http://www.baidu/logo.jpg”

4 超链接

<a href="跳转目标" target="目标窗口的弹出方式" > 文本或图像</a> 1 外部链接： <a href="http://www,baidu.com">百度</a> 2 内部链接：网站内部页面之间的相互链接。直接链接内部页面名称即可。 <a href="index.html">首页</a> 3 空连接 ： <a href="#">首页</a> 4 下载链接 ： <a href="img.zip">首页</a> 5 网页元素的链接： <a href="#"><img src="img.jpg "/></a> 6 锚点链接：点击链接可以快速定位到页面中的某个位置。 在链接文本的 href 属性中，设置属性值为 #文字 的形式，如<a href="#two">第二集</a> 找到目标位置标签，里面添加一个id属性=刚才的名字，如：<h3 id="two">第二集介绍</h3>

两个属性href 和 target 的作用

属性作用href用于指定连接目标的 url 地址，当标签应用 href 属性时，它就具有了超链接的功能target用于指定链接页面的打开方式，其中_self 为默认值，_blank 为在新窗口中打开方式

5 注释和特殊字符

字符描述字符的代码注释代码注释<!-- -->空格空格符&nbsp<小于号&lt>大于号&gt&和号&amp￥人民币&yen©版权&copy®注册商标&reg℃摄氏度&deg±正负号&plusmn×乘号&times÷除号&divide²平方&sup2³立方&sup3

6 表格标签

6.1 普通表格

表头标签一般用 (table head缩写)可以加粗居中显示 表格代码框架基本语法如下所示：

<table> <tr> <!-- 行属性 --> <th>表头</th> .... <tr> <tr> <!-- 行属性 --> <td>普通列元素</td> .... <tr> .... </table> 属性名属性值描述alignleft、center、right规定表格相对周围元素的对齐方式border1或" "规定表格单元是否拥有边框，默认为""，表示没有边框cellpadding像素值规定单元边沿与其内容之间的空白，默认1像素cellspacing像素值规定单元格之间的空白，默认2像素width像素值或百分比规定表格的宽度

在表格标签中，分别用：$<thead>$ 标签表示表格的头部区域；$<tbody>$标签表示表格主体区域

6.2 合并单元格

合并单元格分为跨行、跨列两种。 跨列合并colspan 跨行合并rowspan 下图所示为合并行和列的单元格

7 列表

7.1 无序列表

列表基本语法格式如下：

<ul> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> ... </ul>

$<ul>$ 中只能嵌套$<li>$，输入其他标签是不允许的。 $<li>$ 之间相当于一个容器，可以容纳所有元素。

7.2 有序列表

有序列表的基本语法格式如下：

<ol> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> </ol>

7.3 自定义列表

基本语法如下：

<dl> <dt>名词1</dt> <dd>名词1解释1</dd> <dd>名词1解释2</dd> ... </dl>

$<dl>$标签用于定义描述列表(或定义列表),该标签会与$<dt>$(定义项目/名字)和$<dd>$一起使用。