HTML高级元素

最新推荐文章于 2024-07-03 19:41:47 发布
最新推荐文章于 2024-07-03 19:41:47 发布
阅读量364 收藏 6
点赞数 6
分类专栏： CSS3 文章标签： html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42535142/article/details/135371480
版权

目录

 

一、认识列表元素​

二、列表的实现方式​

三、有序列表 – ol – li​

四、无序列表 – ul - li​

五、定义列表 – dl – dt - dd​

五、列表的练习​

六、认识表格元素​

七、表格常见的元素​

八、表格的练习 ​

九、表格的其他元素​

十、单元格合并​

十一、如何使用单元格合并呢?​

十二、单元格合并练习​

十三、作业布置​

十四、认识表单​

十五、常见的表单元素​

十六、input元素的使用​

十七、布尔属性（boolean attributes）​

十八、表单按钮​

十九、input和label的关系​

二十、radio的使用​

二十一、checkbox的使用​

二十二、textarea的使用​

二十三、select和option的使用​

 二十四、form常见的属性​

 二十五、请求方式的对比​

 

一、认识列表元素
6f86bbbfa9774dcebbca1ad8d97b15be.png

二、列表的实现方式
58ecc887b89d48d5a2b6009ff0dc74ee.png

三、有序列表 – ol – li
397939e789634a8a9dd0075667c51fb4.png

<!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>
  <style>
    ol, li {
      padding: 0;
      margin: 0;
      list-style: none;
    }
  </style>
</head>
<body>
  
  <h1>自己喜欢的电影排名: </h1>
  <ol>
    <li>星际穿越</li>
    <li>大话西游</li>
    <li>盗梦空间</li>
    <li>喜洋洋和灰太狼</li>
    <li>熊出没</li>
    <li>奥特曼</li>
  </ol>

  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>

</body>
</html>

 33d778f9baf84b998d2c3c7fd6044c5e.png

四、无序列表 – ul - li
4f8f05dd25e04b6e8addd5766ddbb83d.png

<!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>
  <style>
    ul, body, h1, p {
      list-style-type: none;
      padding: 0;
      margin: 0;
    }
  </style>
</head>
<body>
  
  <h1>常见的编程语言</h1>
  <ul>
    <li>
      <span>1</span>
      JavaScript
    </li>
    <li>Java</li>
    <li>C++</li>
    <li>Objective-C</li>
    <li>Swift</li>
    <li>Ruby</li>
    <li>Python</li>
  </ul>

</body>
</html>

 fa58569092344833a86e62ccce1da953.png

五、定义列表 – dl – dt - dd
c66903e7663c4caf966e2148e7184d87.png

 

<!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>
  <style>
    dl, dt, dd {
      padding: 0;
      margin: 0;
    }

    dt {
      font-size: 20px;
      font-weight: 700;
      margin: 10px 0;
    }

    dd {
      margin: 5px;
    }
  </style>
</head>
<body>
  
  <!-- 列出前端开发各个阶段 -->
  <h1>前端开发</h1>
  <dl>
    <dt>阶段一: 打好基础</dt>
    <dd>HTML</dd>
    <dd>CSS</dd>
    <dd>JavaScript</dd>
    <dd>JavaScript DOM</dd>
    <dd>JavaScript BOM</dd>
    <dd>JavaScript高级语法</dd>

    <dt>阶段二: 框架实战</dt>
    <dd>Node基础</dd>
    <dd>Webpack基础</dd>
    <dd>Git源代码管理</dd>
    <dd>Vue框架实战</dd>
    <dd>React框架实战</dd>
    <dd>小程序+云开发</dd>
    <dd>uniapp+taro</dd>

    <dt>阶段三: 课程进阶</dt>
    <dd>TypeScript</dd>
    <dd>Vue + TypeScript</dd>
    <dd>React + TypeScript</dd>
    <dd>Node/开发脚手架/Node服务器开发/MySQL</dd>
    <dd>Webpack高级/性能优化/Vite/Rollup/gulp</dd>
    <dd>数据结构和算法</dd>

  </dl>

</body>
</html>

62a754fea1624391b4658a2553d3b566.png 

五、列表的练习
0e46f1b77c75401c9af9baced7b07f78.png

<!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="./css/reset.css">
  <!-- 
    1. 先完成结构
    2. 重置样式(body/a/ul)
    3. 先整体, 后局部
      * 顺序: 按照从外往里. 从上往下
    4. 去除重复的代码(css)
      * 将重复的逻辑放到一个单独的class中(.icon)
      * 不同的代码抽到不同的class(.new .hot)
   -->
  <style>
    ul > li {
      margin-top: 18px;
    }

    ul > li > a {
      display: inline-block;
    }

    ul > li > a:hover {
      color: #f04142;
    }

    /* 局部 */
    ul > li .ranking {
      display: inline-block;
      width: 24px;
      height: 24px;
      margin-right: 3px;
      text-align: center;
      line-height: 24px;

      font-weight: 700;
      color: #999;
    }

    /* 伪类: 结构伪类(后续会详细讲解) */
    ul > li:nth-child(1) .ranking {
      color: #f00;
    }
    
    ul > li:nth-child(2) .ranking {
      color: #0f0;
    }
    
    ul > li:nth-child(3) .ranking {
      color: #00f;
    }


    /* 内容相关 */
    ul > li .content {
      display: inline;
    }

    /* 图标相关的 */
    ul > li .icon {
      position: relative;
      top: 2px;
      left: 4px;

      display: inline-block;
      width: 16px;
      height: 16px;
      background-image: url(../images/new_icon.svg);
    }

    ul > li .new {
      background-image: url(../images/new_icon.svg);
    }

    ul > li .hot {
      background-image: url(../images/hot_icon.svg);
    }

  </style>
</head>
<body>
  
  <ul>
    <li class="item">
      <a href="#">
        <span class="ranking">1</span>
        <div class="content">
          一花一世界明媚春天杜鹃花开满枝头色彩艳丽繁花似锦
        </div>
        <i class="icon"></i>
      </a>
    </li>
    <li class="item">
      <a href="#">
        <span class="ranking">2</span>
        <div class="content">
          一花一世界明媚春天杜鹃花开满枝头色彩艳丽繁花似锦
        </div>
        <i class="icon new"></i>
      </a>
    </li>
    <li class="item">
      <a href="#">
        <span class="ranking">3</span>
        <div class="content">
          一花一世界明媚春天杜鹃花开满枝头色彩艳丽繁花似锦
        </div>
      </a>
    </li>
    <li class="item">
      <a href="#">
        <span class="ranking">4</span>
        <div class="content">
          一花一世界明媚春天杜鹃花开满枝头色彩艳丽繁花似锦
        </div>
        <i class="icon"></i>
      </a>
    </li>
    <li class="item">
      <a href="#">
        <span class="ranking">5</span>
        <div class="content">
          一花一世界明媚春天杜鹃花开满枝头色彩艳丽繁花似锦
        </div>
        <i class="icon hot"></i>
      </a>
    </li>
    <li class="item">
      <a href="#">
        <span class="ranking">6</span>
        <div class="content">
          一花一世界明媚春天杜鹃花开满枝头色彩艳丽繁花似锦
        </div>
      </a>
    </li>
    <li class="item">
      <a href="#">
        <span class="ranking">7</span>
        <div class="content">
          一花一世界明媚春天杜鹃花开满枝头色彩艳丽繁花似锦
        </div>
        <i class="icon"></i>
      </a>
    </li>
    <li class="item">
      <a href="#">
        <span class="ranking">8</span>
        <div class="content">
          一花一世界明媚春天杜鹃花开满枝头色彩艳丽繁花似锦
        </div>
        <i class="icon"></i>
      </a>
    </li>
    <li class="item">
      <a href="#">
        <span class="ranking">9</span>
        <div class="content">
          一花一世界明媚春天杜鹃花开满枝头色彩艳丽繁花似锦
        </div>
        <i class="icon hot"></i>
      </a>
    </li>
  </ul>

</body>
</html>

604306fc27134d73b2d671e8cc3ee77f.png

继承属性和自己的属性

<!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>
  <style>
    .box {
      color: red !important;
    }

    .container {
      color: #0f0;
    }
  </style>
</head>
<body>
  
  <div class="box">
    aaaaaaaaaa
    <div class="container">我是container的内容</div>
  </div>

</body>
</html>

df63e2b1097e4a8fbf829dd2b83b2f5c.png 

六、认识表格元素
6fe28ebb6ff342ed9401df5aea8466a0.png

七、表格常见的元素
a2164b3869a44b9bb52e43b232fdc9e4.png

八、表格的练习
2856462a68ec4885a9a26f67236f79f4.png

 

<!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>
  <style>
    table {
      text-align: center;
      border-collapse: collapse;
    }

    td {
      border: 1px solid #333;
      padding: 8px 16px;
    }

    table tr:nth-child(1) {
      font-weight: 700;
    }
  </style>
</head>
<body>
  
  <table>
    <tr>
      <td>排名</td>
      <td>股票名称</td>
      <td>股票代码</td>
      <td>股票价格</td>
      <td>股票的涨跌</td>
    </tr>
    <tr>
      <td>1</td>
      <td>贵州茅台</td>
      <td>600519</td>
      <td>1800</td>
      <td>5%</td>
    </tr>
    <tr>
      <td>1</td>
      <td>贵州茅台</td>
      <td>600519</td>
      <td>1800</td>
      <td>5%</td>
    </tr>
    <tr>
      <td>2</td>
      <td>腾讯控股</td>
      <td>00700</td>
      <td>400</td>
      <td>3%</td>
    </tr>
    <tr>
      <td>3</td>
      <td>五粮液</td>
      <td>000858</td>
      <td>160</td>
      <td>8%</td>
    </tr>
  </table>

</body>
</html>

87f1b0a846cc4ae5a710256118dc537a.png 

九、表格的其他元素
6d966922d575450aa291c327d2d77518.png

<!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>
  <style>
    table {
      text-align: center;
      border-collapse: collapse;
    }

    td, th {
      border: 1px solid #333;
      padding: 8px 16px;
    }

    table tbody tr:nth-child(1) {
      color: red;
      font-weight: 700;
    }

  </style>
</head>
<body>
  
  <table>
    <caption>热门股票</caption>
    <thead>
      <tr>
        <th>排名</th>
        <th>股票名称</th>
        <th>股票代码</th>
        <th>股票价格</th>
        <th>股票的涨跌</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>贵州茅台</td>
        <td>600519</td>
        <td>1800</td>
        <td>5%</td>
      </tr>
      <tr>
        <td>1</td>
        <td>贵州茅台</td>
        <td>600519</td>
        <td>1800</td>
        <td>5%</td>
      </tr>
      <tr>
        <td>2</td>
        <td>腾讯控股</td>
        <td>00700</td>
        <td>400</td>
        <td>3%</td>
      </tr>
      <tr>
        <td>3</td>
        <td>五粮液</td>
        <td>000858</td>
        <td>160</td>
        <td>8%</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td>其他</td>
        <td>其他</td>
        <td>其他</td>
        <td>其他</td>
        <td>其他</td>
      </tr>
    </tfoot>
  </table>

</body>
</html>

 cf56603763324b2d8c01771be325222e.png

十、单元格合并
2e08f4d4e4454edd9b9645deef6b207b.png

十一、如何使用单元格合并呢?
056e2a9f5aec403b864f5c0c2a2bb9f6.png

十二、单元格合并练习
e38e1b7fa82c4c4f9bf0e7684527a0cd.png

<!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>
  <style>
    table {
      border-collapse: collapse;
      text-align: center;
    }

    td {
      border: 1px solid red;
      padding: 10px 20px;
    }
  </style>
</head>
<body>

  <!-- 
    1.确定  "谁"  需要跨行或者跨列
    2.确定是跨"行"还是跨"列"
    3.跨几行或者几列
   -->
  
  <!-- 跨列演练 -->
  <!-- <table>
    <tr>
      <td colspan="2">1-1</td>
    </tr>
    <tr>
      <td>2-1</td>
      <td>2-2</td>
    </tr>
  </table> -->

  <!-- 跨行演练 -->
  <table>
    <tr>
      <td rowspan="2">1-1</td>
      <td>1-2</td>
    </tr>
    <tr>
      <td>2-2</td>
    </tr>
  </table>

</body>
</html>

 5f2a51c3ac4b466ba09dc17ceeeb1b85.png

<!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>
  <style>
    table {
      border-collapse: collapse;
      text-align: center;
    }

    /* tr.head {
      font-weight: 700;
      font-size: 20px;
    } */

    /* n的取值: 0和整数  */
    /* 0, 1, 2, 3, 4, 5, 6......... */
    table tr:nth-child(-n + 2) {
      font-weight: 700;
      font-size: 20px;
    }

    /* 属性选择器 */
    table tr td[rowspan] {
      font-weight: 700;
      font-size: 18px;
    }

    td {
      border: 1px solid red;
      width: 100px;
      height: 30px;
    }
  </style>
</head>
<body>
  
  <table>
    <tr>
      <td colspan="6">课程表</td>
    </tr>
    <tr>
      <td></td>
      <td>星期一</td>
      <td>星期二</td>
      <td>星期三</td>
      <td>星期四</td>
      <td>星期五</td>
    </tr>
    <tr>
      <td rowspan="4">上午</td>
      <td>数学</td>
      <td>数学</td>
      <td>数学</td>
      <td>数学</td>
      <td>数学</td>
    </tr>
    <tr>
      <td>数学</td>
      <td>数学</td>
      <td>数学</td>
      <td>数学</td>
      <td>数学</td>
    </tr>
    <tr>
      <td>数学</td>
      <td>数学</td>
      <td>数学</td>
      <td>数学</td>
      <td>数学</td>
    </tr>
    <tr>
      <td>数学</td>
      <td>数学</td>
      <td>数学</td>
      <td>数学</td>
      <td>数学</td>
    </tr>
    <tr>
      <td rowspan="4">下午</td>
      <td>数学</td>
      <td>数学</td>
      <td>数学</td>
      <td>数学</td>
      <td>数学</td>
    </tr>
    <tr>
      <td>数学</td>
      <td>数学</td>
      <td>数学</td>
      <td>数学</td>
      <td>数学</td>
    </tr>
    <tr>
      <td>数学</td>
      <td>数学</td>
      <td>数学</td>
      <td>数学</td>
      <td>数学</td>
    </tr>
    <tr>
      <td>数学</td>
      <td>数学</td>
      <td>数学</td>
      <td>数学</td>
      <td>数学</td>
    </tr>
    <tr>
      <td rowspan="2">晚自习</td>
      <td>数学</td>
      <td>数学</td>
      <td>数学</td>
      <td>数学</td>
      <td>数学</td>
    </tr>
    <tr>
      <td>数学</td>
      <td>数学</td>
      <td>数学</td>
      <td>数学</td>
      <td>数学</td>
    </tr>
  </table>

</body>
</html>

 5f534f9d91ff424daf78708a91033ba9.png

十三、作业布置
4ae5056cdb2e44b987d3a536a95066ef.png

十四、认识表单
ab0605bc48964768a33a9ebe7ba30ee9.png

十五、常见的表单元素
b9c1511aeee14b3bb77a3f5b66d53cc3.png

十六、input元素的使用
05b4fe4c18e948e29abe584af8aa27cb.png

<!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>
  
  <!-- 行内(替换元素?) -->
  <div>
    <input type="text">
  </div>
  <div>
    <input type="password">
  </div>
  <div>
    <input type="time">
  </div>
  <div>
    <input type="date">
  </div>
  <div>
    <input type="file">
  </div>

  <input type="text" readonly>
  <input type="text" readonly="readonly">
  <input type="text" disabled>

  <input type="text" autofocus>

</body>
</html>

7c502c1d8b644faa9b9bfcf58248b7d5.png

十七、布尔属性（boolean attributes）
d9a1088f181e49c68a2172acba5732af.png

十八、表单按钮
46434036a0364184b361dd7042f88a75.png

<!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>
  
  <!-- <button>我是按钮</button> -->

  <!-- 用input来实现按钮的效果 -->
  <form action="">
    <input type="text">
    <input type="date">

    <div>
      <input type="button" value="普通按钮">
      <button>普通按钮</button>
    </div>
    <!-- reset可以对form中的其他表单元素进行重置 -->
    <div>
      <input type="reset" value="重置按钮">
      <button type="reset">重置按钮</button>
    </div>
    <!-- submit可以对form中的其他表单元素进行提交(将数据提交给服务器) -->
    <div>
      <input type="submit" value="提交按钮">
      <button type="submit">提交按钮</button>
    </div>
  </form>

</body>
</html>

f941c6fa7fa94b1b979d06f90645f6a3.png

十九、input和label的关系
74c37f25765b49129278c92fe685b7de.png

<!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>
  
  <div>
    <label for="username">
      用户: 
      <input id="username" type="text">
    </label>
    
  </div>
  <div>
    <label for="password">
      密码: 
      <input id="password" type="password">
    </label>
  </div>

</body>
</html>

23967561a6c0442f92f4384ecf0b3e26.png

二十、radio的使用
f5788c06174a41adb0eef64babcad657.png

be319966519944598af44b27a8657948.png

二十一、checkbox的使用
c383b302aa2642beb23390bcd95636bf.png

<!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>
  
  <form action="/cba">
    <div>
      您的爱好:
      <label for="basketball">
        <input id="basketball" type="checkbox" name="hobby" checked value="basketball">篮球
      </label>
      <label for="football">
        <input id="football" type="checkbox" name="hobby" value="football">足球
      </label>
    </div>
    
    <input type="submit">
  </form>

</body>
</html>

16c225d0e8d74cdea26f6af04e31097e.png

二十二、textarea的使用
dd97a15de0c344899ff2a9622c9ee65f.png

<!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>
  <style>
    textarea {
      resize: vertical;
    }
  </style>
</head>
<body>
  
  <form action="">
    <label for="info">
      个人描述:
      <textarea name="info" id="info" cols="10" rows="6"></textarea>
    </label>
  </form>

</body>
</html>

de6aa2bd16bf4d7eaac5f34fea96db9e.png

 

二十三、select和option的使用
2408615d192440388d2a2a39a750ac55.png

<!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>
  
  <select name="fruits" id="" multiple size="2">
    <option value="apple" selected>苹果</option>
    <option value="banana">香蕉</option>
    <option value="orange">橘子</option>
  </select>

</body>
</html>

 b9f9d420f2ce41debedbd0a1609ead4d.png

 二十四、form常见的属性
27c913a866d24c04a0f09904cd8b9544.png

<!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>
  
  <form action="http://hongyuancoder.com/abc" method="post" target="_blank">
    <div>
      <label for="username">
        用户: <input id="username" type="text" name="username">
      </label>
    </div>
    <div>
      <label for="password">
        密码: <input id="password" type="password" name="password">
      </label>
    </div>

    <!-- 性别 -->
    <div>
      性别: 
      <label for="male">
        <input id="male" type="radio" name="sex" value="male">男
      </label>
      <label for="female">
        <input id="female" type="radio" name="sex" value="female">女
      </label>
    </div>

    <!-- 爱好 -->
    <div>
      爱好:
      <label for="basketball">
        <input id="basketball" type="checkbox" name="hobby" checked value="basketball">篮球
      </label>
      <label for="football">
        <input id="football" type="checkbox" name="hobby" value="football">足球
      </label>
    </div>

    <!-- 提交按钮 -->
    <button type="reset">重置内容</button>
    <button type="submit">提交内容</button>
  </form>

</body>
</html>

 1453e314cfea42cda86b5978f17e944c.png

 二十五、请求方式的对比
118a299a532c496d8cbc6163aad806ae.png

<!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>
  
  <form action="http://www.baidu.com/s">
    <input type="text" name="wd">
    <button type="submit">百度一下</button>
  </form>

</body>
</html>

823ac19003af4d88a14dd10cfa6db1e5.png

 

小袁儿
关注
  • 6
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
你真的熟练运用 HTML5 了吗，这10 个酷炫的 H5 特性你会几个？
努力是为了站在万人之中，成为别人的光
07-05 26万+
HTML5不是什么新鲜事。自初始版本（2008 年 1 月）以来，我们一直在使用它的几个功能。我再次仔细查看了 HTML5 功能列表。看看我发现了什么？到目前为止，我还没有真正使用过很多！ 在本文中，我列出了 10 个这样的HTML5功能，这些功能过去我用得不多，但现在发现它们很有用。我还创建了一个工作示例流程并托管在Netlify. 希望你也觉得它有用。让我们开始了解有关它们中的每一个的解释、代码和快速提示。 https://wanghao221.github.io/html-tips-tricks/
HTML列表属性详解：掌握列表元素的样式和行为控制
a451319296的博客
11-15 3770
HTML 列表是网页中常见的元素类型，可以用来展示一系列相关的数据或信息。为了让列表更加灵活和适应不同场景，HTML 提供了多种列表属性，包括 type、start、reversed、value、compact 等属性。这些属性可以让开发者自由地定制列表的类型、编号、排列方式等特性。
HTML元素的分类及特点,HTML元素的分类
weixin_28432777的博客
06-10 1479
HTML元素的分类块元素div：无语义，常用于布局aside：表示article元素的内容之外的与article元素的内容相关内容figure：表示一段独立的流内容；使用元素为其添加标题例：PRCthe people......dialog：该标签定义对话例：老师2+2等于？学生4行元素span：无语义，多用于布局mark：呈现突出显示的...time：表示日期会时间；meter：表示度量衡，用于...
html 块内元素 下移,html——行内元素、块元素、行内块元素
weixin_34916118的博客
06-03 1591
行内元素：span ,a, ,strong , em, del, ins。特点：在一行上显示；不能直接设置宽高；元素的宽和高就是内容撑开的宽高。块元素：div,h1-h6,p,ul,li。特点：独占一行；可以设置宽高；注释：嵌套(包含)下，子块元素宽度(没有定义情况下)和父块元素宽度默认一致。行内块元素(内联元素)：input img。特点：在一行上显示，也可设置其宽高。div {wid...
HTML和css高级
GC
06-29 6140
一、设置块元素相对于父级水平居中的技巧：将块元素左右的margin值设置为auto，一般写成： margin:0px auto; 二、元素显示特性display display:inline 将元素转化为内联元素 display:block 将元素转化为块元素 display:none 将元素隐藏 display属性是用来设置元素的类型及隐藏的，常用的属性有： 1、none 元素隐藏且不占位...
HTML CSS整理笔记
热门推荐
Lin16819的博客
12-12 3万+
常见字体单位： 1.em 移动端常用的字体尺寸单位，说白em就相当于“倍”，比如设置当前的div的字体大小为1.5em，则当前的div的字体大小为：当前div继承的字体大小*1.5。 但当div进行嵌套时，em始终按当前div继承的字体大小来缩放。 2.rem r是root的意思，即相对于根节点html的font-size进行缩放，当有嵌套关系时，嵌套关系的元素的字体大小始终按照根节点的字体大小...
HTML基础--表单元素知识
qq_44489836的博客
02-22 4092
学习目标： 通过简单的实践，学习基本的 HTML FORM 标签，理解各种表单元素的使用场景，并且掌握表单一系列基本验证方式。 学习内容： 1.HTML表单 HTML 表单用于搜集不同类型的用户输入。 (1)<form>元素 HTML 表单用于收集用户输入。 <form>元素定义 HTML 表单： <form> ... form elements ... </form> 表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。 (2
HTML5高级之新增form表单中的类型、属性、元素（带示例）
maoye的博客
09-27 4348
  在HTML5中新增了很多from表单中使用的输入类型，我理解使用的记录一下！   --邮箱验证：email --网址验证：url --电话号码验证：tel --数字验证：number --查找：search --日期选择：date --选择周：week --选择月：month --日期和时间：datetime   非本地时间 --日期和时间：fatetime-local...
HTML5高级之块元素和内联元素
Wendy
11-15 3037
元素可以分为两种，一种是块元素，一种是内联（行内、内嵌）元素。块元素比如常用的div、p、h1等，内联元素比如常用的span、i、a等。接下来详细说明这两种元素各自的特性、使用方法以及两者之间的相互转化。 1、块元素的特性       1）默认独占一行       2）没有宽度时，默认撑满一行       3）支持所有css命令 如图所示： 代码：
HTML中的＜canvas＞元素
官方推荐
09-18 2万+
HTML中的元素的作用
Html5元素及基本语法详解
09-27
HTML5是现代网页开发的核心，它引入了许多新特性、元素和改进了原有的语法，使得...通过不断实践和学习，你可以掌握更高级的HTML5特性，如表单控件、多媒体元素、离线存储等，从而构建更加高效和用户体验优秀的网站。
一个超高级的元素周期表页面html源码
01-09
这个资源是一个关于元素周期表的高级HTML页面源码，它为学习化学的用户提供了互动性的体验。HTML是一种标记语言，用于构建和呈现网页内容。在这个案例中，源码设计得非常精致，包含了丰富的视觉效果和交互功能，使...
HTML5高级程序设计 PDF
04-24
这本书“HTML5高级程序设计”是程序员深入理解这一技术的必备读物，旨在通过通俗易懂的语言，让编程变得生动而有趣。 HTML5的核心特性包括： 1. **语义化元素**：HTML5引入了许多新的语义化元素，如`<header>`、`...
HTML-high-level-application.rar_high_html 高级
09-22
这个压缩包中的"HTML high level application.txt"很可能是对以上部分或全部知识点的详细讲解和实例，学习者可以通过阅读和实践来提升自己的HTML高级应用技能。通过深入理解并运用这些知识，初学者可以创建功能丰富...
middle-html：学习高级HTML概念标记，元素和属性
02-09
在"middle-html：学习高级HTML概念标记，元素和属性"这个主题中，我们将深入探讨HTML的一些高级特性，帮助你提升网页设计与开发的能力。 一、HTML元素 HTML元素是HTML的基本组成单元，它由标签（tag）和内容...
如何用简单的html，css，js写出一个带有背景层的删除弹出框
qq_56776909的博客
07-03 374
虽然每次项目都是主要写后端，但是有时候前端的样式太丑了，也有点看不下去。弹出框是项目中用的比较多的，比如删除，修改或者添加什么的，都需要一个弹出框。所以这里简单记录一下，应该如何实现。
html之内联样式
abments的博客
07-02 433
内联样式（inline styles）是在HTML元素的style属性中直接定义的CSS样式。与外部样式表或内部样式表不同，内联样式仅应用于特定的HTML元素。使用内联样式时，可以在HTML标签中直接添加样式，而无需通过外部或内部的CSS文件引用样式规则。
HTML CSS 基础复习笔记 - 表格标签使用
forevercui的博客
07-03 403
web复习笔记
同时用C++和HTML同时做一个饭店价格统计器
最新发布
weixin_56334307的博客
07-03 197
大家有没有想过在饭店的时候我们讲了很多的不同的大碗小碗的饭算价格要算很久但是利用这个程序就不需要算很久了完了我们可以用c++和html实现这个计算。
HTML 高级选择夹
06-07
HTML高级选择器是CSS3提供的新特性，可以通过更复杂的选择器语法来选择HTML文档中的元素。它们可以根据元素的属性、位置和关系等多种条件来进行选择。以下是一些常用的HTML高级选择器： 1. :nth-child(n) - 选择父...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值