html学习

最新推荐文章于 2025-05-30 22:33:54 发布
最新推荐文章于 2025-05-30 22:33:54 发布
阅读量133 收藏
点赞数
文章标签： html 学习 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_74440897/article/details/131732896
版权

1.元素显示模式

 <!--元素显示模式：
    块元素：独占一行   div      宽、高、内外边距可以设置
    行内元素：一行可以存在多个  span   宽、高、内外边距不可以设置
    行内块元素：    
-->

    <div>我是一个盒子</div>
    <span>我是span</span>

    <ul>
        <li>我是li</li>
    </ul>

2.表格标签

<table>
        <!-- 表头 rows  data-->
        <caption>学生信息</caption>
        <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>民族</th>
                <th>政治面貌</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>王鑫宇</td>
                <td>男</td>
                <td>18</td>
                <td>汉</td>
                <td>党员</td>
            </tr>
            <tr>
                <td>王鑫宇</td>
                <td>男</td>
                <td>18</td>
                <td>汉</td>
                <td>党员</td>
            </tr>
            <tr>
                <td>王鑫宇</td>
                <td>男</td>
                <td>18</td>
                <td>汉</td>
                <td>党员</td>
            </tr>
            <tr>
                <td>王鑫宇</td>
                <td>男</td>
                <td>18</td>
                <td>汉</td>
                <td>党员</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td>共计:4人</td>

            </tr>


        </tfoot>


    </table>

3.表格标签属性

<table border="10px" width="900px" height="400px" cellspacing="0">
        <!-- 表头 rows  data
        table：border（只控制最外围大小）、width、height(tbody 值是底线，只高不低)、cellspacing(单元格与单元格之间的距离)
        caption；通过css更改
        thead、tr、tbody、tfoot:height\align（水平）\valign（垂直）

        -->
        <caption>学生信息</caption>
        <thead height="200px" align="center" valign="middle">
            <tr height="400px" align="center" valign="center">
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>民族</th>
                <th>政治面貌</th>
            </tr>
        </thead>
        <tbody height="600px" align="center" valign="middle">
            <tr>
                <td>王鑫宇</td>
                <td>男</td>
                <td>18</td>
                <td>汉</td>
                <td>党员</td>
            </tr>
            <tr>
                <td>王鑫宇</td>
                <td>男</td>
                <td>18</td>
                <td>汉</td>
                <td>党员</td>
            </tr>
            <tr>
                <td>王鑫宇</td>
                <td>男</td>
                <td>18</td>
                <td>汉</td>
                <td>党员</td>
            </tr>
            <tr>
                <td>王鑫宇</td>
                <td>男</td>
                <td>18</td>
                <td>汉</td>
                <td>党员</td>
            </tr>
        </tbody>
        <tfoot height="600px" align="center" valign="middle">
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td>共计:4人</td>

            </tr>


        </tfoot>


    </table>

4.单元格合并

跨行：rowspan

跨列：colspan

<body>
    <!-- td   跨行：rowspan
              跨列：colspan
    -->
    <table border="1px" width="800px" cellspacing="0">
        <!-- 表头 rows  data-->
        <caption>学生信息</caption>
        <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>民族</th>
                <th>政治面貌</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td rowspan="2">王鑫宇</td>
                <td>男</td>
                <td>18</td>
                <td>汉</td>
                <td>党员</td>
            </tr>
            <tr>
                <td>男</td>
                <td>18</td>
                <td>汉</td>
                <td>党员</td>
            </tr>
            <tr>
                <td>王鑫宇</td>
                <td>男</td>
                <td>18</td>
                <td>汉</td>
                <td>党员</td>
            </tr>
            <tr>
                <td>王鑫宇</td>
                <td>男</td>
                <td>18</td>
                <td>汉</td>
                <td>党员</td>
            </tr>
        </tbody>
        <tfoot>
            <tr align="right">
                <td colspan="5">共计:4人</td>
            </tr>


        </tfoot>


    </table>
</body>

5.详情标签

 <!-- details：详情标签         配合summary使用 -->
    <details>
        <summary>有志青年</summary>
        我们这里都是优秀的有志青年
    </details>

6.焦点元素获取

<!-- tabindex：让本不能tab遍历获取焦点的元素可以获取 可以为负数，0，正数-->
    <input type="text">
    <a href="#">去百度</a>
    <div>我是第一个盒子</div>
    <div tabindex="0">我是第2个盒子</div>
    <div>我是第3个盒子</div>
    <div>我是第4个盒子</div>

7.表单的基本结构

 <!-- 表单：网页交互区，收集用户信息 
      action:将数据交给谁处理
      name：必有属性
      method：提交方式   ajax
    -->
    <form action="https://www.baidu.com/s">
        <input type="text" name="wd">
        <button>提交</button>
    </form>

8.常见的表单元素


```bash
<form action="#">
        <!-- 文本框    maxlength:最大长度-->
        用户名：<input type="text" name="user" value="" maxlength="6" placeholder="请输入用户名："><br />
        <!-- 密码 -->
        密码：<input type="password" name="pwd"><br />
        <!-- 单选框 -->
        <input type="radio" name="gender" value="nan">男
        <input type="radio" name="gender" value="nv">女<br />
        <!-- 多选框   label标签-->
        <input type="checkbox" name="food" id="liulian"><label for="liulian">吃榴莲</label>
        <label><input type="checkbox" name="food">吃臭豆腐</label>
        <!-- checked默认选中 -->
        <input type="checkbox" name="food" checked>吃肥肉
        <!-- 隐藏域 -->
        <input type="hidden" name="hid" value="南德斯才能使调查">
        <!-- 确认按钮 -->
        <!-- <button type="submit"></button> -->
        <!--重置按钮 -->
        <input type="reset">

        <!-- 普通按钮 -->
        <input type="button">
        <!-- 文本域 -->
        <textarea cols="20" rows="10" maxlength="200">
        </textarea><br />
        <!-- 下拉菜单 -->
        <select name="jiguan" id="">
            <option value="南京">南京</option>
            <!-- selected下拉菜单的默认选中 -->
            <option value="成都" selected>成都</option>
            <option value="西安">西安</option>
        </select>
        <input type="submit">
    </form>

9.HTML的全局属性

<!-- id身份证号，在一个页面中只能出现一次 -->
    <div id="one"></div>
    <!-- class   一类 可以出现多个-->
    <div class="pink" style="font-size: 40px;">我是哟个盒子</div>
    <div class="pink">我是哟个盒子</div>
    <div class="pink">我是哟个盒子</div>
    <div class="pink">我是哟个盒子</div>

    <!-- accesskey  设置快捷键 -->
    <form action="#">
        <input type="text" name="a" id="">
        <button accesskey="s">提交</button>
    </form>

    <!-- style -->
    <!-- data-*  自定义属性 -->

10.HTML5语义标签

header—页面或页面中某一个区块，通常是一些引导和导航信息
nav----可以作为页面导航的链接组
section----页面中的一个内容区块，通常由内容及其标题组成
aside----非正文的内容，与页面的主要内容分开的，被删除而不会影响到网页的内容
article—代表一个独立的、完整的一个区块，可独立于页面其他内容使用
footer----页面或页面中的某一个脚注
main—h5的语义化标签，除了单词不一样，本质上就是一个div

11.CSS的三种引入方式

 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 外部样式   推荐！！！！！ -->
    <link rel="stylesheet" href="./14-样式.css">
    <!-- 内部样式 -->
    <style>
        /* css基本结构
        选择器{
            属性名： 属性值；
            属性名： 属性值；
        } 
        */
        .box1 {
            width: 300px;
            height: 300px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="box1">我是盒子</div>
    <!-- 行内样式：不推荐 -->
    <div style="width: 300px; height: 300px; background-color: green;"></div>
    <div class="box2">我是box2</div>
</body>

12.样式CSS

.box2 {
    width: 300px;
    height: 300px;
    background-color: blue;
}

13.基本选择器

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器</title>
    <style>
        /* 标签选择器  选中所有的p标签*/
        p {
            color: aqua;
        }

        /* id选择器 */
        #box1 {
            color: pink;
        }

        /* 类选择器 */
        .box2 {
            color: blueviolet;
        }

        /* 通配符选择器
        *{
            
        }
        
        */
    </style>
</head>

<body>
    <p>我是一段文字</p>
    <div id="box1">我是盒子一</div>
    <div class="box2">我是盒子2</div>
    <div class="box2">我是盒子3</div>

    <p>我是一段文字</p>

</body>

14.包含选择器

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 子代选择器   选中亲生儿子*/
        .a>li {
            background-color: pink;
        }

        /* 后代选择器 找到后代所有要找的元素*/
        .a li {
            color: blueviolet;
        }
    </style>
</head>

<body>

    <ul class="a">
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <ul>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </ul>

15.字体的样式

head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体</title>
    <style>
        div {
            cursor: pointer;

            /* 字体大小 */
            /* font-size: 40px; */
            /* 字体粗细 */
            /* font-weight: bold; */
            /* font-weight: 900; */
            /* 100-900 400===normal  800===bold  100-900越来越粗           font-weight: 400;*/
            /* 字体是否倾斜 */
            /* font-style: italic/normal; */
            /* font-family: "微软雅黑"; */

            /* italic 900可省略，字体大小，font-family必须存在 */
            font: italic 900 70px "微软雅黑"

        }
    </style>
</head>

<body>
    <div>
        我是图图小淘气，面对世界很好奇
    </div>

16.复合选择器

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* div {
            color: pink;
        }

        p {
            color: pink;
        }

        span {
            color: pink;
        } */
        div,
        p,
        span {
            color: red;
        }
    </style>
</head>

<body>
    <div>wisjiajsskmx</div>
    <p>cndklcdsmc</p>
    <span>jnckdsmc</span>
    <ul>
        <li>吃饱穿暖CNBCCDC</li>
    </ul>
</body>

17.属性选择器

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input {
            background-color: pink;
        }

        input[type="password"] {
            background-color: aquamarine;
        }

        div[id] {
            width: 300px;
            height: 300px;
            background-color: blue;
        }

        /* type^="te"以te开头 */
        input[type^="te"] {
            background-color: red;
        }

        input[type$="l"] {
            background-color: green;
        }

        /* type*="e"    type值里边包含e */
        input[type*="e"] {
            background-color: chartreuse;
        }
    </style>
</head>

<body>
    <input type="text"><br />
    <input type="password"><br />
    <input type="search"><br />
    <input type="url"><br />
    <input type="number"><br />

    <div id="aquamarine">1</div>
    <div>2</div>


</body>

18.首行缩进

<style>
        p {
            /* text-indent: 32px; */
            font-size: 20px;
            text-indent: 2em;
        }
    </style>

练习：表单制作

在这里插入图片描述

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
 </head>
 <body>
  <h1>青春不常在，抓紧谈恋爱</h1>
  <br />
  性别     <input type="radio" name="gender" value="nan">男
             <input type="radio" name="gender" value="nv">女<br />
                     生日 <select name="shengri" id="">
            <option value="请选择年" selected>请选择年</option>
            <option value="2004">2004</option>
            </select>
             <select name="shengri" id="">
            <option value="请选择月" selected>请选择年</option>
            <option value="7">7</option>
            </select>
             <select name="shengri" id="">
            <option value="请选择日" selected>请选择年</option>
            <option value="28">28</option> 
            </select><br />
        所在地区<input type="text" name="地区" value="" maxlength="10" placeholder="请输入地区名"><br />
        婚姻情况 <input type="radio" name="gender" value="未婚">未婚
            <input type="radio" name="gender" value="已婚">已婚
             <input type="radio" name="gender" value="离婚">离婚<br />
       学历        <input type="text" name="学历" value="" maxlength="10" placeholder="本科"><br />
       喜欢的类型  <input type="checkbox" name="like" id="liulian"><label for="liulian">妩媚的</label>
              <label><input type="checkbox" name="like">可爱的</label>
              <label><input type="checkbox" name="like">小鲜肉</label>
              <label><input type="checkbox" name="like">老腊肉</label>
              <label><input type="checkbox" name="like">都喜欢</label><br />
       自我介绍   <textarea cols="20" rows="2" maxlength="200 ">
            </textarea><br />
             <button>免费注册</button><br />
             <label><input type="checkbox" name="">我同意注册条款和会员加入标准</label> <br />
			 <th><a href="http://www.xianoupeng.com/" target="_blank">我是会员，立即登录</a> </th> 
             <h1>我承诺</h1>
    <ul>
        <li>年满18岁，单身</li>
        <li>抱着严肃的态度</li>
        <li>真诚寻找另一半</li>
    </ul>
 </body>
</html>
涮羊
关注
C/C++学习路线总结与分享
dvlinker的技术专栏
10-07 10万+
C/C++学习路线总结与分享
HTML学习
ljn0320的博客
12-12 1万+
HTML学习标题段落链接图像元素属性样式style 标题 // 标签<h1>-<h6> <h1>This is a heading</h1> 段落 // HTML 段落是通过 <p> 标签进行定义的。 <p>This is a paragraph</p> <br />为换行符，在不产生新段落的情况下进行换行 无法通过在HTML中添加额外空格或者换行来改变输出的效果。当显示页面时，浏览器会移除源代码中多余的空格
HTML学习笔记——05：表格
qq_31532983的博客
01-15 9103
HTML-表格
HTML学习笔记
清雨染墨衣
01-13 5875
html学习笔记，包含了常见的20-30个html标签，所有标签掌握之后便可以自己写些简单的html页面
HTML的学习心得
weixin_47223561的博客
03-30 4843
HTML一、HTML简介二、HTML文档结构二、使用步骤1.引入库2.读入数据总结 经过这段时间对HTML的学习，深刻了解了网页的结构和组成以及对网页界面构成的代码有了一定的认识基础，从之前对网页制造的白板认识，到现在能看懂网页代码的大致意思。这让我有了很多收获。 一、HTML简介 （1）超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。 （2）HTML 不是一种编程语言，而是一种标记语言 （3）标记语言是一套标记标签 (marku
【HTML 学习笔记】HTML 教程--注释
ffffffeiyu的博客
02-29 4854
-webbot bot--> 标签会被包围在由 FrontPage 和 Expression Web 创建的 HTML 注释中。条件注释定义只有 Internet Explorer 执行的 HTML 标签。作为一项规则，这些标签的存在，有助于对创建这些标签的软件的支持。浏览器不会显示注释，但是能够帮助记录您的 HTML 文档。注释：在开始标签中有一个惊叹号，但是结束标签中没有。各种 HTML 软件程序也能够生成 HTML 注释。
HTML学习心得（一）
sinat_36075824的博客
09-13 2559
学习时间：2017.9.12 学习内容：HTML教程 学习方式：在线学习，菜鸟教程 学习心得： 1.编码声明：对于中文网页需要使用 <meta charset="utf-8"> 声明编码，否则会出现乱码。有些浏览器会设置 GBK 为默认编码，则你需要设置为 <meta charset="gbk">；除了在命令 "mysql_query(set names utf8)" 外一律用
HTML学习（一）
qq1164014750
05-23 1万+
h1 在一个页面里最好只出现一次。       理论是不做过多的限制。建议还是不要多用，一般一个页面用一个H1标签对就可以了。就如同你做论文的排版格式一样，写得再长，也只允许出现一个标题1是一个道理。标题1转到HTML代码里面就是H1标签对，这H1就是老大！如果一个页面中过多的使用H1，就相当于有N个老大，这样老大一多肯定会打架的！蜘蛛爬进来一看：纳尼？！这多老大！老夫先拿哪个开刀呢。。。然后再一...
学习HTML心得体会
呀~~土豆的博客
04-19 2万+
初学程序体会！
html学习笔记（二）
m0_51684016的博客
03-24 4876
文章目录一、表格二、语义标签三、特殊符号四、总结 今天学完了html的大部分知识点，剩下了一些较难的知识点如svg等内容，留在以后学vue3、react的时候回过头来学；后续的话要学习css和JavaScript（重点）。这两三天的事情也比较多，今天将Django项目部署在服务器上了，并且成功跑起来了传送门,后续将持续更新该项目。 一、表格 随着框架的发展，table使用的频率越来越低了，现在可能只有真的想实现一个表格时才会使用table。 caption：标题 table  &nbsp
HTML零基础入门教程完整版
哈哈
09-11 2万+
HTML零基础入门教程完整版
HTML学习指南：从基础到实践总结
在本文档中，我们将会深入探讨HTML学习的基础知识和重要性，特别针对初学者可能遇到的困惑，如HTML标签的记忆和理解。HTML，全称为HyperText Markup Language，是构建网页结构的核心语言，对于前端开发至关重要。 ...
HTML入门与进阶以及HTML5
热门推荐
wuyxinu的博客
12-12 38万+
目录 一、简介 1、前端开发最核心技术 （1）HTML是什么？ （2）CSS （3）JavaScript 2、前端开发其他技术 二、基础内容 1.基础总结 2.HTML的基本标签 (1)HTML标签 (2)head标签 (3)body标签 3、段落与文字 (一)、段落标签 (二)、网页特殊符号 (三)、自闭合标签 (四)、块元素和行内元素 (五)、练...
前端学习之HTML
weixin_44362089的博客
10-12 4425
前端基础，HTML,form表单，超链接，基本标签，有序列表，无序列表
HTML网页设计结课作业——11张精美网页 html+css+javascript+bootstarp
Q_Q___1875547220的博客
08-12 7456
1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑
【Java Web】速通HTML
m0_55908255的博客
05-29 810
HTML是网页内容的载体。"网页内容"就是指网页制作者放在页面上想要让用户浏览的信息，包括文字图片视频等。如下就是基础的没有任何CSS样式的HTML页面🆗，以上就是本文内容，表格标签和表单标签是必须掌握的，尤其是表单标签，后期使用频率很高，几乎是不可避免。
Python爬虫实战：研究Requests-HTML库相关技术
ylfhpy的博客
05-29 520
传统爬虫技术在面对现代 JavaScript 动态渲染网页时面临挑战，而 Requests-HTML 库通过集成浏览器渲染引擎，为解决这一问题提供了有效方案。本文旨在通过实际案例，系统研究 Requests-HTML 库的技术特点和应用场景。采用案例研究法，结合理论分析与实验验证，深入探讨该库在处理复杂网页结构时的优势与局限性。验证了 Requests-HTML 在处理复杂 JavaScript 渲染页面时的有效性。：基于 Requests 库，支持 HTTP/HTTPS 请求。
纯html，js创建一个类似excel的表格
全粘工程师
05-29 358
摘要：该系统为基于PHP的员工绩效管理平台，支持数据增删改查操作。主要功能包括：1）员工绩效数据表格化管理，支持按年月查询；2）动态添加/删除员工记录；3）积分
使用 HTML + JavaScript 实现可拖拽的任务看板系统
最新发布
cfxiaoding的博客
05-30 1196
本文将介绍如何使用 HTML、CSS 和 JavaScript 创建一个交互式任务看板系统。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值