HTML【6】概述和快速入门

1、HTML的概念

    HTML:叫做超文本标记语言,可以用来制作网页

2、HTML的快速入门

    A.HTML的后缀名
        a.HTML
        b.HTM
    B.HTML采用浏览器打开
        原因: 浏览器当中嵌入了解析HTML语法的内核.
    C.HTML的基础语法
        <html>
            <head>
                <title> </title>
            </head>
            <body>
            </body>
        </html>
    D.注意事项
        HTML标签只能"包裹嵌套",不能"交叉嵌套"

HTML的常用标签

1、HTML的注释写法

    <!-- 这是注释  -->

2、标题标签(数字越小,字越大)

    <h1></h1>  一级标题
    <h2></h2>  二级标题
    <h3></h3>  三级标题
    <h4></h4>  四级标题
    <h5></h5>  五级标题
    <h6></h6>  六级标题

3、字体标签 font

    A.标准格式
        <font> 字体的设置 </font>
    B.常见属性
        a.字体大小的设置 size="1"  范围1-7 数字越大,字体越大
        b.字体颜色的设置 color="red" 红色  #00FF00 绿色
        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="right"   left在左边 center在中间 right在右边
        <hr color="#FF9900" width="20%" size="8%" align="right">
    D.居中标签的效果
        <center> 标签名称 ... </center>

5、特殊指令

    A.空格效果 &nbsp;

6、图片标签 img

    A.基本格式
        <img src="路径">   <!-- 可以是网络路径,也可以是相对路径,不推荐绝对路径-->
    B.设置图片的大小对齐位置
        a.大小设置 width 宽度, height 高度
        b.设置对齐方式 align
        <img src="mm01.png" width="10%" height="10%" align="right"/>
    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="1" start="100">
            <li> Java </li>
            <li> UI </li>
            <li> Python </li>
            <li> PHP </li>
            <li> 前端 </li>
        </ol>
    B.无序列表 ul
        <ul>
            <li> Java </li>
            <li> UI </li>
            <li> Python </li>
            <li> PHP </li>
            <li> 前端 </li>
        </ul>

8、超链接标签

    A.基础语法
        <a href="http://www.baidu.com" target="_blank"> 点击访问百度网址 </a>
    B.属性
        href 可以是内网地址,可以是外网地址,可以是图片,可以是文本
        target 不写默认是在自己的页面打开,设置 _blank 在新的页面打开

9、span和div标签

    A.两个标签
        <span> 有多大空间占据多大空间 </span> 
        <div> 独占一行 </div>
    B.语义化标签
        <header> </header> HTML5后的头标签.
        <footer> </footer> HTML5后的脚标签.

10、表格标签

    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.删除其他不要的行或者列

HTML【6】概述和快速入门

1、HTML的概念

HTML的常用标签

猜你喜欢