HTML入门笔记2

最新推荐文章于 2025-02-05 22:00:22 发布
原创 最新推荐文章于 2025-02-05 22:00:22 发布 · 117 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html

博客介绍了HTML中列表、表格与表单的使用。列表包括有序、无序和自定义列表；表格制作涉及边框、对齐、单元格合并等，还通过小说排行榜和个人简历举例；表单使用了<input>标签，介绍了输入类型及宽高设置，还提及表单有更多属性和方法待探索。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

一. 列表使用

（1）有序列表

结构如下：

<ol>
    <li>列表项1<li>
    <li>列表项2<li>
    <li>列表项3<li>
           .
           .
           .
    <li>列表项n<li>
<ol>

例子：

    <ol>
        <li>Google</li>
        <li>Baidu</li>
        <li>Bing</li>
        <li>Sogou</li>
    </ol>

结果：

（2）无序列表

结构如下：

<ul>
    <li>列表项1<li>
    <li>列表项2<li>
    <li>列表项3<li>
           .
           .
           .
    <li>列表项n<li>
<ul>
    <ul>
        <li>Java</li>
        <li>C++</li>
        <li>Python</li>
        <li>JavaScript</li>
    </ul>

结果：

（3）自定义列表

结构如下：

    <dt>
        <dl>列表1</dl>
        <dd>列表项1-1</dd>
        <dd>列表项1-2</dd>
                .
                .
                .
        <dd>列表项1-n</dd>

        <dl>列表2</dl>
        <dd>列表项2-1</dd>
        <dd>列表项2-2</dd>
                .
                .
                .
        <dd>列表项2-n</dd>
    </dt>
    <dt>
        <dl>水果</dl>
        <dd>香蕉</dd>
        <dd>苹果</dd>

        <dl>蔬菜</dl>
        <dd>西兰花</dd>
        <dd>菠菜</dd>
    </dt>

结果：

 

二.表格与表单

首先制作表格（做一个例子）：

说明：标题：小说排行榜；表格边框线1px；让表格在正中间aligin="center"，cellspacing="0px" style="border-collapse:collapse" 是让表格的每一个单元格边框线重合的时候看起来不粗，也就是合并边框。cellpadding = "10px"表格里单元格内的空白部分留出10px.

<h3 style="text-align: center;">小说排行榜</h3>
    <table border="1px" bordercolor="#000000" cellspacing="0px" style="border-collapse:collapse" align="center" cellpadding="10px">
        <tr align="center">
            <td><b>排名</b></td>
            <td><b>关键词</b></td>
            <td><b>趋势</b></td>
            <td><b>今日搜索</b></td>
            <td><b>最近七日</b></td>
            <td><b>相关链接</b></td>
        </tr>
        <tr>
            <td>1</td>
            <td>鬼吹灯</td>
            <td><img src="images/up.jpg"></td>
            <td>356</td>
            <td>3560</td>
            <td><a href="">贴吧</a>&nbsp;<a href="">图片</a>&nbsp;<a href="">百科</a>&nbsp;</td>
        </tr>
        <tr>
            <td>1</td>
            <td>鬼吹灯</td>
            <td><img src="images/down.jpg"></td>
            <td>356</td>
            <td>3560</td>
            <td><a href="">贴吧</a>&nbsp;<a href="">图片</a>&nbsp;<a href="">百科</a>&nbsp;</td>
        </tr>
        <tr>
            <td>1</td>
            <td>鬼吹灯</td>
            <td><img src="images/up.jpg"></td>
            <td>356</td>
            <td>3560</td>
            <td><a href="">贴吧</a>&nbsp;<a href="">图片</a>&nbsp;<a href="">百科</a>&nbsp;</td>
        </tr>
        <tr>
            <td>1</td>
            <td>鬼吹灯</td>
            <td>1</td>
            <td>356</td>
            <td>3560</td>
            <td><a href="">贴吧</a>&nbsp;<a href="">图片</a>&nbsp;<a href="">百科</a>&nbsp;</td>
        </tr>
        <tr>
            <td>1</td>
            <td>鬼吹灯</td>
            <td>1</td>
            <td>356</td>
            <td>3560</td>
            <td><a href="">贴吧</a>&nbsp;<a href="">图片</a>&nbsp;<a href="">百科</a>&nbsp;</td>
        </tr>
        <tr>
            <td>1</td>
            <td>鬼吹灯</td>
            <td>1</td>
            <td>356</td>
            <td>3560</td>
            <td><a href="">贴吧</a>&nbsp;<a href="">图片</a>&nbsp;<a href="">百科</a>&nbsp;</td>
        </tr>
        <tr>
            <td>1</td>
            <td>鬼吹灯</td>
            <td>1</td>
            <td>356</td>
            <td>3560</td>
            <td><a href="">贴吧</a>&nbsp;<a href="">图片</a>&nbsp;<a href="">百科</a>&nbsp;</td>
        </tr>
    </table>

对照着结果来看：

表头可以用：<th>标签，里面的内容自动对齐是居中对齐，并且自动加粗。

单元格的合并：

横方向合并：colspan

纵方向合并：rowspan

具体我们用一个例子展示（制作一个个人简历）：

<h3 style="text-align: center;">个人简历</h3>
    <table style="margin-left: auto;margin-right: auto;" border="1" cellpading="10px">
        <tr>
            <td class="kuangao">姓名</td>
            <td class="kuangao"><input  type="text" style="width:95%;height:100%" /></td>
            <td class="kuangao">性别</td>
            <td class="kuangao"><input  type="text" style="width:95%;height:100%"/></td>
            <td class="kuangao">出生年月</td>
            <td class="kuangao"><input  type="text" style="width:95%;height:100%"/></td>
            <td class="kuangao" rowspan="4"><input style="width: 95px;height: 60px; position: relative;top: -38px;left: -3px;" type="file"></td>
        </tr>
        <tr>
            <td class="kuangao">民族</td>
            <td class="kuangao"><input  type="text" style="width:95%;height:100%"/></td>
            <td class="kuangao">政治面貌</td>
            <td class="kuangao"><input  type="text" style="width:95%;height:100%"/></td>
            <td class="kuangao">身高</td>
            <td class="kuangao"><input  type="text" style="width:95%;height:100%"/></td>
        </tr>
        <tr>
            <td class="kuangao">学制</td>
            <td class="kuangao"><input  type="text" style="width:95%;height:100%"/></td>
            <td class="kuangao">学历</td>
            <td class="kuangao"><input  type="text" style="width:95%;height:100%"/></td>
            <td class="kuangao">户籍</td>
            <td class="kuangao"><input  type="text" style="width:95%;height:100%"/></td>
          
        </tr>
        <tr>
            <td class="kuangao">专业</td>
            <td class="kuangao"><input  type="text" style="width:95%;height:100%"/></td>
            <td class="kuangao" colspan="2">毕业学校</td>
            <td class="kuangao" colspan="2"><input  type="text" style="width:97%;height:100%"/></td>
                      
        </tr>
        <tr>
            <td class="kuangao" colspan="7"><b>技能、特长或爱好</b></td>
            
        </tr>
        <tr>
            <td class="kuangao">外语等级</td>
            <td class="kuangao" colspan="2"><input  type="text" style="width:96%;height:100%"/></td>
            <td class="kuangao">计算机</td>
            <td class="kuangao" colspan="3"><input  type="text" style="width:98%;height:100%"/></td>
           
        </tr>
        <tr>
            <td class="kuangao" colspan="7">个人履历</td>
            
        </tr>
        <tr>
            <td class="kuangao">时间</td>
            
            <td class="kuangao" colspan="2">单位</td>
            
            <td class="kuangao" colspan="4">经历</td>
          
        </tr>
        <tr>
            <td class="kuangao"><input  type="text" style="width:95%;height:100%"/></td>
            <td class="kuangao" colspan="2"><input  type="text" style="width:97%;height:100%"/></td>
           
            <td class="kuangao" colspan="4"><input  type="text" style="width:99%;height:100%"/></td>
           
        </tr>
        
        <tr>
            <td class="kuangao"><input  type="text" style="width:97%;height:100%"/></td>
            <td class="kuangao" colspan="2"><input  type="text" style="width:97%;height:100%"/></td>
           
            <td class="kuangao" colspan="4"><input  type="text" style="width:99%;height:100%"/></td>
        </tr>
        <tr>
            <td class="kuangao"><input  type="text" style="width:97%;height:100%"/></td>
            <td class="kuangao" colspan="2"><input  type="text" style="width:97%;height:100%"/></td>
           
            <td class="kuangao" colspan="4"><input  type="text" style="width:99%;height:100%"/></td>
        </tr>
        <tr>
            <td class="kuangao" colspan="7">联系方式</td>
          
        </tr>
        <tr>
            <td class="kuangao">通信地址</td>
            <td class="kuangao" colspan="2"><input  type="text" style="width:96%;height:100%"/></td>
            <td class="kuangao">联系电话</td>
            <td class="kuangao" colspan="3"><input  type="number" style="width:98%;height:100%"/></td>
            
        </tr>
        <tr>
            <td class="kuangao">E_mail</td>
            <td class="kuangao" colspan="2"><input  type="email" style="width:96%;height:100%"/></td>
            <td class="kuangao">邮编</td>
            <td class="kuangao" colspan="3"><input  type="number" style="width:98%;height:100%"/></td>
            
        </tr>
        <tr>
            <td class="kuangao" colspan="7">自我评价</td>
           
        </tr>
    </table>

其中运用到表格知识点：

1.让表格居中对齐的一种方法： style="margin-left: auto;margin-right: auto;

2.定义一个样式类：

    <style>
        .kuangao{
            width: 100px;
            height: 30px;
            text-align: center;
        }
    </style>

引用：class = "kuangao"，上面的建立例子中每一个单元格都有引用

3.<input>标签是表单里面的内容

<input  type="text" style="width:95%;height:100%" />

输入类型type = " "有text, emil, number, 等，设置宽高其与单元格大小差不多。

最后，我们看一看界面吧：

关于表单：

补充：

    <!--
        form表单，提交数据到服务器
        action表示提交服务器的地址
        method提交数据的方法：get,post.
             get请求参数大小有限制，参数显示在地址栏，不安全
             post将数据封装到formdata中，安全级别高，参数长度不限制


        type:text,number,password,date,email,month,submit,reset,button,color,radio,checkbox,
    -->
    <form action="https://www.baidu.com/" method="GET" target="_blank">
        <div style="text-align: center; position: relative; top: 50px;">
            邮箱：<input type="email"><br>
            密码：<input type="password" value=""><br>
            <input type="submit" value="注册">

            <!--表单radio需要设置name属性保证单选效果，name是提交到服务器的名称-->
            男：<input type="radio" name="sex" value="男"> 女：<input type="radio" name="sex" value="女">

            <!--下拉框-->
            <select name="大学">
                <option value="大学1">大学1</option>
                <option value="大学2">大学2</option>
                <option value="大学3">大学3</option>
                <option value="大学4">大学4</option>
                <option value="大学5">大学5</option>
            </select>

        </div>
        

    </form>

 

表单还有许多属性和方法，以及输入类型没展示，大家可以去试试

 

 

 

 

 

 

 

 

HTML入门笔记2(常用标签)
一言沙雕
12-19 907
本文详细介绍HTML的a,img,table和form标签 HTML入门笔记2一 ==a标签==1 href1.1 网址1.2 路径1.3 伪协议1.4 id锚点1.5 邮箱等2 a的 target 属性2.1 _blank2.2 _top2.3 _parent2.4 _self2.5 xxx二 ==img标签==1 属性1.1 alt1.2. height和width1.3. src2 事件3 响应式三 ==table标签==1 属性值2 相关样式四 ==form表单==1 input属性1.1 ac.
【前端学习笔记】HTML 基础
2401_84304834的博客
04-18 2894
HTML（HyperText Markup Language，超文本标记语言）是一种用于创建网页的标准标记语言。它允许用户通过结合文本、图像、链接、格式等元素来构建网页，并通过浏览器进行解析和显示。HTML文件通常以.html或.htm为扩展名，包含一系列的标签（tags），这些标签用于定义网页的结构、样式和内容。
如何在 HTML 中将表格居中
热门推荐
allway2的博客
07-02 1万+
表格是一种以有组织的方式呈现大量信息的绝佳方式。销售数据、网页流量、股票市场趋势和学生成绩是经常以表格形式呈现的信息示例。使用HTML将表格添加到网页时，将其置于页面中心可能更具视觉吸引力。居中文本和图片通常是通过text-align类或通过CSS来完成的，但是居中表格需要不同的方法。下面提供了有关如何使表格在网页上居中的详细信息。将表格添加到网页时，默认情况下，它与页面或容器的左侧对齐，如下所示。上表的 HTML源代码如下。 要使此表居中，您需要添加;margin-left:auto;margin-r
html+css入门学习笔记
m0_73662179的博客
01-24 453
html和css的入门学习笔记，适合入门的学者。
HTML入门学习笔记+详细案例
Biteht的博客
04-22 1万+
✨HTML入门学习笔记+详细案例 作者介绍: 🎓作者:偷偷敲代码的青花瓷🐱‍🚀 👀作者的Gitee:代码仓库 ✨✨我和大家一样都是热爱编程✨,很高兴能在此和大家分享知识,希望在分享知识的同时,能和大家一起共同进步,取得好成绩🤳,今天和大家分享的章节是HTML基础,如果有错误❌,欢迎指正哟😋,咋们废话不多说,跟紧步伐,开始学习吧~😊 文章目录1.什么是HTML2.入门实例3.HTML标签详解3.1 标题标签3.2 段落标签3.3 换行标签3.4 格式化标签3.5 链接标签外部链接内部
算法竞赛入门笔记【文末好书推荐】
最新发布
一键难忘的博客
02-05 3579
算法竞赛是一项考验程序设计和问题解决能力的竞赛，涵盖了从基础到高级的多种算法和数据结构。本文将介绍一些常见的算法竞赛技巧，并通过简单的代码实例帮助初学者入门。
VUE3.0基础入门笔记
执笔写JAVA
06-01 2166
Vue 3 是一个流行的开源JavaScript框架，用于构建用户界面和单页面应用。 它带来了许多新特性和改进，包括更好的性能、更小的打包大小、更好的TypeScript支持、全新的组合式 API，以及一些新的内置组件。
尚硅谷前端入门html+css学习笔记——HTML4
qq_62237063的博客
08-04 1437
尚硅谷前端入门html+css零基础教程，零基础前端开发html5+css3视频网页（淘宝、京东）、小程序（支付宝、抖音）、数据可视化（智慧工地可视化大数据展示平台）、服务器、客户端全称：HyperText Markup Language 译为： 超文本标记语言1996年W3C制定HTML规范，2014年HTML5由W3C正式发布。
前端入门笔记（黑马）——html5+css3
m0_73851065的博客
12-06 1754
黑马前端笔记
Javascript入门学习笔记
weixin_61370021的博客
04-27 4914
JS入门学习笔记，JavaScript是目前web开发中不可缺少的脚本语言，js不需要编译即可运行，运行在客户端，需要通过浏览器来解析执行JavaScript代码。
HTML入门笔记2源代码
12-19
这篇"HTML入门笔记2源代码"提供了关于a、img、table和form等基础标签的使用示例，非常适合初学者掌握和实践HTML的基本语法。 一、a标签 a标签是HTML中的超链接标签，用于创建链接到其他页面、文件、邮件地址或者...
HTML入门学习及笔记.zip
01-01
HTML入门学习及笔记HTML入门学习及笔记HTML入门学习及笔记HTML入门学习及笔记 HTML入门学习及笔记HTML入门学习及笔记HTML入门学习及笔记HTML入门学习及笔记 HTML入门学习及笔记HTML入门学习及笔记HTML入门学习及笔记...
Web前端HTML5 CSS3初学者零基础入门全套学习笔记.zip
05-09
Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门...
Django2萌新入门笔记
07-03
Django2.0版本不支持Python2，因此需要确保使用的Python版本是兼容的，至少是Python3的某个版本。如果需要手动安装Django，推荐使用pip命令，它是一个安装和管理Python包的工具。通过pip安装Django非常简单，只需...
课堂笔记HTML入门笔记编写.md
02-24
HTML入门的课堂笔记，希望对大家有用！里面有很多图片不能显示，我会在后面加上有道云笔记的链接，若想更清楚的看懂，可以查看有道云笔记来进行观看，之后我会将图片都放进此笔记中，谢谢大家的支持！
java 使用hutool工具进行MD5加密
fantasyfzg的博客
12-06 1万+
md5
hutool常见的类型转换方法
fantasyfzg的博客
12-06 7382
hutool
java 字符串拼接
fantasyfzg的博客
11-21 6252
java 字符串拼接，以及底层实现
oracle 定时任务删除数据
fantasyfzg的博客
12-07 2101
oracle定时任务
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值