前端和HTML|青训营笔记

化作孤岛
301 阅读2分钟

前端和HTML|青训营笔记

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

知识点总结

前端关注点

图形界面下的交互问题
功能，美观，无障碍，安全，性能，兼容性
发展快，技术不断更新，入门门槛低

HTML

!DOCTYPE 标签：]()
​
- 它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令.
​
head：
​
- 是所有头部元素的容器, 绝大多数头部标签的内容不会显示给读者
​
​
body :
​
- 用于定义文档的主体, 包含了文档的所有内容

DOM树

image

​

语法

  • 标签不区分大小写，但是推荐小写。
  • 空标签不闭合，比如input，meta
  • 属性值推荐用双引号包裹
  • 某些属性值可以省略
​
<q></q>标签定义短的引用
​
<cite></cite>定义作品的标题
​
<strong></strong>把文本定义为强调的内容。
​
<em></em>把文本定义为强调的内容。
​
pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。
<pre> 标签的一个常见应用就是用来表示计算机的源代码。

语义化

  • HTML中的元素，属性及属性值都拥有某些含义
  • 开发者应该遵循语义来编写HTML
  • 有序列表ol,无需列表用ul
  • lang属性表示内容所使用的语言

preview

语义化标签

<header>
  • 定义文章的介绍信息：标题，logo，slogan；包裹目录部分，搜索框，一个nav或者任何相关的logo；
<nav>
  • 定义文章导航栏，链接等;
<main>
  • 定义文章的主要内容
<section>
  • 整体的一部分，或者文章的一节，一般来说section也会带有标题
<aside>
  • 侧边栏（与article并列存在）或者嵌入内容（在article内），通常认为是独立拆分出来而不受整体影响的一部分，作为主要内容的附属信息，如索引，词条列表，或者页面及站点的附属信息，如广告，作者资料介绍等
<footer>
  • 页脚，通常包含作者、版权信息或者相关链接等；
<article>
  • 定义文档中可以脱离其他部分，一份独立的内容，通常带有标题，当article内嵌article时，里外层的内容应该是相关的，比如一篇微博和它的评论；

个人

复选框

  <input type="checkbox"/>first
  <input type="checkbox"/>second
如果用这种写法只能点击前面的小方块才能选上

image.png

<label>
        <input type="checkbox" id="chox1-pro" value="first"/>first
</label>
<label>
    <input type="checkbox" id="chox2-pro" value="second"/>second
</label>
用这种写法用户点击整个文字也能选上，体验更好

download属性

可以使用download链接中的属性来下载文件，而不是导航到该文件。

<a href='path/to/file' download>
    Download
</a>          
avatar
文章
阅读
粉丝