• day 30 HTML


    HTML:

    超文本标记语言(Hyper Text Markup Language)

    Html基本结构
    
    <!DOCTYPE html>
    <html>    <!-- 定义HTML文档 -->
    <!--  注释 -->
    <head>
        <meta charset="UTF-8">
        <title>helloworld</title>
    </head>
    <body>   <!-- 定义文档主题 -->
    
        <h1>标题1</h1>
        <h2>标题2</h2>
        <h6>标题6</h6>
        <br><br/>    <!-- 插入折行, 换行 -->
        <hr>         <!-- 插入水平线 -->
        <p>定义段落</p>
        <p>曲曲折折的荷塘上面弥漫着甜甜的叶子</p>
        <p>曲曲折折的荷塘上面弥漫着甜甜的叶子</p>
        <p>曲曲折折的荷塘<br>上面弥漫着甜甜的叶子</br></p>
    </body>
    </html>

    基本标签

    字符实体 (区分大小写)

     格式化标签

    标题标签: <h1>标题</h1>    (h1--h6)

    段落标签:<p>段落</p>

    定义水平线: <hr/>

    字体标签:  <font color=red size="1">Python</font>   (size范围  1--7)

    <b>加粗</b><br/>

    <strong>强调</strong><br/>

    <h1>标题</h1><small>小标题</small><br/>

    下标:水的化学式:H<sub>2</sub>O<br/>

    上标:X的平方:X<sup>2</sup><br/>

    <pre>

        保持原格式不变

                 静 夜 诗
    床前明月光,疑似地上霜;
    举头望明月,低头思故乡;
    </pre>

    有序列表,无序列表

    有序列表 <ol>

      type属性:指定列表类型。它的值可以是:1、a、A、i、I

    无序列表 <ul> 

      type属性:指定列表类型
                disc: 点
                square: 方块
                circle: 圆圈
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <!-- 无序列表
            type属性:指定列表类型
                disc: 点
                square: 方块
                circle: 圆圈
        -->
        你喜欢的菜:
        <ul type="circle">
            <li>宫保鸡丁</li>
            <li>黄焖鸡</li>
            <li>包角</li>
        </ul><br/>
        <!-- 有序列表
              type属性:指定列表类型。它的值可以是:1、a、A、i、I
    
        -->
        你喜欢的明人:
        <ol type="A">
            <li>刘德华</li>
            <li>刘明星</li>
            <li>凤姐</li>
        </ol><br/>
        <!-- 定义标签 -->
        <dl>
            <dt>Coffee</dt>
            <dd>Black hot drink</dd>
            <dt>Milk</dt>
            <dd>White cold drink</dd>
        </dl>
    </body>
    </html>

    列表

    <body>
        <dl>
            <dt>car</dt>
                <dd>玛莎拉蒂</dd>
                <dd>本田</dd>
                <dd>奔驰</dd>
            <dt>tea</dt>
                <dd>普洱</dd>
                <dd>龙井</dd>
        </dl>
    </body>

    超链接标签

    <a href="https://www.baidu.com" target="_self">百度一下</a>
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <!--
            a标签:超链接标签
                工作原理:
                1)如果a标签的href属性是以http开头,那么浏览器就会启用http协议解析该网址内容;
                2)如果a标签的href属性是以其他协议开头,那么浏览器就会检查注册表中是否存在处理该协议的软件。
                    如果存在就打开软件处理该协议。
                3)如果a标签是以file协议开头,那么浏览器就会在当前目录下查找是否存在指定资源;
    
               target:指定网页的打开方式
                _self:在当前窗口中打开
                _blank: 在新窗口中打开
        -->
        <a href="http://www.oldboyedu.com" target="_blank">老男孩</a>
    </body>
    </html>

    锚点定位

    <body>
    <pre>
    
        type <a href="#aa">CorruptInputError</a>
    
    <!-- 定义锚点
            name: 指定锚点名字
     -->
    <a name="aa">type CorruptInputError</a>
    .....很多正文
    </pre> </body>

    图像

    <body>
        <a href="http://www.jd.com"><img src="img/time2.jpg" alt="这是美女"/></a>
    </body>

    图像由<img>标签定义

    src属性用于指定图像的位置

    alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。在浏览器无法载入图像时,替换文本属性告诉读者她们失去的信息。此时,浏览器将显示这个替代性的文本而不是图像。

    表格

     <thead>定义表格头,可以没有;<tfoot>定义表格底部,也是可以没有;<tbody>定义表格体,至少有一个

    <table border="1" width="400" height="200" cellspacing="0" >
    cellspacing:设置每一个单元格之间的空白
    border: 设置边框的宽度
    <caption>学员成绩表</caption>  表格的标题

       rowspan:跨行,即指定单元格向下合并;

    colspan:跨列,即指定单元格向右合并
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <!--<h1>学员成绩表</h1>-->
        <!--
            border: 设置表格边框的宽度
             表格的宽度,以像素为单位
            height:设置表格的最小高度
            cellspacing:设置每一个单元格之间的空白
        -->
        <table border="1" width="500" height="200" cellspacing="0" align="left">
            <!-- 表格标题 -->
            <caption>学员成绩表</caption>
            <thead>
                <!--
                    align: 设置行或列的对其方式,它的值可以是:
                        left左对齐、center居中、right右对齐、justify两边对齐
                -->
                <tr align="left">
                    <!-- 表格头 -->
                    <th>姓名</th>
                    <th>性别</th>
                    <th>成绩</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td align="center">小宝</td>
                    <td rowspan="3"></td>
                    <td>100</td>
                </tr>
                <tr align="center">
                    <td>大宝</td>
                    <!--<td>男</td>-->
                    <td>90</td>
                </tr>
                <tr>
                    <td>大大宝</td>
                    <!--<td>男</td>-->
                    <td>95</td>
                </tr>
                <tr>
                    <td>平均成绩:</td>
                    <td colspan="2">95</td>
                    <!--<td></td>-->
                </tr>
            </tbody>
        </table>
    </body>
    </html>
    示例
    
    

    框架标签

     
  • 相关阅读:
    C#控件随窗体大小改变而改变
    Java泛型
    php的stristr()函数,查找字符
    java设计模式之桥梁模式(Bridge)
    怎样从本地删除git远程仓库里面的文件
    VS code 修改主题设置代码对其齐线
    vue+webpack安装sass过程中遇到权限不够,直接删除node_modus文件夹重新安装,node_modus先取得管理员权限才能删
    转:git合并冲突解决方法
    git命令行解决冲突文件步骤
    dos常用命令
  • 原文地址:https://www.cnblogs.com/echo2019/p/10408187.html
Copyright © 2020-2023  润新知