当前位置 : 主页 > 编程语言 > java >

HTML标签(一)

来源:互联网 收集:自由互联 发布时间:2022-09-02
/* *作者:呆萌老师 *☑csdn认证讲师 *☑51cto高级讲师 *☑腾讯课堂认证讲师 *☑网易云课堂认证讲师 *☑华为开发者学堂认证讲师 *☑爱奇艺千人名师计划成员 *在这里给大家分享技术、知


/*
*作者:呆萌老师
*☑csdn认证讲师
*☑51cto高级讲师
*☑腾讯课堂认证讲师
*☑网易云课堂认证讲师
*☑华为开发者学堂认证讲师
*☑爱奇艺千人名师计划成员
*在这里给大家分享技术、知识和生活
*各种干货,记得关注哦!
*/

HTML标签(一)_html

  • HTML5常用标记

   Html:超文本标记语言

  • 结构标签
  • <!DOCTYPE html>

    <html>

    <head>

    <meta charset="utf-8"

    <meta name="keyword" content="淘宝,掏宝,网上购物,C2C,在线交易,交易市场,网上交易, "/>
    <title>标题</title>

    </head>

    <body>

    正文

    </body>

    </html>

    HTML标签(一)_html_02

    结构标签可以省略,但不建议省略

    <meta charset="utf-8"

    这是我的第一个网页

    文本相关标签
    <font color="red" size="10">font标签 处理文字的颜色和大小</font>

    <b>加粗</b>

    <strong>强壮 加粗</strong>

    <i>倾斜</i>

    <u>下划线</u>

    <h1>标题1 加粗 独立占一行</h1>

    <h2>标题2</h2>

    <h3>标题3</h3>

    <h4>标题4</h4>

    <h5>标题5</h5>

    <h6>标题6</h6>



    a<sub>1</sub>

    a<sup>2</sup>



    <cite title="引自呆萌老师">引用标签</cite>



    <abbr title="world wide web">www 缩写标签</abbr>



    <details>

    <summary>文档的详情</summary>

    点击summary中的内容,才显示具体内容

    </details>

    HTML标签(一)_html_03

  •  图片标签
  • <img src="img/27125326.jpg" width="200" height="200"

    title="标题:猴子" alt="如果图片不能正常显示时显示的文字信息"

    border="0"

    HTML标签(一)_h5_04

            2、超链接标签

      href:链接的地址

                 target:目标 跳转的页面显示的位置(默认是_self:在本窗口内打开,_blank:在新窗口中打开)

            3、可以跳转到本网站的其它页面

    <a href="index4.html" target="_blank">新闻1</a>

    HTML标签(一)_html_05

            4、跳转到其它网站

    <a href='https://www.taobao.com'淘宝</a>

    HTML标签(一)_h5_06

            5、跳转到本页面的其它地方

    <a name="top">锚点</a>

    <a href="#top">回到顶部</a>

    HTML标签(一)_h5_07

            6、列表标签

    无序列表

            每一个li独立占一行

    <ul type="circle">

    <li>校花的贴身高手</li>

    <li>伏天氏</li>

    <li>校花的贴身高手</li>

    <li>伏天氏</li>

    </ul>

    HTML标签(一)_h5_08

           

            有序列表

    <ol type="1">

    <li>校花的贴身高手</li>

    <li>伏天氏</li>

    <li>校花的贴身高手</li>

    <li>伏天氏</li>

    </ol>

    HTML标签(一)_html_09

     

  • 表格标签
  •    table:表格

         属性:

            cellspacing:单元格间距

            align:对齐方式

            border:边框

       caption:表名

       thead:表头

         tbody:表主体

         tfoot:表格的页脚

         tr:行 放在table 或thead 或tbody 或tfoot 里面   

         th:单元格 常放在thead中  有加粗和居中的效果  放在tr里面

    td:单元格 表格中的内容只能放在单元格中(td和th中)  放在tr里面

          属性:

             colspan:合并列

             rowspan:合并行

    <table border=1 cellspacing="0" align="center" width="1000">
    <caption>各院系课程</caption>
    <thead>
    <tr>
    <th>系所编号(School Code)</th>
    <th>系所名称(Schools) </th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td>001</td>
    <td>数学科学学院(School of Mathematical Sciences)</td>
    </tr>
    <tr>
    <td>004</td>
    <td>物理学院(School of Physics)</td>
    </tr>
    <tr>
    <td>010</td>
    <td>化学与分子工程学院(College of Chemistry and Molecular Engineering)</td>
    </tr>
    </tbody>
    <tfoot>
    <tr
    <td colspan="2" align="right"> 补充信息</td>
    </tr>
    </tfoot>

    </table>

    HTML标签(一)_h5_10

    更多了解

    ​​https://edu.51cto.com/course/20516.html​​


    上一篇:用idea编写一个简单的翻译程序
    下一篇:没有了
    网友评论