Community Learn Tools Library Leisure
search
English
Home > List of blog posts > html知识点
Blogger Information
Blog 6
fans 1
comment 0
visits 5727
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
html知识点
xiaosheng
Original
767 people have browsed it

前端知识点简单总结

HTML中的部分标签

标签 作用
header 用于头部信息
nav 导航链接,前后按钮
main 主体部分
article 包含文章
section 章节、页眉、页脚或文档中的其他部分,一般包含h标签
aside 侧边栏
footer 页脚
pre pre中的空格和换行符会原样输出,一般包含代码
code 包含代码
time 包含时间
sup 在右上角显示
sub 在右下角显示
address 地址,会自动换行
s,del 删除线
progress 进度条,value为当前值,max为最大值
i 斜体
strong,em 加强语气,strong语气更强
mark 标记(内容颜色默认为黄色)
q 短引用
blockquote 长引用

a标签

  • href属性的值 :

    • 网址(跳转到新网址)
    • “mailto:邮箱地址”(发送邮件)
    • “tel:电话号码”(打电话)

  • target属性的值 :

    • _self : 在当前窗口打开新页面,默认就是在当前窗口打开
    • _blank : 在新窗口打开

  • 锚点 :

    • 作用 : 常用于返回顶部,如,点击a标签则会回到顶部
      1. <a href="#top">底部</a>
      2. <h1 id="top">xiaosheng</h1>

列表

  • 列表分类
标签 作用
ol->li 有序列表
ul->li 无序列表
dl->dt+dd 自定义列表

表格

  • table属性:
    • border 设置边框
    • cellspacing 规定单元格之间的空白,当为0的时候是单边框
    • cellpadding 规定单元边沿与其内容之间的空白
标签 作用
caption 表格标题
thead->tr->th 表头
tbody->tr->td 表格内容

rowspan : 纵向合并
colspan : 横向合并

iframe内联框架

  1. <!-- 会显示引用地址的内容 -->
  2. <iframe src="地址"></iframe>
  4. <!-- 点击a标签后会显示demo1.html中的内容,没有点击前,显示的是demo1中的内容 -->
  5. <a href='demo1.html' target='demo1'>demo1</a>
  6. <iframe srcdoc='demo1中的内容' src='' name='demo1'></iframe>

以下为具体的案例

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title></title>
  5. </head>
  6. <body>
  7.     <header>
  8.         <nav>
  9.             <a href="#">Home</a>
  10.             <a href="#">About</a>
  11.             <a href="#">Connect</a>
  12.             <a href="#">Blog</a>
  13.         </nav>
  14.     </header>
  15.     <main>
  16.         <article>
  17.             <header>
  18.                 <h1>文章标题</h1>
  19.                 <p>文章段落1</p>
  20.                 <p>文章段落2</p>
  21.             </header>
  22.             <!-- 只有元素内容会被列在文档大纲中时，才适合用section元素 -->
  23.             <!-- section 里应该有 标题（h1~6），但文章中推荐用 article 来代替
  24. 我们可以理解为一个非文章段落，有明确 id 的一个特殊模块容器（不是专用以包住块的容器） -->
  25.             <section>
  26.                 <h2>标题2</h2>
  27.                 <p>文章段落1</p>
  28.                 <p>文章段落2</p>
  29.             </section>
  30.             <footer>
  31.                 <section><h6>分页条</h6></section>
  32.             </footer>
  33.         </article>
  34.         <aside>
  35.             <ul>
  36.                 <li>推荐信息1</li>
  37.                 <li>推荐信息2</li>
  38.                 <li>推荐信息3</li>
  39.                 <li>推荐信息4</li>
  40.                 <li>推荐信息5</li>
  41.             </ul>
  42.         </aside>
  43.         <aside>
  44.             <section>
  45.                 <h3>广告位招商</h3>
  46.             </section>
  47.         </aside>
  49.         <section>
  50.             <span>标签1</span>
  51.             <span>标签2</span>
  52.             <span>标签3</span>
  53.         </section>
  54.     </main>
  56.     <!-- pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体,常见应用就是用来表示计算机的源代码 -->
  57.     <pre>
  58.         满园春色关不住,
  59.         一支红杏出墙来.
  60.     </pre>
  62.     <footer>
  63.         <div class="link">
  64.             <a href="#">链接1</a>
  65.             <a href="#">链接2</a>
  66.             <a href="#">链接3</a>
  67.         </div>
  68.     </footer>
  70.     <time>2019-11-15 14:22:45</time>
  71.     <br>
  72.     <span>2019-11-15 14:22:45</span>
  74.     <p>     HTML文档,是指采用超文本标记语言编写的结构化文档
  75.     </p>
  76.     <br>
  77.     <p>
  78.         <abbr title="HyperText Markup Language">HTML</abbr>文档,是指采用超文本标记语言编写的结构化文档
  79.     </p>
  80.     <hr>
  81.     <p>
  82.         2 <sup>3</sup> = 8
  83.         <br>
  84.         合肥 <sub style="color:gray">中国发展最快的城市之一</sub>欢迎您
  85.     </p>
  87.     <!-- address会自动换行 -->
  88.     <footer>
  89.         联系地址:<address>合肥市政务新区怀宁路999号</address>
  90.     </footer>
  91.     <br>
  92.     <!-- 删除线标签s,del -->
  93.     猪肉原价: <s>58.88元</s>,现价: <span>49.99元</span>
  94.     <br>
  95.     猪肉原价: <del>58.88元</del>, 现价: <span>49.99元</span>
  96.     <hr>
  97.     <pre>
  98.     <code>
  99.         var num = 3;
  100.         echo num+3;
  101.     </code>
  102.     </pre>
  103.     <!-- 进度条 -->
  104.     <progress value="33" max="100"></progress>
  105.     <hr>
  106.     <b>多看多写是最快的学习方法</b>
  107.     <!-- strong 把文本定义为语气更强的强调的内容。 -->
  108.     <strong>多看多写是最快的学习方法</strong>
  109.     <br>
  110.     <!-- i 斜体 -->
  111.     <i>程序员是地球上最聪明的一群人</i>
  112.     <br>
  113.     <!-- em:把文本定义为强调的内容 -->
  114.     <em>程序员是地球上最聪明的一群人</em>
  115.     <hr>
  116.     <!-- mark:突出显示部分文本 -->
  117.     <p>
  118.         我是php中文网的讲师:<mark>朱老师(Peter Zhu)</mark>
  119.     </p>
  120.     <hr>
  121.     <!-- q:标记短的引用 -->
  122.     <p>
  123.         <q>
  124.             引用文本
  125.         </q>
  126.     </p>
  127.     <!-- blockquote:标记长的引用 -->
  128.     <blockquote title="http://www.kuxiaosheng.com">
  129.         <p>
  130.             超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。
  131.         这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。
  132.         这种组织信息方式将分布在不同位置的信息资源用随机方式进行连
  133.         </p>
  134.     </blockquote>
  135. </body>
  136. </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