search

博客列表 >html常用标签

html常用标签

P粉890456325
P粉890456325原创
2023年01月18日 14:29:02315浏览

0113作业

1. 写出html文档结构,并解释每个成员的功能与作用

  1. <!-- 1. 文档类型元素 -->
  2. <!DOCTYPE html>
  3. <!-- 2. 根元素: 浏览器渲染html的起点,入口 -->
  4. <!-- lang="zh-CN": 属性,标签的特征,用"键(lang),值(zh-CN)对"的方式来表示 -->
  5. <html lang="zh-CN">
  6.   <!-- 根元素只有二个子元素 <head><body> -->
  7.   <!-- 2.1 头元素: 浏览器, 搜索引擎SEO-->
  8.   <head>
  9.     <!-- 2.1.1 元标签,中介,媒婆 -->
  10.     <!-- 页面编码 -->
  11.     <meta charset="utf-8" />
  12.     <!-- 兼容模式: 多余的 -->
  13.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  14.     <!-- 视口设置: 视口(可视窗口), 375px 375px -->
  15.     <meta name="viewport" content="width=device-width,initial-scale=1.0" />
  16.     <!-- 页面标题 -->
  17.     <title>html结构</title>
  19.     <!-- 页面主体 -->
  20.     <body>
  21.       <!-- <girl-friend height="170" weight="110" bwh="88,86,84">小刘亦菲</girl-friend> -->
  22.       <!--
  23.         1. 元素: 女朋友
  24.         2. 标签: <girl-friend>
  25.         3. 属性: height,weight,bwh(bust,waist,hips)
  26.         通用属性, 姓名,性别,年龄,学历
  27.        -->
  29.       <h1 id="header" class="title" style="color: red">Hello, binbin</h1>
  30.       <!--
  31.         1. 元素: 大标题
  32.         2. 标签: <h1>
  33.         3. 属性: id,class,style (通用属性/预定义)
  34.         预置标签: w3c制定,各家浏览器实现
  35.        -->
  37.       <!-- 双标签: 起始标签和结束标签,内容写到他们之间,属性写到起始标签中 -->
  39.       <!-- 单标签: 空标签,它的内容由某个属性来设置,本质上"资源占位符" -->
  40.       <!-- <input type="text" value="admin" />
  41.       <img src="url" alt="" />
  42.       <link rel="stylesheet" href="style.css" /> -->
  44.       <!--
  45.         1. 双标签: 自身内容,由开发人员自己写
  46.         2. 单标签: 外部资源的占位符,空标签
  47.         3. 预定义标签: <h1>,<input>,<div>,<ul>...
  48.         4. 预定义属性: id,class,style, src,type,value,name...
  49.         5. 自定义标签: <girl-friend>
  50.         6. 自定义属性: height,weight,bwh(bust,waist,hips)
  51.         7. 标准化的自定义属性: "data-"自定义属性固定前缀
  52.        -->
  54.     </body>
  55.   </head>
  56. </html>

‘’’

2. 演示布局元素,重点是 tag+class

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8. </head>
  9. <body>
  10.     <!-- <div id="header">页眉</div>
  11.     <div id="mains">主体</div>
  12.     <div id="footer">页脚</div>
  13.     <hr />
  14.   <div class="header">页眉</div>
  15.     <div class="mains">主体</div>
  16.     <div class="footer">页脚</div>
  19. </body>
  20. </html>

3. 演示图文的语义化解决方案

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8. </head>
  9. <body>
  10.     <header>页眉</header>
  11.     <main>主体</main>
  12.     <footer>页脚</footer> 
  13.     <hr />
  14.             -->
  15.     <style>
  16.         .article.header{
  17.             color: red;
  18.         }.article.main{
  19.             color: rgb(4, 255, 0);
  20.         }.article.footer{
  21.             color: rgb(47, 0, 255);
  22.         }
  25.     </style>
  26.     <!-- <article>
  27.         <header class="article header">文章头部</header>
  28.         <main class="article main">文章主体</main>
  29.         <footer class="article footer">文章底部</footer>
  30.     </article> -->
  31.     <div class="article header">页眉</div>
  32.     <div class="article main">主体</div>
  33.     <div class="article footer">页脚</div>
  36.     </body>
  37. </html>

4. 演示图像,链接与列表元素

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8. </head>
  9.     <body>
  10.      <div></div>
  11.     <div class="box">
  12.         <img src="https://img.php.cn/upload/aroundimg/000/000/001/63b69d4c2de93667.png" alt="">
  13.         <p class="title">二十二期</p>
  14.     </div>
  15.     <hr />
  16.     <figure>
  17.         <img src="https://img.php.cn/upload/aroundimg/000/000/001/63b69d4c2de93667.png" alt="php" width="200">
  18.         <figcaption>二十二期</figcaption>
  19.     </figure>
  20.     <a href="https://php.cn" target="_self">php.cn</a>
  21.     <a href="https://php.cn">
  22.     <img src="https://img.php.cn/upload/aroundimg/000/000/001/63b69d4c2de93667.png" alt="php" width="200"></a>
  24.     <a href="https://php.cn" target="_blank"><button>abcd</button></a>
  25.     <!-- 无序列表 -->
  26. <ul>
  27.     <li>itme1</li>
  28.     <li>itme2</li>
  29.     <li>itme3</li>
  30. </ul>
  31. <!-- 有序列表 -->
  32. <ol>
  33.     <li>itme1</li>
  34.     <li>itme2</li>
  35.     <li>itme3</li>
  36. </ol>
  38. <!-- 自定义列表 -->
  39. <dl>
  40.     <dt>itme1</dt>
  41.         <dd>itme1</dd> 
  42.         <dd>itme2</dd> 
  43.         <dd>itme3</dd>
  44.     <dt>itme2</dt>
  45.         <dd>itme1</dd> 
  46.         <dd>itme2</dd> 
  47.         <dd>itme3</dd>
  48.     <dt>itme3</dt>
  49.         <dd>itme1</dd> 
  50.         <dd>itme2</dd> 
  51.         <dd>itme3</dd>
  52. </dl>
  53.     </body>
  54. </html>
上一条：下载安装vscode和chrome下一条：前端常用软件安装
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多