新手向:HTML进阶

一,列表

列表分为有序列表,无序列表,定义列表三种

1.有序列表

ol 嵌套 li,ol 是有序列表,li 是列表条目

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ol>
         <li>Ashto</li>
         <li>Ashto</li>
         <li>Ashto</li>

    </ol>

</body>

</html>

效果如图

2.无序列表

ul 嵌套 li,ul 是无序列表,li 是列表条目

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul>
        <li>Ashto</li>
        <li>Ashto</li>
        <li>Ashto</li>

    </ul>
</body>

</html>

我们可以通过 list-style-type来调整列表前的符号

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul>
        <li style="list-style-type: none;">Ashto</li>
        <li>Ashto</li>
        <li>Ashto</li>

    </ul>
</body>

</html>

定义列表

标签:dl 嵌套 dt 和 dd,dl 是定义列表,dt 是定义列表的标题,dd 是定义列表的描述 / 详情。

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <dl>
        <dt>CSDN</dt>
        <dd>代码交流平台</dd>
        <dd>资源交流平台</dd>
        <dd>问题解决平台</dd>

    </dl>
</body>

</html>

二,表格

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <table border="1px solid black">
        <tr>
            <th>姓名</th>
            <th>语文</th>
            <th>数学</th>
            <th>总分</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>99</td>
            <td>100</td>
            <td>199</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>98</td>
            <td>100</td>
            <td>198</td>
        </tr>
        <tr>
            <td>总结</td>
            <td>全市第一</td>
            <td>全市第一</td>
            <td>全市第一</td>
        </tr>
    </table>
</body>

</html>

三,表单

表单一般和js一起使用

input标签

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="text" name="" id="">
    <input type="password" name="" id="">
    <input type="radio" name="" id="">
    <input type="checkbox" name="" id="">
    <input type="file" name="" id="">
</body>

</html>

下拉菜单

主要就是select和option,option就是下拉菜单的内容。

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <select name="" id="">
        <option value="">1</option>
        <option value="">2</option>
        <option value="">3</option>
        <option value="">4</option>
    </select>
</body>

</html>

有些印象就行,实际开发中基本用不到

文本域,按钮,文本label

文本域textarea就是生成一块区域,大小可改(也可以设置固定形状),一般用在留言箱里。

按钮button就是生成一个按钮,可以绑定点事件,和js一起用吧。

文本label更简单,就是用 label 标签绑定文字和表单控件的关系,增大表单控件的点击范围。

四,div和span

div:一个盒子,最常用的标签,用来布局网站,非常重要,之后的大部分内容也是围绕div展开。

span:和p有点像,不过它不占一整行。

图片中的标签实质上都是div,只不过我们给某些形状的盒子取了个名字(语义化),方便使用。

用的挺频繁的,尤其是nav。

前端中标签有些印象就可以了,记住主要的几个:div,input,button,列表,p,h,其他的用的时候查一查就可以了。使用vscode的话会有智能提示,不用担心忘记的。

相关推荐
右子16 分钟前
微信小程序开发“闭坑”指南
前端·javascript·微信小程序
入秋29 分钟前
Three.js后期处理实战:噪点 景深 以及色彩调整
前端·javascript·three.js
Asort33 分钟前
JavaScript设计模式(七)——桥接模式:解耦抽象与实现的优雅之道
前端·javascript·设计模式
golang学习记35 分钟前
从0死磕全栈之Next.js 应用中的认证与授权:从零实现安全用户系统
前端
苏打水com41 分钟前
携程前端业务:在线旅游生态下的「复杂行程交互」与「高并发预订」实践
前端·状态模式·旅游
Darenm11142 分钟前
深入理解CSS BFC:块级格式化上下文
前端·css
Darenm1111 小时前
JavaScript事件流:冒泡与捕获的深度解析
开发语言·前端·javascript
@大迁世界1 小时前
第03章: Vue 3 组合式函数深度指南
前端·javascript·vue.js·前端框架·ecmascript
小白64021 小时前
前端梳理体系从常问问题去完善-框架篇(react生态)
前端·css·html·reactjs
Hy行者勇哥1 小时前
数据中台的数据源与数据处理流程
大数据·前端·人工智能·学习·个人开发