Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 2020.07.25周末班作业
Blogger Information
Blog 4
fans 0
comment 0
visits 2089
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
2020.07.25周末班作业
sunyinF
Original
555 people have browsed it

1.本机安装vscode，chrome并安装推荐插件完成；

2.html文档结构；
在vscode上新建文档命名为XX.html，编辑文档输入快捷指令 ！或 html:5 按回车键Enter生成;

  1. <!-- 标明此文档为html格式 -->
  2. <!DOCTYPE html>
  3. <!-- <html>...</html>:html根标签，根元素，代表整个html文档 -->
  4. <!-- lang 设置文档主体语言 en：英文 zh-cn：中文简体 -->
  5. <html lang="en">
  6.   <!-- <head>...</head>头元素：不在页面显示，给搜索引擎使用，可在里面插入CSS或JS -->
  7.   <head>
  8.     <!-- 文档编码集常用编码utf-8，gb2312 不分大小写 -->
  9.     <meta charset="UTF-8" />
  10.     <!-- viewport： 视口，当前文档在浏览器中可以被用户看到的部分 -->
  11.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  12.     <!-- title 页面标题/页面命名 -->
  13.     <title>Document</title>
  14.   </head>
  15.   <!--   <body>...</body>主体元素：页面用户可视化源码编译内容 -->
  16.   <body></body>
  17. </html>

3.元素与属性的关系；
改变元素中的属性值使整个标签发生变化；

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Document</title>
  7.   </head>
  8.   <body>
  9.     <!-- 起始标签 -->
  10.     <div style="font-size: 24px; color: #333;">
  11.       元素属性
  12.       <!-- 结束标签/闭合标签 -->
  13.     </div>
  14.   </body>
  15. </html>

4.语义化的结构元素
页眉标签：header ；
主体标签：main ；
页脚标签：footer ；
导航标签： nav ；

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Document</title>
  7.   </head>
  8.   <body>
  9.     <!-- 页眉 -->
  10.     <header>
  11.       <!-- 导航 -->
  12.       <nav>
  13.         <a href="">首页</a>
  14.         <a href="">导航</a>
  15.         <a href="">栏目</a>
  16.       </nav>
  17.     </header>
  18.     <!-- 主体 -->
  19.     <main>
  20.       <section class="">广告</section>
  21.       <section class="">内容区</section>
  22.       <section class="">推荐</section>
  23.     </main>
  24.     <!-- 页脚 -->
  25.     <footer>
  26.       <nav>
  27.         <a href="www.baidu.com">百度</a>
  28.         <a href="pnp.cn">php中文网</a>
  29.       </nav>
  30.     </footer>
  31.   </body>
  32. </html>

5.语义化的文本元素
走马灯单行本：marquee
删除线：s
下划线：u
进度条：progress

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Document</title>
  7.   </head>
  8.   <body>
  9.     <marquee style="width: 80px;">走马灯单行</marquee>
  10.     <s>删除</s>
  11.     <u>下划线</u>
  12.   </br>
  13.     <progress value="65" max="100">进度条</progress>
  14.   </body>
  15. </html>

6.链接元素

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Document</title>
  7.   </head>
  8.   <body>
  9.     <!-- 跳转链接；target="_blank" 为新窗口打开链接，不添加为在原先窗口跳转链接 -->
  10.     <a href="http://www.baidu.com">百度</a>
  11.     <!-- 下载链接以文件格式不同，添加html可识别的download格式说明 -->
  12.     <a href="0726.rar">下载</a>
  13.     <!-- 电话链接：在想拨打打号码前面加上tel：；大多适用于手机 -->
  14.     <a href="tel:110">电话</a>
  15.     <!-- 邮件链接：在想发送的目标邮件前加上mailto：；得操作端口启动邮件客服端或APP -->
  16.     <a href="mailto:944366340@qq.com">邮箱</a>
  17.     <!-- 锚点链接：在原页面上实现跳转 -->
  18.     <a href="#id">锚点</a>
  19.     <h3 style="margin: 1000px 0;" id="id">锚点目标</h3>
  20.   </body>
  21. </html>

7.列表元素

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Document</title>
  7.   </head>
  8.   <body>
  9.     <!-- 无序列表 -->
  10.     <ul>
  11.       <li>css</li>
  12.       <li>html</li>
  13.       <li>js</li>
  14.     </ul>
  15.     <!-- 有序列表 -->
  16.     <ol start="2">
  17.       <li>早餐</li>
  18.       <li>午餐</li>
  19.       <li>晚餐</li>
  20.       <li>宵夜</li>
  21.     </ol>
  22.     <!-- 自定义列表 -->
  23.     <dl>
  24.       <!-- 列表项标题 -->
  25.       <dt>标题</dt>
  26.       <!-- 列表项内容 -->
  27.       <dd>内容1</dd>
  28.       <dd>内容2</dd>
  30.       <dt>标题2</dt>
  31.       <dd>这内容就一个</dd>
  32.     </dl>
  33.     <!-- 语义化写法：通常用来写页脚 -->
  34.     <dl>
  35.       <dt>电话：</dt>
  36.       <dd>110</dd>
  37.     </dl>
  38.   </body>
  39. </html>
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：很好
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post