HTML笔记 常用标签

换行标签

<h1 - 6> </h1 - 6> 标题
<p> </p> 换行
<br/> 另起一行


文本格式标签

<strong> </strong> 或 <b> </b> 加粗
<em> </em> 或 <i> </i> 斜体
<del> </del>或<s> </s> 删除线
<ins> </ins>或<u> </u> 下划线
<div> </div> 独占一行
<span> </span> 占一个小板块


图片标签

<img src = “路径” />
<img src = “…/路径”> 上一级文件夹
<img alt = ” “ /> 图片显示不出来时显示的文字
<img title = ” " / > 鼠标放在图片上,显示文字
<img weight = ” " / > 设置宽度
<img heigh = ” " /> 设置高度
宽度和高度设置一个就可以了,另一边等比例缩放,且这个路径是同一级路径

绝对路径是 \(反斜杠),相对路径和网络图片绝对路径是 / (斜杠)


超链接标签

  1. 外部链接
<a href = "网页http路径,如https://editor.csdn.net" target = "_self(在自己的页面上跳转) _blank(在新的页面跳转)">网站名字,如腾讯</a>
  1. 内部链接,用来链接同一个文件夹内的网站
<a href = "文件名,如 huft.html"> 学校简介 </a>
  1. 空链接,点击无转接
<a href = "#"> 首页 </a>
  1. 下载链接
<a href = " 文件路径,和图片路径一样" > 下载 </a>
  1. 元素链接,可以让一张图片变成链接,这样点击了图片就跳转到百度了
<a href = "http://www.baidu.com"> <img src = "img.jpg"/> </a>
  1. 锚点链接,点击后直接跳到同页面的那个部分
    比如点击"个人生活",直接跳到同一页的那个部分
    跳转的地方只能是标题

<a href = "#trag"> 个人生活 </a>   // 这个目标必须是加  # 的   

<h3 id = "trag"> 标题 </h3>
  1. 特殊符号
    在这里插入图片描述
    特殊符号后面一定要加 ;
&nbsp;&nbsp;&nbsp;究    // 之间空了3个格

&lt;  p  &gt;            // 显示为 <p>

表格

  1. 整体表格
    属性中可以设置大小width
<table> </table>
  1. 表格中的行
<tr> </tr>
  1. 加粗居中显示的单元格
<th> </th>
  1. 每行中的单元格
<td> </td>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 人物表格 </title>
</head>
<body>
    <table>
        <tr> <th> 姓名 </th> <th> 年龄 </th>  <th> 性别 </th> </tr>
        <tr> <td> yyr </td> <td> 21 </td> <td></td> </tr>
        <tr> <td> ljj </td> <td> 20 </td> <td></td> </tr>
    </table>
</body>
</html>

在这里插入图片描述

  1. 结构标签
    我们将表头放在<thead> </thead>
    将数据部分放在<tbody> </tbody>
    这两块都放在<table> </table>里面
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 人物表格 </title>
</head>
<body>
    <table>
        <thead>  <!-- 表头 -->
            <tr> 
                <th> 姓名 </th> 
                <th> 年龄 </th> 
                <th> 性别 </th> 
            </tr>
        </thead>

        <tbody>  <!-- 数据体 -->
            <!-- 第一行 -->
            <tr> 
                <td> yyr </td> 
                <td> 21 </td> 
                <td></td> 
            </tr>
            <!-- 第二行 -->
            <tr> 
                <td> ljj </td> 
                <td> 20 </td> 
                <td></td> 
            </tr>
        </tbody>    
    </table>
</body>
</html>
  1. 合并表格
    如果我们要跨行合并,使用rowspan="2",在最上面的那个单元格的<td>或者<th>中设置属性,2代表合并两个表格。
    如果要跨列合并,使用colspan="2",在最左边的单元格设置。
    然后删除被合并的单元格。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 表格 </title>
</head>
<body>
    <table width = "500" height = "250" border = "1" cellspacing = "0">
    	 <!-- 第一行 -->
        <tr > 
            <th>  </th> 
            <th colspan="2">  </th> 
        </tr>
       
        <!-- 第二行 -->
        <tr> 
            <td rowspan="2">  </td> 
            <td>  </td> 
            <td>  </td> 
        </tr>
        <!-- 第三行 -->
        <tr> 
            <td>  </td> 
            <td>  </td> 
        </tr>
         
    </table>
</body>
</html>

在这里插入图片描述

©️2020 CSDN 皮肤主题: 游动-白 设计师:上身试试 返回首页