Community Learn Tools Library Leisure
search
English
Home > List of blog posts > php.cn_week1_day1 作业提交【Html基本结构与元素列表】
Blogger Information
Blog 16
fans 0
comment 0
visits 15796
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
php.cn_week1_day1 作业提交【Html基本结构与元素列表】
Allen在php中文网的学习笔记
Original
655 people have browsed it

html的基本结构

  1. <!-- 告诉浏览器这是一个html文档 -->
  2. <!DOCTYPE html>
  3. <!-- 根标签，根元素，代表整个html文档。 所有html内容均需要写到标签中。   lang=‘en’ 属性，表示当前页面的主要语言 -->
  4. <html lang="zh-cn">
  5.   <!-- 头元素  他的内容不在页面中显示，这是给浏览器和搜索引擎使用-->
  6.   <head>
  7.     <!-- 当前文档字符编码集 -->
  8.     <meta charset="UTF-8" />
  9.     <!-- viewport 视口 :当前文档在浏览器中可以被用户看到的部分 -->
  10.     <!-- width=设备宽度 -->
  11.     <!-- initial-casle 缩放=1.0 -->
  12.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  13.     <!-- 标题 -->
  14.     <title>html5文档结构</title>
  15.   </head>
  16.   <!-- 主题元素   用户看到的内容-->
  17.   <body>
  18.     <h2 style="color: red;">二级标题</h2>
  19.     <!-- 1.所有标签全部小写,html不区分大小写标签 -->
  20.   </body>
  21. </html>

vscode默认已经安装了element，在编辑器中 英文输入模式下 输入!然后按回车 生成基本结构

注释

<!-- 这是html的注释-->

<!-- 建议所有标签全部小写,虽然html不区分大小写标签 -->

元素和属性

HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。需要闭合

<p></p>

  1.     <!-- 元素，由双标签表示
  2.     <div>
  3.       元素示范
  4.     </div> -->
  5.     <!-- 三大通用属性 style  id  class -->

元素的结构

  1.   <div>
  2.       <p>
  3.         <span>
  4.           <a>
  5.            结构示例，层级包裹
  6.           </a>
  7.         </span>
  8.       </p>
  9.     </div>
  11.     <!--一般网站结构-->
  12.      <!-- 头部 页眉 -->
  13.     <div id="header">
  14.       <ui>
  15.         <li></li>
  16.       </ui>
  17.     </div>
  18.     <!-- 主体 -->
  19.        <div id="main">
  20.       <ui>
  21.         <li></li>
  22.       </ui>
  23.     </div>
  24.     <!-- 页脚 -->
  25.        <div id="footer">
  26.       <ui>
  27.         <li></li>
  28.       </ui>
  29.     </div>

html5的基本网站结构

  1. <!DOCTYPE html5>
  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.     <header></header> //头部
  10.     <main></main> //主体
  11.     <footrt></footrt> //页脚
  12.   </body>
  13. </html>

语义化

一、什么是HTML语义化标签

语义化的标签，说明让标签有自己的含义。

  1. <p>一行文字</p>
  2. <span>一行文字</span>

二、语义化标签的特点

代码结构清晰，方便阅读，有利于团队合作开发。

方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以语义的方式来渲染网页。

有利于搜索引擎优化（SEO）。

便于团队开发和维护，语义化更具可读性，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

三、常见的语义化标签

  1. <title>：页面主体内容。
  3. <hn>：h1~h6，分级标题，<h1> 与 <title> 协调有利于搜索引擎优化。
  5. <ul>：无序列表。
  7. <ol>：有序列表。
  9. <header>：页眉通常包括网站标志、主导航、全站链接以及搜索框。
  11. <nav>：标记导航，仅对文档中重要的链接群使用。
  13. <main>：页面主要内容，一个页面只能使用一次。如果是web应用，则包围其主要功能。
  15. <article>：定义外部的内容，其中的内容独立于文档的其余部分。
  17. <section>：定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
  19. <aside>：定义其所处内容之外的内容。如侧栏、文章的一组链接、广告、友情链接、相关产品列表等。
  21. <footer>：页脚，只有当父级是body时，才是整个页面的页脚。
  23. <small>：呈现小号字体效果，指定细则，输入免责声明、注解、署名、版权。
  25. <strong>：和 em 标签一样，用于强调文本，但它强调的程度更强一些。
  27. <em>：将其中的文本表示为强调的内容，表现为斜体。
  29. <mark>：使用黄色突出显示部分文本。
  31. <figure>：规定独立的流内容（图像、图表、照片、代码等等）（默认有40px左右margin）。
  33. <figcaption>：定义 figure 元素的标题，应该被置于 figure 元素的第一个或最后一个子元素的位置。
  35. <cite>：表示所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。
  37. <blockquoto>：定义块引用，块引用拥有它们自己的空间。
  39. <q>：短的引述（跨浏览器问题，尽量避免使用）。
  41. <time>：datetime属性遵循特定格式，如果忽略此属性，文本内容必须是合法的日期或者时间格式。
  43. <abbr>：简称或缩写。
  45. <dfn>：定义术语元素，与定义必须紧挨着，可以在描述列表dl元素中使用。
  47. <del>：移除的内容。
  49. <ins>：添加的内容。
  51. <code>：标记代码。
  53. <meter>：定义已知范围或分数值内的标量测量。（Internet Explorer 不支持 meter 标签）
  55. <progress>：定义运行中的进度（进程）。

作者：KevinLee0424
链接：https://www.jianshu.com/p/35de4476fe27
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

链接元素

  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>链接与列表元素</title>
  7.   </head>
  8.   <body>
  9.     <!-- 经典用法 在新页面中打开-->
  10.      <a href="www.2222.gq" target="_blank">万贰国际</a> 
  12.     <!-- 下载文件 自动重命名-->
  13.     <a href="0725.md" download="html.md">笔记</a>
  15.     <!-- 打电话 -->
  16.     <a href="tel:13027905400">电话</a>
  18.     <!-- 发邮件 -->
  19.     <a href="mailtoo:3095300995@qq.com">发邮件</a>
  21.     <!-- 锚点 在当前页面中跳转-->
  22.     <a href="#h2">found?</a>
  23.     <h2 id="h2" style="margin-top: 1000px;">you guess</h2>
  25.     <!-- id 以后用到id的场景会非常少， -->
  26.     <!-- 浏览器不检查id的唯一性，而js依赖他的唯一性来获取元素 -->
  28.     <!-- 能用class就用class -->
  30.     <!-- id在两种场景中非常有有用，也只能用id -->
  31.     <!-- 1.锚点 -->
  32.     <!-- 2.表单元素中的空间 -->
  33.   </body>
  34. </html>

列表元素

有序列表

  1.  <!-- 有序列表 -->
  2.  //从2开始
  3.     <ol start="2">
  4.       <li>html</li>
  5.       <li>css</li>
  6.       <li>javascript</li>
  7.     </ol>

无序列表

  1.     <!-- 无序列表 -->
  2.     <ul>
  3.       <li>html</li>
  4.       <li>css</li>
  5.       <li>javascript</li>
  6.     </ul>

自定义列表

  1.    <!-- 自定义列表 -->
  2.     <!-- 通常用来写页脚 -->
  3.     <dl>
  4.       <!-- 列表项标题 -->
  5.       <dt>php</dt>
  6.       <!-- 列表项内容 -->
  7.       <dd>通用的服务器端编程语言</dd>
  8.       <dd>非常适合快速的web开发</dd>
  9.       <dt>mysql</dt>
  10.       <!-- 列表项内容 -->
  11.       <dd>社区活跃</dd>
  12.       <dd>大厂支持</dd>
  13.     </dl>
  14.     </dl>
  15.   </body>
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