HTML-常用标签

常用的文本标签

标题标签h1-h6

• h1~h6 数字越大，字体越小

• 所有标题标签都加粗

• 独占一行

• 默认上下有间距

• 有利于SEO优化，可以将标签里面的文本进行搜索引擎的收录，利用搜索排名

<h1>这是标题1</h1>
<h2>这是标题2</h2>
<h3>这是标题3</h3>
<h4>这是标题4</h4>
<h5>这是标题5</h5>
<h6>这是标题6</h6>

文字标签:font

<font color="颜色" size="数字" face="字体"></font>

color:颜色

size:大小 只能是1到7之间的数字

face:字体样式

HTML常用相关属性

1. bgcolor="颜色"   设置背景颜色
2. background="图片"  设置背景图片 

段落标签 p

• 一个段落就用一个P标签

• 独占一行，上下有间距

• 注意：p标签里面不能嵌套p标签，可以嵌套其他标签

  <p>
      段落文本
  </p>

br 换行(单标签)

hr 分割线(单标签)

strong/b 加粗

• 推荐使用strong

删除线标签del s

<del>
    ￥998
</del>

可以实现文字删除线的效果

内容居中：center

斜体 i / em

u下划线

sup上标签

sub下标签

pre 格式化标签

<pre>
    2 + 5
    =
    7
</pre>

可以实现格式化，经常放具有固定格式的文档

span标签

• 用于简短性文本或者提示性信息，没有任何样式

图片标签 img(单标签)

<img src="图片的路径" alt="图片加载失败时显示的文字" title="鼠标移入图片时显示的文字" width="图片的宽度" height="图片的高度">

• src：图片路径可以是网络图片路径，也可以是本地图片路径

  • 文件路径

    • 绝对路径：指目录下的绝对位置

    • 相对路径：是从当前文件出发（以当前文件为参考），去找指定文件的路径

      • ./ 表示当前路径查找

      ../ 返回上一级 多个../返回多个上一级

• alt：图片加载失败时显示的文字，用于图片加载失败时显示在页面上的文字。

• title：一般用于图片加载成功时解释说明的文字，鼠标移入图片时显示。

• width：宽度

• height：高度

• 注意：宽度和高度同时设置，可能会造成图片变形，只设置一个值时，另一个按照原图比例进行缩放

超链接 a

<a href="需要跳转的网页路径" target="新开网页的方式"></a>

• href：链接网页路径

  • 其他服务器的网页，必须以http或https开头

  • 本地的网页，建议使用相对路径

  • 锚点：以#开头，加上id名或者name名称，跳转到页面中指定位置

• target：新开网页的方式，默认会在当前窗口显示

  • _blank 新开一个窗口

  • _self 默认本窗口打开

锚点的使用

<a href="#锚点名称">连接名字</a>
<a href="地址#锚点名称">连接名字</a>
<!--关联其他页面锚点-->
<a id="锚点名称">内容</a>
<a name="锚点名称">内容</a>

注意：id权重大于name权重

###

div标签

• div是布局标签，可以看作一个布局容器

• 独占一行，没有任何样式

跑马灯标签

<marquee scrollamount="滚动的速度" behavior="alternate" direction="方向">公告：明天周五，要周末了，但是周六上班</marquee>

​
方向的属性：
left  向左
right 向右
up   向上
down  向下

• 已经废弃（功能比较单一），后面可以通过css3动画实现，还可以通过js控制

框架标签iframe

<ul>
    <li><a href="http://www.沙皮狗.com" target="frame">沙皮狗的忧伤</a> </li>
    <li><a href="http://www.baidu.com" target="frame">百度</a> </li>
</ul>
<iframe src="http://www.baidu.com" name="frame"  frameborder="1" width="1200px" height="500px"></iframe>

• target=""代表我们需要跳转页面时，控制我们自定义的框架，将目标网页渲染到我们指定的框架标签里面（name=“”中的值必须和target一致）

• 缺点：需要去指定宽高

特殊符号——转义字符

在HTML网页中要使用特殊符号，请转义

• 空格 &nbsp；

• 版权 &copy；

• 注册商标 ® &reg

• 小于 &lt；

• 大于 &gt；

表格标签

快速创建表格
table>(tr>td*列数)*行数

 <table border="1" width="宽度" height="高度" bordercolor="边框颜色" bgcolor="背景颜色" align="对齐方式">
        <tr>
            <td>商品名</td>
            <td>介绍</td>
            <td>数量</td>
            <td>价格</td>
        </tr>
        <tr>
            <td>小米手机</td>
            <td>有小米还有大米，有小米还有大米</td>
            <td>1</td>
            <td>100</td>
        </tr>
        <tr>
            <td>大米手机</td>
            <td>大米先生定制版</td>
            <td>10</td>
            <td>5</td>
        </tr>
    </table>

• table：代表表格，一个table代表一个表格外边框

  • border：设置表格的边框

  • width：宽度

  • height：高度

  • align：表格再页面中的对齐方式

    • left左对齐

    • right右对齐

    • center居中对齐

  • cellspacing：(外边距)设置单元格之间的间距

  • cellpadding：（内边距）设置单元格中内容到单元格边框之间的间距

  • bgcolor：设置背景颜色

  • bordercolor="" 边框颜色

• tr：代表行，一个tr代表一行

  • height：高度

  • align：当前行里面的数据在单元格中对齐方式

    • left左对齐

    • right右对齐

    • center居中对齐

  • bgcolor：设置背景颜色

• td：代表列，一个td代表一个单元格（列）

  • width：宽度，设置了当前这一列的宽度

    • 可以设置百分比，它参考父元素的宽度

    • 设置了一个单元格的宽度，会控制整个一列宽度

  • height：高度：设置一个单元格高度，可以控制整行的高度

  • align：当前单元格里面的数据在单元格中对齐方式

    • left左对齐

    • right右对齐

    • center居中对齐

  • bgcolor：设置背景颜色

• th：代表表头的单元格，默认文字加粗，水平居中对齐

• 注意：

  1. 表格默认是没有任何效果的，如果需要查看，那么添加边框border，默认表格大小由内容决定

  2. 单元格中的数据默认在水平方向左对齐，垂直方向居中对齐

  3. thead:代表表格的头部

     tbody：表格内容区域，用于动态生成的数据

     tfoot：表格的尾部

  4. tr里面只能放td或者th

  5. table设置宽高，表格中没有内容时，会均分，一旦有内容，会根据内容大小进行分配

合并单元格

• rowspan：跨行合并（上下合并），垂直方向合并单元格

• colspan：跨列合并（左右合并），水平方向上合并单元格

• 注意：这两个属性都是控制单元格td，合并了单元格，对应的被合并掉的单元格需要删除掉

表格嵌套

• 嵌套的表格放在单元格td里面

• 表格通过嵌套可以实现我们的页面布局

表格标签样式

• border-spacing: 0px; 设置边框外边距

• border-style:dashed； 设置边框线条样式

• border-color:red; 设置边框颜色

• border-radius: 30px; 设置边框圆弧

• border-collapse: collapse; 设置是否将表格边框折叠为单一边框

• text-align:center; 设置表格中文本的对齐方式。

• vertical-align: top/middle/bottom; 设置垂直对齐方式。