新手向:HTML进阶

简介: HTML一些进阶内容

 一,列表

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

1.有序列表

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

<!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>

image.gif

image.gif 编辑

效果如图

2.无序列表

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

<!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>

image.gif

image.gif 编辑

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

<!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>

image.gif

image.gif 编辑

定义列表

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

<!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>

image.gif

image.gif 编辑

二,表格

image.gif 编辑

<!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>

image.gif

image.gif 编辑

三,表单

 表单一般和js一起使用

input标签

image.gif 编辑

<!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>

image.gif

下拉菜单

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

<!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>

image.gif

image.gif 编辑

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

文本域,按钮,文本label

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

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

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

四,div和span

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

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

image.gif 编辑

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

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

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

目录
相关文章
|
2月前
|
Web App开发 JavaScript 前端开发
html基础操练和进阶修炼宝典
html基础操练和进阶修炼宝典
|
2月前
|
移动开发 前端开发 开发者
【专栏:HTML进阶篇】网页结构与语义化标签进阶
【4月更文挑战第30天】提升网页结构清晰度和无障碍访问性,有利于SEO。这些标签为屏幕阅读器提供额外上下文,简化CSS样式设计,避免无意义的&lt;div&gt;和&lt;span&gt;。正确使用语义化标签是现代网页开发的关键,能创造更优质、易访问和优化的Web体验。
|
2月前
|
前端开发 数据安全/隐私保护
html进阶语法(2)
文本域 作用:多行输入文本的表单控件。
61 0
|
2月前
|
数据安全/隐私保护
html进阶语法(1)
html进阶 列表、表格、表单 目标:掌握嵌套关系标签的写法,使用列表标签布局网页
48 0
html进阶语法(1)
|
10月前
|
前端开发
html和css进阶小练习
html和css进阶小练习
|
10月前
|
编解码 前端开发 JavaScript
html和css进阶
html和css进阶
|
移动开发 JavaScript 前端开发
[译]HTML进阶之Content categories
[译]HTML进阶之Content categories
[译]HTML进阶之Content categories
|
Web App开发 XML 测试技术
pytest进阶之html测试报告
pytest进阶之html测试报告前言  Pytest系列已经写了几篇文章了,也不知道对多少人有帮助,总之对于我自己来说该掌握的都已经掌握了,那么今天我们再来说说pytest如何生成一个完整的html测试报告,让你在吹牛逼的路上再多一份资本!废话不多说,进入正题!(咋就莫名其妙想起这句话了呢, 估计看文章看多了,貌似挺多人用这句话过度……) 使用pytest-html插件生成测试报告 pytest-html生成报告pytest是借助pytest-html插件生成测试测试报告, 不用自己编写生成报告代码。
3894 0
|
前端开发 容器 HTML5
Html和Css学习笔记-html进阶-div与span
Html和Css学习笔记-html进阶-div与span 此篇博客是我的复习笔记,html和css学的时间太久了,忘得差不多了,最近要使用一下,所以重新打开html的书略读,后记录了标签,元素,属性的具体意义。
1536 0
|
数据安全/隐私保护 安全 大数据
HTML基础进阶
HTML表单 form标签 标签代表一个表单,表单用于向服务器传输数据。 标签能够包含 ,可以是文本字段,复选框,单选框或提交按钮等。还可以包含 等。    常用属性:       name:用于定义表单的名称       action:用于规定提交表单时向何处发送表单数据。
1204 0