Python_day19--HTML基础--序列化标签、表格标签、表单标签

最新推荐文章于 2021-07-31 10:35:13 发布

Biu_Biu_0329

最新推荐文章于 2021-07-31 10:35:13 发布

阅读量404

点赞数 1

本文链接：https://blog.csdn.net/Biu_Biu_0329/article/details/80842182

版权

一、序列化标签

（一）无序列表

1、<ul> 标签定义无序列表

2、<li> 标签定义列表项，有序列表和无序列表中都使用 <li> 标签

例1：单层列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02_序列标签</title>
    <style>
        li{
            font-size: x-large;
        }

    </style>
</head>
<body>

<h2 style="color: dodgerblue">这是一个无序标签</h2>
<ul>
    <li>牛奶</li>
    <li>咖啡</li>
    <li>拿铁</li>
    <li>卡布奇诺</li>

</ul>

</body>
</html>

例2：列表的嵌套

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02_序列标签</title>
    <style>
        li{
            font-size: x-large;
        }

    </style>
</head>
<body>

<h2 style="color: dodgerblue">这是一个无序标签</h2>
<ul>
    <li>牛奶
        <ul>
        <li>全脂牛奶</li>
        <li>脱脂牛奶</li>
    </ul>
    </li>
    <li>咖啡
        <ul>
            <li>拿铁</li>
            <li>卡布奇诺</li>
        </ul>
    </li>
    <li>茶
        <ul>
            <li>绿茶<ul>
                <li>铁观音</li>
                <li>碧螺春</li>
            </ul>
            </li>
            <li>高山毛尖</li>
            <li>印度红茶</li>
        </ul>

    </li>


</ul>

</body>
</html>

（二）有序标签

1、<ol> 标签定义有序列表。

2、<li> 标签定义列表项，有序列表和无序列表中都使用 <li> 标签

例：有序序列及嵌套使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03_有序标签</title>
    <style>
        li{
            font-size: x-large;
        }

    </style>
</head>
<body>

<h2 style="color: dodgerblue">这是一个有序标签的嵌套</h2>
<ol>
    <li>牛奶
        <ul>
            <li>全脂牛奶</li>
            <li>脱脂牛奶</li>
        </ul>
    </li>
    <li>咖啡
        <ul>
            <li>拿铁</li>
            <li>卡布奇诺</li>
        </ul>
    </li>
    <li>茶
        <ul>
            <li>绿茶<ul>
                <li>铁观音</li>
                <li>碧螺春</li>
            </ul>
            </li>
            <li>高山毛尖</li>
            <li>印度红茶</li>
        </ul>

    </li>


</ol>

</body>
</html>

（三）嵌套的列表

1、<dl> 标签定义一个定义列表

2、<dt> 标签定义一个定义列表中的一个项目，以及 dialog 中的角色

3、<dd> 标签定义一个定义列表中对项目的描述。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03_1_嵌套列表</title>
    <style>
        dt{
            font-size: large;
            color: blue;
        }
        dd{
            color: royalblue;
        }
    </style>
</head>
<body>
<h2 style="font-size: x-large;color: dodgerblue">这是一个嵌套列表</h2>
<dl>
    <dt>茶_tea</dt>
    <dd>绿茶</dd>
    <dd>红茶</dd>
    <dd>凉白开</dd>

    <dt>咖啡_coffee</dt>
    <dd>Coffee Latte</dd>
    <dd>iced Americano</dd>
    <dd>Cappuccino</dd>
</dl>

</body>
</html>

二、表格标签

标签定义 HTML 表格
    1. 简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成
    2. tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元
    3. border:指定表格边框;cellpadding设置单元格大小, cellspacing设置单元格间距大小,width指定单元格宽度 
    4. <caption>指定表格标题
    5. <th colspan="2">合并两列单元格
    6. <th rowspan="2">合并两行单元格
   7. 单元格对齐设置: aligin:left, right
   8. 表格边框显示:frame=box, above, below, hsides, vsides

1、<table> 标签可定义表格。在 <table> 标签内部，你可以放置表格的标题、表格行、表格列、表格单元以及其他的表格

2、<tr> 标签定义表格中的行

3、<td> 标签定义 HTML 表格中的标准单元格。

HTML 表格有两种单元格类型：

表头单元格 - 包含头部信息（由 th 元素创建）
标准单元格 - 包含数据（由 td 元素创建）

td 元素中的文本是普通的左对齐文本

4、<th> 元素中的文本呈现为粗体并且居中。

例1：简单的两行三列表格设计

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>04_表格标签</title>
</head>
<body>
<table border="5" width="500px" cellpadding="30px" cellspacing="5px">
    <tr style="background-color: dodgerblue">
        <th>语文</th>
        <th>数学</th>
        <th>英语</th>
    </tr>
    <tr style="background-color: greenyellow">
        <th>98</th>
        <th>98</th>
        <th>98</th>

    </tr>
</table>
</body>
</html>

例2：合并列单元

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>04_表格标签</title>
</head>
<body>

<h2>合并列单元格</h2>
<table border="1" cellpadding="10" width="500">

    <caption>主机信息表格</caption>
    <tr>
        <th>主机名</th>
        <th colspan="2">IP地址</th>


    </tr>

    <tr>
        <td>主机1</td>
        <td>IP1</td>
        <td>IP1</td>
    </tr>

    <tr>
        <td>主机2</td>
        <td>IP2</td>
        <td>IP2</td>
    </tr>
    <tr>
        <td>主机3</td>
        <td>IP3</td>
        <td>IP3</td>
    </tr>

    <tr>
        <td>主机4</td>
        <td>IP4</td>
        <td>IP4</td>
    </tr>

</table>

</body>
</html>

例3：合并行单元格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>04_表格标签</title>
</head>
<body>

<h2>合并行单元格</h2>
<table border="1" cellpadding="10" width="500" >
    <caption>主机信息表格</caption>
    <tr style="background-color: antiquewhite">
        <th>主机名</th>
        <th>主机1</th>
        <th>主机2</th>
        <th>主机3</th>
    </tr>
    <tr>
        <th rowspan="3">IP</th>
        <th>IP1</th>
        <th>IP2</th>
        <th>IP3</th>

    </tr>
    <tr>
        <th>IP4</th>
        <th>IP5</th>
        <th>IP6</th>
    </tr>

</table>

</body>
</html>

例4：单元格嵌套标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>04_表格标签</title>
</head>
<body>
<h2>单元格嵌套标签</h2>

<table border="1" cellpadding="10" width="500px">
    <tr>
        <td>
            <p>这是一个段落。</p>
            <p>这是另一个段落。</p>
        </td>
        <td>
            <table border="1" cellpadding="5">
                <!--<caption>这个单元包含一个表格</caption>-->
                <tr>
                    <td>A</td>
                    <td>B</td>
                </tr>
                <tr>
                    <td>C</td>
                    <td>D</td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td>这个单元包含一个列表：
            <ul>
                <li>绿茶</li>
                <li>咖啡</li>
                <li>牛奶</li>
            </ul>
        </td>
        <td>
            <a href="http://www.westos.org" target="_blank"><img src="http://www.westos.org/images/logo.png"></a>

        </td>
    </tr>
</table>

</body>
</html>

三、网页实例

注意：

1)我们在使用网络链接的时候，会出现下划线，我们需要在style中设置text-decoration="none"。就可去掉下划线

2)target用来设置是在新的网页打开还是原网页打开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>西部开元</title>
</head>
<body>

<table width="100%">
    <tr>
        <td align="right">
            <img src="img/02.png">
        </td>
        <td>
            <b>西部开源技术中心</b>
        </td>
        <td align="right">
            <img src="img/03_phone1.png">
        </td>
        <td>
            <b>029-86699937 029-88262419</b>
        </td>

    </tr>
</table>

<table bgcolor="#1e90ff" width="100%" cellpadding="8" style="table-layout: fixed;text-align:center;font-size: 20px;" >
    <tr>
        <td><a href="http://www.westos.org/" style="color: white;text-decoration: none" target="_blank" >首页</a></td>
        <td><a href="http://www.westos.org/curriculum-web"style="color: white;text-decoration: none" target="_blank">课程中心</a></td>
        <td><a href="http://www.westos.org/course-features"style="color: white;;text-decoration: none" target="_blank">教学体系</a></td>
        <td><a href="http://www.westos.org/archives/category/news"style="color: white;;text-decoration: none" target="_blank">新闻咨询</a></td>
        <td><a href="http://www.westos.org/archives/category/technical-doc"style="color: white;;text-decoration: none" target="_blank">学习资源</a></td>
        <td><a href="http://www.westos.org/linux-enterprise"style="color: white;;text-decoration: none" target="_blank">Linux企业文化</a></td>
    </tr>

</table>

<img width="100%" src="img/01_big.jpg">

<table width="80%" cellpadding="20px" align="center">
    <tr>
        <td>
            <fieldset>
                <legend>公司简介</legend>
                <h1 style="text-align: center">公司简介</h1>
                <h2>公司发展历程---十年,简简单单,我们只做教育</h2>
                <hr>
                <p>西部开源技术中心是一家集教育培训、人才服务、服务外包、企业定制为一体的综合性软件技术服务机构。</p>
                <p>公司成立十年以来，全心全意致力于“Linux&C、C++开发工程师”、“Linux系统运维工程师及运维研发工程师”、“Web前端开发工程师”、“Java开发工程师”的培训，以及C++开发、云计算、虚拟化、python自动化运维等综合性企业级职业技能培训。公司持续深耕主校区，并在西安邮电学院、陕西师范大学、西安理工大学开设分校区与咨询网点，借助高校区位优势，专注于Linux技术的培训，为大学毕业生开辟更为广泛的就业途径。

                </p>
                <p>公司拥有一支专业进取的教学师资团队，具有丰富的行业经验，参加过众多政府重大电子信息工程项目的研发。公司还具备体系完整并不断更新的独家课程体系和配套的题库考试系统，为学员学习保驾护航。经过十年的教育培训历程，公司已为腾讯、阿里、百度、京东、搜狐、新浪等一线互联网企业输送技术精英2000余人，得到用人单位和结业学员的一致好评。 </p>
                <p>西部开源技术中心还在信息安全，在线金融、云医疗、数据存储、服务外包、软件开发等领域，为相关政府部门、中小企业、软件开发商、行业大客户在Linux 平台的选择与应用提供权威的可行性分析、方案与现场支持。公司人员精湛的技术与周到精益的服务得到各界企业与单位的广泛认可。

                </p>
                <p>西部开源技术中心坚持“简单、认真、向上、负责、尊重”的经营哲学与“开源润物”包容，无私的价值理念，满怀着“培训提升价值，开源推动进步”的朴素信念，坚持做好Linux教育培训与技术创新的开凿者与领航者。以培养优秀的Linux技术人才为己任，将自己打造成为一家学员满意、企业信赖、员工自豪、社会尊重的开源的技术中心，最终推动开源技术在中国健康、高速发展。 </p>


            </fieldset>
        </td>

    </tr>

</table>

<table style="text-align: center" align="center">
    <tr>
        <th>
            地址：西安市太白南路181号西高新西部电子社区A座B区二楼
        </th>
    </tr>
    <tr>
        <th>
            电话：029-86699937 029-88262419
        </th>
    </tr>
</table>


</body>
</html>

四、表单标签

1、<form> 标签用于为用户输入创建 HTML 表单

表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等

表单还可以包含 menus、textarea、fieldset、legend 和 label 元素

表单用于向服务器传输数据

注释：form 元素是块级元素，其前后会产生折行

1）action：表单提交的地址--->“#”代表本地；或数据库中

2）method：方法规定如何发送表单数据（form-data）（表单数据会被发送到在 action 属性中规定的页面中）。

可以通过以下方式发送 form-data ：

以 URL 变量 (使用 method="get") 的形式来发送
以 HTTP post (使用 method="post") 的形式来发送

关于 "get" 方法的注释：

该方法将表单数据以名称/值对的形式附加到 URL 中
该方法对于用户希望加入书签的表单提交很有用
在 URL 中放置的数据量是有限制的（不同的浏览器有差别），所以无法确保所有表单数据得到正确地传输
绝不要使用 "get" 方法来传输敏感信息！（密码或其他敏感信息在浏览器地址栏中是可见的）

关于 "post" 方法的注释：

该方法以 HTTP post 事务的方式来传递表单数据
无法将通过 "post" 方法提交的表单加入书签
与 "get" 相比，"post" 方法更健壮更安全，而且 "post" 没有容量限制

2、<span> 标签被用来组合文档中的行内元素

3、<input> 标签用于搜集用户信息

根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等

1）type：你需要提交的数据类型

文本域：type="text"
密码域：type="password"
文本域：type=text"
提交按钮: type="submit"
重置按钮:type="reset"
文件上传按钮:type="file"
复选框按钮:type="checkbox"
单选按钮：type="radio"

2）accept ：属性仅适用于 <input type="file">，它规定了可通过文件上传提交的文件类型。

提示：请不要将该属性作为您唯一的验证工具。应该在服务器上对文件上传进行验证。

3）placeholder：属性提供可描述输入字段预期值的提示信息（hint）

该提示会在输入字段为空时显示，并会在字段获得焦点时消失

注释：placeholder 属性适用于以下的 <input> 类型：text, search, url, telephone, email 以及 password

4）name：属性规定 input 元素的名称

name属性用于对提交到服务器后的表单数据进行标识，或者在客户端通过 JavaScript 引用表单数据

注释：只有设置了 name 属性的表单元素才能在提交表单时传递它们的值

5）maxlength：属性规定输入字段的最大长度，以字符个数计。

maxlength 属性与 <input type="text"> 或 <input type="password"> 配合使用。

6）size：属性规定输入字段的宽度

对于 <input type="text"> 和 <input type="password">，size 属性定义的是可见的字符数。而对于其他类型，size 属性定义的是以像素为单位的输入字段宽度

7）value：属性为 input 元素设定值。

对于不同的输入类型，value 属性的用法也不同：

type="button", "reset", "submit" - 定义按钮上的显示的文本
type="text", "password", "hidden" - 定义输入字段的初始值
type="checkbox", "radio", "image" - 定义与输入相关联的值

注释：<input type="checkbox"> 和 <input type="radio"> 中必须设置 value 属性

注释：value 属性无法与 <input type="file"> 一同使用

8）checked：属性规定在页面加载时应该被预先选定的 input 元素。

checked 属性与 <input type="checkbox"> 或 <input type="radio"> 配合使用。

checked 属性也可以在页面加载后，通过 JavaScript 代码进行设置。

例1：用户名输入、密码输入、登陆按钮、重置按钮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>05_表单标签</title>
</head>
<body>
<form>
    <span>用户：</span><input type="text" name="username" maxlength="5" placeholder="username">
    <br>
    <br>
    <span>密码：</span><input type="password" name="password" maxlength="5" placeholder="password">
    <br>
    <br>   
    <input type="submit" name="submit1" value="登陆">  
    <input type="reset" name="submit2" value="重置">

</form>

</body>
</html>

例2：用户详细信息提交

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>05_表单标签</title>
</head>
<body>
<form>
    
    <br>
    <p>用户详细信息提交表</p>
    <textarea rows="10px" cols="40px"></textarea><br><br>  
    <input type="reset" name="submit2" value="重置">

</form>


</body>
</html>

例3：上传文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>05_表单标签</title>
</head>
<body>
<form>
    <p>请选择上传的文件:</p>
    <input type="file" name="file">
</form>
</body>
</html>

例4：复选框

解释:用户可以选中或取消选取复选框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>05_表单标签</title>
</head>
<body>
<form>
    <p>你喜欢的音乐:</p>
    <ul>
        <li><span>说散就散 </span><input type="checkbox" name="说散就散"></li>

        <li><span>后来没有后来 </span><input type="checkbox" name="后来没有后来"></li>
        <li><span>向天再借五百年 </span><input type="checkbox" name="后来没有后来"></li>
        <li><span>假如没有后来 </span><input type="checkbox" name="后来没有后来"></li>
        <li><span>如果 </span><input type="checkbox" name="后来没有后来"></li>
        <li><span>分手快乐 </span><input type="checkbox" name="后来没有后来"></li>
        <li><span>西安人的歌 </span><input type="checkbox" name="后来没有后来"></li>
    </ul>
    <br>

    <input type="submit" name="submit" value="提交">
</form>
</body>
</html>

例5：单选按钮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>05_表单标签</title>
</head>
<body>

<br>
<br>
   
<form>
    男性：
    <input type="radio" checked="checked" name="Sex" value="male" />
    <br />
    女性：
    <input type="radio" name="Sex" value="female" />
    <br>
    <br>
    
    <input type="submit" name="submit" value="提交">

</form>


</body>
</html>

例6：下拉列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>05_表单标签</title>
</head>
<body>

<form>
    <a>请选择你的国家：</a>
    <select name="国家">
        <option>中国</option>
        <option>美国</option>
        <option>日本</option>
        <option>韩国</option>
        <option>俄罗斯</option>
        <option>柬埔寨</option>
        <option>老挝</option>
        <option>新加坡</option>
        <option>澳大利亚</option>
        <option>斐济</option>
    </select>
</form>
</body>
</html>

例7：围绕数据的Fieldset

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>05_表单标签</title>
</head>
<body>

<form>
    <fieldset>
        <legend>用户登录</legend>
        <br>
        <div align="middle">

            用户：<input type="text" />
            <br>
            <br>
            密码：<input type="password" />
            <br>
            <br>
            <input type="submit" name="submit" value="登录">   
            <input type="reset" name="submit2" value="重置">
        </div>
    </fieldset>
</form>
</body>
</html>

Biu_Biu_0329

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Python_day19--HTML基础--序列化标签、表格标签、表单标签

一、序列化标签（一）无序列表1、&lt;ul&gt; 标签定义无序列表2、&lt;li&gt; 标签定义列表项，有序列表和无序列表中都使用 &lt;li&gt; 标签例1：单层列表&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt;
复制链接

扫一扫