WinDocs

切换主题

返回顶部
导航栏

常用标签

作者:winter wang
更新于:11 天前
字数统计:1.5k 字
阅读时长:6 分钟
阅读量:

1. 标题标签Heading

作为标题使用，并且依据重要性递减

<h1> 定义最大的标题。<h6> 定义最小的标题。

2. 段落标签Paragraph

可以把HTML文档分割成若干段落

html
<p> </p>

3. 换行标签Break

强制换行

html
<br />

注意：段落之间有缝隙，换行之后没有缝隙

4.文本格式化标签

突出重要性，比普通文本更重要

加粗

html
<strong></strong>
<b></b>

斜体

html
<em></em>
<i></i>

删除线

html
<del></del>
<s></s>

下划线

html
<ins></ins>
<u></u>

5. 盒子标签

没有语义，用来装内容

division 分割、分区 (一行只能放一个 大盒子)

span 跨度、跨距 (一行可以多个 小盒子)

html
<div></div>
<span></span>

6. 图像标签 image

html
<img src="" />
属性属性值说明
src图片路径必须属性
alt文本替换文本：图像不能显示的文字
title文本提示文本：鼠标放在图像上显示的文字
width像素设置图像宽度（如果需要改变图片的尺寸，应该使用CSS而不是HTML）
height像素设置图像高度
border像素设置图像边框粗细

7. 超链接 anchor

html
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像 </a>
属性作用
href指定链接的url值 （必须属性）
target链接页面打开方式，默认值(当前窗口打开页面)：_self; 在新窗口打开: _blank
title鼠标悬浮显示的文字

链接分类

1. 外部链接

html
<a href="http://www.baidu.com">百度</a>

2. 内部链接

html
<a href="xxxx.html">内部链接</a>

3. 空链接

html
<a href="#">空链接</a>

4. 下载链接

html
<a href="xxxx.zip" title="文件名.zip"> .exe文件或 zip压缩包</a>

5. 网页元素链接：文本、图片、表格、音频、视频都可以添加超链接

html
<a href="http://www.baidu.com"><img src="img.jpg" /></a>

6. 锚点链接：快速定位页面位置

  • 设置href为#name形式
  • 在目标位置标签，添加id属性=name
html
<h3 id="two">第二集介绍</h3>

<a href="#two">第二集</a>

8. 注释标签

快捷键：CTRL+/

html
<!-- 注释 -->

9. 特殊字符

特殊字符描述字符代码
 空格&nbsp;
<小于号&lt;
>大于号&gt;
&和号&amp;
¥人名币&yen;
©版权&copy;
®注册商标&reg;
°摄氏度&deg;
±正负号&plusmn;
×乘号&times;
÷除号&divide;
²平方2&sup2;
³立方3&sup3;

10. 表格标签

展示数据

10.1 相关标签

  1. <table></table> 用于定义表格的标签
  2. <tr></tr> 用于定义表格中的行，必须嵌套在<table></table>中
  3. <td></td> 用于定义表格中的单元格，必须嵌套在<tr></tr>中
  4. <th></th> 表头单元格标签 加粗居中
  5. <thead></thead> 定义表格的头部
  6. <tbody></tbody> 定义表格的主体
  • tr: table row
  • td: table data
  • th: table head
html
<table align="center" border="2" cellpadding="0" cellspacing="0" width="10" height="10" >
    <!-- 属性写道标签table里面去 -->
    <thead>
        <tr> 
            <th>属性名</th> 
            <th>属性值</th> 
            <th>描述</th> </tr>
    </thead>
    <tbody>
        <tr> 
            <td>align</td> 
            <td>left/center/right</td> <td>规定表格相对周围元素的对齐方式</td> 
        </tr>
        <tr> 
            <td>border</td> 
            <td>1/""</td> <td>规定表格单元是否有边框，默认""表示没有</td> 
        </tr>
        <tr> 
            <td>cellpadding</td> 
            <td>像素值</td> <td>规定单元边沿与其内容之间的空白，默认为1像素</td> 
        </tr>
        <tr> 
            <td>cellspacing</td> 
            <td>像素值</td> 
            <td>规定单元格之间的空白，默认2像素</td> </tr>
        <tr> 
            <td>width</td> 
            <td>像素值或百分比</td> 
            <td>规定表格的宽度</td> </tr>
    </tbody>
</table>

10.2相关属性

属性名属性值 描 述
alignleft/center/right规定表格相对周围元素的对齐方式
border1/""规定表格单元是否有边框，默认""表示没有
cellpadding像素值规定单元边沿与其内容之间的空白，默认为1像素
cellspacing像素值规定单元格之间的空白，默认2像素
width像素值或百分比规定表格的宽度

10.3合并单元格

  1. 合并代码
  • 跨行合并 rowspan="合并的单元格的个数"
  • 跨列合并 colspan="合并的单元格的个数"
  1. 目标单元格
  • 跨行：最上侧单元格为目标单元格，写合并代码
  • 跨列：最左侧单元格为目标单元格，写合并代码
  1. 删除单元格
1.11.2
2.12.22.3
3.23.3

11. 列表标签

布局

11.1 无序列表

ul 里面只能放 li

li 之间相当于一个容器，里面可以放其他任何元素

无序列表会带有自己的样式属性，实际使用用CSS设置

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

11.2 有序列表

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

11.3 描述列表 description list

标记一组项目及其相关描述，例如术语和定义，或者是问题和答案等

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

11.4 列表总结

标签名定义说明
ul无序列表里面只能包含li，没有顺序，使用较多。li里面可以包含任何标签
ol有序列表里面只能包含li，有顺序，使用较少。li里面可以包含任何标签
dl自定义列表里面只能包含dt和dd。dt和dd里面可以包含任何标签

Contributors

winter wang