HTML常用标签_html 如何在tr添加 p-CSDN博客

本文链接：https://blog.csdn.net/zhwqqqqq/article/details/123036568

一、路径

1.绝对路径：目标文件所在的完成的路径（带盘符）

本地文件的绝对路径 D:\素材\其他\a.jpg

服务器的绝对路径：https://www.xxxxxx.com/demo.jpg

2.相对路径：目标文件相对于引用文件所在的位置

/ 根目录（绝对路径）

./ 当前目录（相对路径）

../ 退出当前目录（相对路径）

虽然windows下用\分隔路径，但是建议用/分隔路径，这样就与服务器统一了

相对路径与绝对路径比较
3.绝对路径是完整的路径，不依赖于当前文件所在位置，文件放在哪里都能正确的找到资源（安全）
相对路径依赖当前文件所在位置，文件所在位置改变就找不到资源了（不安全）

二、常用标签

1.h系列标签

语义：标题标签

有h1-h6，h标签虽然是容器级标签，但是h系列标签并不能互相嵌套。默认加粗，具有换行符。

     <!-- 不能嵌套 -->
    <h2>hello <h1>爱创课堂</h1></h2>

2.p系列标签

语义：跟文本添加段落语义。

p 标签可以嵌套在块级元素内，但是p标签自身不能嵌套。

    <!-- p不能嵌套块级标签和自身 -->
    <p>hello <p>ickt</p> !</p>
    <p>hello <div>ickt</div> !</p>

3.div标签和span标签

div：（divison）用来划分独立的逻辑块。

div是一个容器，划分一个大的区域本身在网页中没有任何的默认样式，可以放置任何标签和内容。 div会把页面分割成一个小的区域。 div作为容器，如果没有内容撑起，或者不设置宽高，是没有默认效果。

span：文本级的标签，只能放文字、图片、表单元素等，用来修饰部分文本的效果小范围的修饰。

注：大的内容放在div里，小的内容放在span。div盒子内容会独占一行，span的内容会写在一行。

4.a标签

超链接标签，页面之间的跳转，就是通过a标签进行跳转，超链接是网页的灵魂。a标签是一个双标签，有开始和结束标记。

属性：

href 设置超链接的地址 #代表链接到当前页面或页面的某个位置
title 文本提示信息
rel 规定当前文档与被链接文档之间的关系
download 规定被下载的超链接目标
media 规定被链接文档是为何种媒介/设备优化的。
type 规定被链接文档的的 MIME 类型。
target 页面的打开方式属性值

_self 当前页面中打开新的页面（新页面覆盖当前页面）

_blank 在新的页面中打开（会创建一个新的窗口来打开新页面）

_parent 页面的父窗口或父框架中打开

_top 将页面在整个浏览器窗口打开

framename 在指定的框架中打开页面

5.锚点

锚点设置：第一步首先给标签设置一个id属性。

第二步通过一个a标签href属性去链接这个锚点，不仅可以链接当前页面的指定位置，还可以链接到其他页面的指定位置。

注：a标签的href链接锚点id时需要注意加上 # 号键

       <!-- 下锚 -->
    <h1 id="demo20">020</h1>
       <!-- 跳转 -->
    <a href="#demo20">定位20</a>

三、列表

1.无序列表

通过ul和li定义，项与项之间没有顺序的先后之分

ul unordered list

li list item

注：ul 和 li 这两个标签必须同时出现，不能单独书写。

ul 里可以嵌套一个或者多个 li 标签，但 ul 里面只能放li标签，不能放其他内容。

li 标签是一个典型的容器级标签，可以放置任何的内容标签，甚至可以嵌套子级ul 与 li。

默认 li 的前面小圆点的样式，我们可以通过 type 属性修改：

disc 默认空心圆 circle 空心圆 square 实心方块 none 空

 <ul type="disc">
        <li>5</li>
        <li>谢s</li>
        <li>特</li>
        <li>中x</li>
 <!-- li是一个容器级标签，可以嵌套其它的 -->
        <li>
            <img src="./img/1.gif" alt="">
        </li>
  </ul>

2.有序列表

通过ol和li定义，项与项之间有顺序。

ol ordered list有序的列表

li list item列表项

注：ol 和 li 也是一组标签，必须同时出现。

ol 里只能嵌套 li 标签。li 不能脱离 ol 自己出现。ol 里可以嵌套多个 li 标签。

li 是一个容器级标签，里面可以放置任何内容，甚至 ol、ul。

type属性：

A 顺序显示为大写英文字母

a顺序显示为小写英文字母

I顺序显示为大写罗马数字

i顺序显示为小写罗马数字

1顺序显示为阿拉伯数字

start：设置列表符号从第几个开始排列，属性值只能是阿拉伯数字。

reversed 设置有序列表项目符号的倒序（html5 新增）

ul、ol 项目符号不能互相使用；但是li标签可以使用它们任何一个。

3.定义列表

dl 定义列表给我们的文本添加定义列表语义。

dl definition list 定义列表

dt definition title定义标题

dd definition description定义描述

注：dl 里面嵌套了 dt 和 dd。dt 和 dd 是同一级的标签。dd 是对 dt 的解释、说明、定义。

dl 里面只能放置 dt、dd。dt 和 dd都是容器级标签，里面的内容是不限制的。

dl 里面可以放置多组的 dt 和 dd。dt 后面的 dd 可以有多个。这些 dd 都是在解释上面的dt。

dt 后面可以没有 dd，表示没有解释说明。

工作中，经常将每一组 dt 和 dd 单独放在一个 dl 标签内部。

四、表格

1.table

table：定义表格容器。

tr table rows 定义行

th table head 定义表头

td table dock 定义单元格嵌套关系：table > tr > th | td。

如果表格需要有表头：将 td 标签变成 th。

属性：

bordercolor 设置边框的颜色

height 、 width 设置表格的宽高

align 设置表格的整体水平对齐方式 center 居中 left 默认居左 right居右

cellspacing 设置边框与边框之间的距离

cellpadding 设置内容与边框之间的距离

background 设置表格的背景图片

bgcolor 设置表格的背景颜色

summary 表格隐藏信息，用来提高SEO

2.tr td th标签

tr：行语义，一对 table 标签中有几对 tr 标签，就代表这个表格中有多少行

属性：

align：设置的当前行单元格中文本的水平对齐方式 left right center

bgcolor、background 设置背景颜色和背景图片

td(th)：单元格语义，一对tr标签中有几对td(th)标签，就代表当前行有多少个单元格

th中的文本具有默认加粗，居中的效果

属性：

bgcolor、background 设置背景颜色和背景图片

colspan 列合并；左右合并

rowspan 行合并；上下合并，合并几个单元格，属性值就是多少。

合并单元格步骤：   1 创建单元格
                          2 找出要合并的单元格
                          3 设置合并属性
                          colspan 合并列：左右合并
                        rowspan 合并行：上下合并
                          4 注释掉被合并的