HTML的基础概念和基础常用标签

最新推荐文章于 2023-04-02 14:32:57 发布

Bao_Joy

最新推荐文章于 2023-04-02 14:32:57 发布

阅读量537

点赞数

本文链接：https://blog.csdn.net/Bao_Joy/article/details/82534043

版权

今日内容

    1.HTML概述和快速入门
    2.HTML的常用标签

HTML概述和快速入门

    1.概念
       叫做超文本标记语言
    2.作用
       就是用来做网页的
    3.快速入门
       a.HTML的后缀名
          1）.HTML
          2).HTM
       b.HTML采用浏览器打开
          因为浏览器中嵌入了解析HTML语法的内核
       c.基础语法
         <html>
          <head>
              <title> </title>
          </head>

           <body>
          </body>
        </html>
       d.注意事项
          HTML标签只能“包裹嵌套”，不能“交叉嵌套”。
          正确：<a><b></b></a>
          错误：<a><b></a></b>

HTML的常用标签

    1.HTML的注释写法
        <!--注释-->
    2.标题标签(数字越大，字越小)
        <h1></h1>  一级标题
        <h1></h1>  二级标题
        <h1></h1>  三级标题
        <h1></h1>  四级标题
        <h1></h1>  五级标题
        <h1></h1>  六级标题
    3.字体标签 font
       A.标准格式
           <font>字体</font>
       B.常见属性
          a.字体大小的设置 size="1" 数字越大，字体越大
          b.字体颜色的设置 color="rde" 红色
          c.字体标签的设置 face=“楷体” 必须是自己系统里有的字体
       C.加粗，斜体，下划线
          <b>字体加粗</b>
          <i>字体倾斜</i>
          <u>字体下划线<u>
    4.格式化标签
       A.换行
          <br>也可以</br> 无需包裹。只写一半
       B.段落 
          <p>一条长文字</p>
       C.水平线
          <hr>
           a.线的宽度 width 数字加上百分号表示比例
           b.线的高度 size 数字加上百分号表示比例
           c.颜色 color
           d.对齐方式 align="" left表示居左 right表示居右  center表示具中
        演示：<hr width="60%" size="5%" color="red" align="center">
       D.标签居中
          <center>  标签名称 </center>
    5.特殊指令
        A.空格效果：&nbsp;
    6.图片便签 img
        A.基本格式
           <img src="路径">     可以是网络路径，也可以是相对或绝对，推荐相对
        B.图片的大小对齐位置
           a.大小设置 width 宽度 heigh 高度
           b.设置对齐 align
             <img src="路径" width="50%" heigh="50%">  
        C.相对路径的问题
           a.图片和网页在同一个目录 <img src="mm01.png"/>
           b.图片在其他目录,网页    <img src="../img/mm01.png"/>  网页在src图片在img ../返回上一层
           c.图片在其他目录,网页    <img src="img/mm01.png"/>     图片在网页的子目录
    7.列表标签
        A.有序列表 ol
            <ol type="A">
                <li> 11111 </li>
                <li> 11111 </li>
                <li> 11111 </li>
                <li> 11111 </li>
                <li> 11111 </li>
            </ol>    
        B.无序列表 ul
            <ul>
                <li> Java </li>
                <li> UI </li>
                <li> Python </li>
                <li> PHP </li>
                <li> 前端 </li>
            </u> 
    8、超链接标签 a
        A.基础语法
            <a href="http://www.baidu.com" target="_blank"> 点击访问百度网址 </a>
        B.属性
            href 可以是内网地址,可以是外网地址,可以是图片,可以是文本
            target 不写默认是在自己的页面打开,设置 _blank 在新的页面打开

    9、表格标签
        A.基础代码  
            <table border="1px" 表的线条 align="center" width="80%" 大小>
                <tr>
                    <th> 表头第一列 </th>
                    <th> 表头第二列 </th>
                    <th> 表头第三列 </th>
                </tr>
                <tr>
                    <td> 第一行第一列 </td>
                    <td> 第一行第二列 </td>
                    <td> 第一行第三列 </td>
                </tr>
                <tr>
                    <td> 第二行第一列 </td>
                    <td> 第二行第二列 </td>
                    <td> 第二行第三列 </td>
                </tr>
            </table>
        B.合并单元格
            a.两个属性
                colspan：合并列
                rowspan：合并行
            b.操作步骤
                I.确定是合并行 还是 合并列
                II.确定第一次出现的单元格是哪一个
                III.删除其他不要的行或者列