zoukankan      html  css  js  c++  java
  • HTML中常用的部分标签(一)

    【常见的块级标签】
    标题标签<h1></h1>...<h6></h6>
    水平线<hr/>
    段落<p></p>
    换行<br/>
    引用<blockquote</blockquote>
    预格式<pre></pre>
     
    引用标签<blockquote></blockquote>
    表明标签中的文字,为引用的内容,浏览器显示为等宽字体,并缩进。
    cite属性,表明引用的来源,一般为引用的网址URL
    <blockquote cite="http://www.yt4561761.com">
    hahahahahahah
    </blockquote>
     
    预格式标签<pre></pre>
    浏览器解析时,会按照等宽字体显示,并保留标签内的空格和回车。
    常用于保留代码格式。
    <pre>yt4561761
    yt4561761
    yt4561761
    </pre>
     
    【有序列表ol order list】
    <ol>
    <li>一</li>
    <li>二</li>
    <li>三</li>
    <li>四</li>
    </ol>
     
    【无序列表ul unorder list】
    <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    </ul>
     
    【定义描述列表】
    <dl>
    <dt>标题</dt>
    <dd>描述项</dd>
    </dl>
    一般情况下,标题dt只有一项。描述项dd可以有多项。
    浏览器显示时,标题顶格显示,dd缩进显示。
    <dl>
    <dt>这是dl列表的标题</dt>
    <dd>描述项1</dd>
    <dd>描述项2</dd>
    <dd>描述项3</dd>
    </dl>
     
    【图片组合标签figure】
    1-<figure></figure>标签有两个子标签:
    <img src="">:一幅图片,src表示图片的路径。
    <figcaption></figcaption>:图片的标题
    2-浏览器显示为:图片与标题上下排列,且整体向后缩进一个单位。
    <figure>
    <img src="img/icon.png" />
    <figcaption>洪浩光伏
    </figcaption>
    </figure>
     
    【分区标签div】
    常配合CSS使用,为网页中最常用的分区标签,常用于网页布局使用
    <div style="width:100%; height:100px; ">
    这是div里面的文字
    <h1>div里面的标题</h1>
    </div>
     
    【常见的行级标签】
    span 文本
    img 图片
    em 强调
    strong 强调
    q 短引用
    a 超链接
    i 倾斜
    b 加粗
    small 缩小字体
    u 下划线
     
    span(文本):用于包裹一部分文字,进行特定样式的修改。
    虞涛真<span style="color:red; font-size:36px;">酷</span>!!
     
    em(强调):浏览器显示为倾斜。
    strong(强调):浏览器显示为加粗。
     
    【strong/em/i/b 标签的区别】
    1-em和strong都表示强调,strong>em,strong和em标签均可多层嵌套,表示强调程度的递增。
    2-em和i都能倾斜,Strong和b都能加粗。但是Strong和em多了一层强调的语义。可以帮助搜索 引擎快速抓取网站重点。且html5要求开发者尽可能实现代码的语义化。
    <em>我真帅!!</em><br />
    <strong>我真踏马帅!!</strong><br />
    <i>我被i标签弄斜了</i><br />
    <b>我被b标签弄粗了</b><br />
     
    【q(短引用)】常用于一句话的引用,cite属性表示引用来源,浏览器解析时,会在内容的前后插入双引号。
    <q cite="www.yt4561761.com">那你很棒哦</q>
     
    small(缩小字体):small标签可多层嵌套,表示比默认字体小一号,直到小到最小号为止。
     
    big(放大字体):亦可多层嵌套,直到最大。
    但在最新规范中,small和big标签不提倡使用。提倡使用style="font-size:11px;"CSS样式替代。
    <p>那你很<big><big><big><big><big>棒</big></big></big></big></big>哦!</p>
     
     
     
    【table】
    <table></table>表格框
    <tr></tr>表格行
    <td></td>表格列
    <th></th> 表格标题列(将tr中的td替换为th),th默认加粗且在单元格居中显示。
     
    【table的常用属性】
    1-border:表格边框属性;当使用border="1"设置边框时,会在所有td以及table上嵌套边框,当border加大时,只有table框会加粗。
    2-cellspacing:单元格与单元格之间的间隙。当cellspacing="0"时,单元格之间的间隙为0,但边框线并不会合并。
    ☆☆合并边框的写法style="border-collapse:collapse;" 使用边框合并时,无需设置cellspacing。
    3-cellpadding:单元格内边距,单元格中文字与单元格边框之间的距离。
    4-width/height:表格的宽高
    5-align:设置表格在父容器中的对齐方式 ,left/居左 center/居中 right/居右
    ☆☆当表格使用align属性时,相当于使表格浮动,可能会导致表格后面的元素受表格浮动影响,导致布局错乱。
    6-bgcolor:背景色
    7-background:背景图,后接相对路径。背景图和背景色同时生效时,图会覆盖背景色
    8-bordercolor:设置边框颜色
     
    【<tr><td>标签的属性】
    当表格属性与行列属性冲突时,以行列属性为优先,属性设置优先级td>tr>table。
    1-width,height:给单个的行列设置宽高
    2-bgcolor:背景色
    3-align:设置单元格中的文字,在单元格中的水平对齐方式 left/center/right
    4-valign:设置单元格中文字在格中的垂直对齐方式 top/center/bottom
    5-nowrap:nowrap="nowrap"设置单元格文字行末不断行
     
    【表格的跨行与跨列】
    1-跨列:colspan,某单元格跨N列,则该单元格右边的N-1个td就不需要了。
    2-跨行:rowspan,某单元格跨N行,则该单元格下边的N-1个td就不需要了。
  • 相关阅读:
    Jenkins pipeline 流水线部署 并自定义 buildName 和 buildDescription 显示信息
    Jenkins中插件 pipeline 中声明式流水线的语法
    Linux 发送https POST请求sample ===Slack 频道中发送消息通知
    Jenkins pipline
    jenkins pipeline中获取shell命令的输出
    Chrome浏览器对标签进行整理和分组
    MacBook 对rar后缀的文件进行加压
    Macbook中Docker一栏的应用程序图标不见了,怎么找出来?
    [Pytest]运行指定的case
    软考 高项 重点知识点
  • 原文地址:https://www.cnblogs.com/qsdf/p/10116137.html
Copyright © 2011-2022 走看看