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>
示例

框架标签

 
原文地址:https://www.cnblogs.com/echo2019/p/10408187.html