网页设计之html入门二-CSDN博客

本文链接：https://blog.csdn.net/ljs298443/article/details/117479389

html入门二

一、列表

1.有序列表：

    <h2>搜索引擎排名</h2>
    <ol>
        <li><Strong>Gogle</Strong></li>
        <li><Strong>Baidu</Strong></li>
        <li><Strong>Bing</Strong></li>
        <li><Strong>Songou</Strong></li>
    </ol>

2.无序列表：

    <h2>软件编程语言</h2>
    <ul>
        <li><Strong>Java</Strong></li>
        <li><Strong>C++</Strong></li>
        <li><Strong>Python</Strong></li>
        <li><Strong>JavaScript</Strong></li>
    </ul>

3.自定义列表：

    <h2>健康食品</h2>
    <dl>
        <dt><Strong>水果</Strong></dt>
        <dd><Strong>苹果</Strong></dd>
        <dd><Strong>香蕉</Strong></dd>
        <dt><Strong>蔬菜</Strong></dt>
        <dd><Strong>西兰花</Strong></dd>
        <dd><Strong>菠菜</Strong></dd>
    </dl>

4.效果展示:

5.完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2>搜索引擎排名</h2>
    <ol>
        <li><Strong>Gogle</Strong></li>
        <li><Strong>Baidu</Strong></li>
        <li><Strong>Bing</Strong></li>
        <li><Strong>Songou</Strong></li>
    </ol>
    <h2>软件编程语言</h2>
    <ul>
        <li><Strong>Java</Strong></li>
        <li><Strong>C++</Strong></li>
        <li><Strong>Python</Strong></li>
        <li><Strong>JavaScript</Strong></li>
    </ul>
    <h2>健康食品</h2>
    <dl>
        <dt><Strong>水果</Strong></dt>
        <dd><Strong>苹果</Strong></dd>
        <dd><Strong>香蕉</Strong></dd>
        <dt><Strong>蔬菜</Strong></dt>
        <dd><Strong>西兰花</Strong></dd>
        <dd><Strong>菠菜</Strong></dd>
    </dl>
</body>
</html>

二、表格

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

表格代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table width="500" border="1" align="center" cellspacing="0" cellpadding="0">
        <caption><strong>小说排行榜</strong></caption>
        <tr>
            <th><strong>排名</strong></th>
            <th><strong>关键词</strong></th>
            <th><strong>趋势</strong></th>
            <th><strong>今日搜索</strong></th>
            <th><strong>最近七日</strong></th>
            <th><strong>相关链接</strong></th>
        </tr>

        <tr>
            <td>1</td>
            <td>鬼吹灯</td>
            <td><img src="up.jpg"></td>
            <td>365</td>
            <td>3650</td>
            <td><a href="https://www.baidu.com/s?wd=%E7%99%BE%E5%BA%A6%E8%B4%B4%E5%90%A7&rsv_spt=1&rsv_iqid=0xf12cff7000115f10&issp=1&f=3&rsv_bp=1&rsv_idx=2&ie=utf-8&tn=baiduhome_pg&rsv_enter=1&rsv_dl=ih_2&rsv_sug3=1&rsv_sug1=1&rsv_sug7=001&rsv_sug2=1&rsv_btype=i&rsp=2&rsv_sug9=es_2_1&rsv_sug4=2395&rsv_sug=9">贴吧</a>&nbsp;<a href="#">图片</a>&nbsp;<a href="https://www.baidu.com/">百科</a></td>
        </tr>

        <tr>
            <td>1</td>
            <td>鬼吹灯</td>
            <td><img src="down.jpg"></td>
            <td>365</td>
            <td>3650</td>
            <td><a href="#">贴吧</a>&nbsp;<a href="#">图片</a>&nbsp;<a href="#">百科</a></td>
        </tr>

        <tr>
            <td>1</td>
            <td>鬼吹灯</td>
            <td><img src="up.jpg"></td>
            <td>365</td>
            <td>3650</td>
            <td><a href="#">贴吧</a>&nbsp;<a href="#">图片</a>&nbsp;<a href="#">百科</a></td>
        </tr>

        <tr>
            <td>1</td>
            <td>鬼吹灯</td>
            <td>1</td>
            <td>365</td>
            <td>3650</td>
            <td><a href="#">贴吧</a>&nbsp;<a href="#">图片</a>&nbsp;<a href="#">百科</a></td>
        </tr>

        <tr>
            <td>1</td>
            <td>鬼吹灯</td>
            <td>1</td>
            <td>365</td>
            <td>3650</td>
            <td><a href="#">贴吧</a>&nbsp;<a href="#">图片</a>&nbsp;<a href="#">百科</a></td>
        </tr>

        <tr>
            <td>1</td>
            <td>鬼吹灯</td>
            <td>1</td>
            <td>365</td>
            <td>3650</td>
            <td><a href="#">贴吧</a>&nbsp;<a href="#">图片</a>&nbsp;<a href="#">百科</a></td>
        </tr>

        <tr>
            <td>1</td>
            <td>鬼吹灯</td>
            <td>1</td>
            <td>365</td>
            <td>3650</td>
            <td><a href="#">贴吧</a>&nbsp;<a href="#">图片</a>&nbsp;<a href="#">百科</a></td>
        </tr>
        

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

在浏览器中显示效果如下：

三、表单

HTML 表单用于收集用户输入。

from表单：提交数据到服务器

action:提交服务器的地址，可以跳转页面

method 属性规定在提交表单时所用的 HTTP 方法（GET 或 POST）

GET 与POST的区别：

GET:请求参数放在地址栏、get请求安全性没有post高、get请求参数有限制

POST:将数据封装到formdata中

表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。

例如：

<input type="text"> 定义用于文本输入的单行输入字段：

<input type="radio"> 定义单选按钮

<input type="submit"> 定义用于向表单处理程序（form-handler）提交表单的按钮

type:表单项的类型还有：

emai:邮箱

password:密码框

date:日期选择

month：月份

reset:重置按钮

button:普通按钮

个人简历表单制作代码：

1.introduction.html部分：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="introduction.css">
</head>
<body>
    <table border="1" align="center" cellpadding="0">
        <caption><strong>个人简历</strong></caption>
        <tr>
            <td>姓名</td>
            <td><input type="text"></td>
            <td>性别</td>
            <td ><input type="text"></td>
            <td>出生年月</td>
            <td><input type="text"></td>
            <td rowspan="4"><input type="file"></td>
        </tr>

        <tr>
            <td>民族</td>
            <td><input type="text"></td>
            <td>政治面貌</td>
            <td><input type="text"></td>
            <td>身高</td>
            <td><input type="text"></td>
        </tr>

        <tr>
            <td>学制</td>
            <td><input type="text"></td>
            <td>学历</td>
            <td><input type="text"></td>
            <td>户籍</td>
            <td><input type="text"></td>
        </tr>

      

        <tr>
            <td>专业</td>
            <td><input type="text"></td>
            <td colspan="2">毕业学校</td>
            <td colspan="2"><input type="text"></td>
        </tr>

        <tr>
            <td colspan="7"><strong>技能、特长或爱好</strong></td>
        </tr>

        <tr>
            <td>外语等级</td>
            <td colspan="2"><input type="text"></td>
            <td>计算机</td>
            <td colspan="3"><input type="text"></td>
        </tr>

        <tr>
            <td colspan="7">个人履历</td>
        </tr>

        <tr>
            <td>时间</td>
            <td colspan="2">单位</td>
            <td colspan="4">经历</td>
        </tr>

        <tr>
            <td><input type="text"></td>
            <td colspan="2"><input type="text"></td>
            <td colspan="4"><input type="text"></td>
        </tr>

        <tr>
            <td><input type="text"></td>
            <td colspan="2"><input type="text"></td>
            <td colspan="4"><input type="text"></td>
        </tr>

        <tr>
            <td><input type="text"></td>
            <td colspan="2"><input type="text"></td>
            <td colspan="4"><input type="text"></td>
        </tr>

        <tr>
            <td colspan="7">联系方式</td>
        </tr>

        <tr>
            <td>通信地址</td>
            <td colspan="2"><input type="text"></td>
            <td>联系电话</td>
            <td colspan="3"><input type="text"></td>
        </tr>

        <tr>
            <td>E-mial</td>
            <td colspan="2"><input type="text"></td>
            <td>邮编</td>
            <td colspan="3"><input type="text"></td>
        </tr>

        <tr>
            <td colspan="7">自我评价</td>
        </tr>

        <tr>
            <td colspan="7"><textarea></textarea></td>
        </tr>

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

2.introduction.css代码：

td{
    border: 1px solid black;
    text-align: center;

}

input,textarea{
    width: 95%;
    height: inherit;
    border: 0px;
}

3.使用css需要在html中将css Link 进来

<link rel="stylesheet" href="introduction.css">

4.效果：