前端与 HTML | 青训营笔记

158 阅读2分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第1天

学习内容

html中的必需元素

  • <!DOCTYPE html>是任何HTML文档中的第一个元素,不是标准的一部分,可以告诉是哪个版本的HTML编写的
  • <html>打开元素
  • </html>关闭元素
  • <head></head> 头部元素,可以包含标题,用于文档、脚本、样式、元信息等
  • <body></body>包含想显示在屏幕的所有内容

基础元素

  • <h>标题标签,由h1(一级标题)到h6(六级标题)
  • <div> 标签中包含的所有内容都属于一起,<div>之间类似身体中的各个器官
  • 段落标签有<p><span>,其中<p> 可以填一段纯文本,而<span>包含短文本或其他 HTML,它们用于分隔与其他内容在同一行的小块内容。
  • <ul> </ul> 无序列表
  • <ol> </ol>有序列表 自带123排序
  • <em>让文本斜体
  • <strong加粗内容,强调
  • <br>换行,闭合标签,不需要在后面添加</br>
  • <a>锚标签,带有target属性,指定链接应如何打开,一般将target属性设置为"_blank"指示浏览器在新窗口中打开页面

表格标签

  • <table>
  • <tr>行标签
  • <td>数据标签,一个代表一个数据
  • <th>表格标题标签
  • 一般有 <scope> 属性,=row表明标题是一行,=col表明标题是针对一列的colspan跨列属性,rowspan跨行属性

媒体标签

  • <img> 图片标签 结尾带/可省略,必须带有src属性,且src属性为图片来源值,为图片的url
  • <video>视频标签 同样带src属性,一般还会带有controls属性来添加对视频的基本控制

语义标签

  • <header>页眉,用于包含<nav>和标题
  • <nav>定义导航链接块
  • <main>封装主要内容,包含header和article元素
  • <footer>页脚
  • <section>章节,反骨偶有相同主题的内容
  • <aside>标记额外内容
  • <figure>封装媒体元素
  • <figcaption>描述标签中的媒体元素,会随着图形移动
  • <audoi>封装音频

知识总结

html的基本原则是表达内容,其中不仅是让浏览内容的人更好的阅读,还要让写代码,维护代码的人更好的阅读,所以将html语义化是一大重点,而想要更好的将html的代码内容语义化,就要尽可能多的去认识html标签,深刻的了解标签和属性的作用、含义。