前端与HTML ｜ 青训营笔记

dz8545
246 阅读2分钟

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

什么是前端？

解决GUI人机交互问题

前端技术栈：HTML（内容），CSS（样式），JavaScript（行为）

关注点：美观，安全，体验，性能，无障碍，兼容，功能

HTML

HTML：HyperText Markup Language（超文本标记语言）

语法：

  • 标签和属性不区分大小写，推荐小写（在框架中组件标签使用大写，便于区分）
  • 空标签可以不闭合（单标签），比如input，meta
  • 属性值建议使用双引号包裹
  • 某些属性值可以省略，比如required，readonly

定义列表：dl，dt（标题），dd（值）

input的list属性，与datalist标签一起使用可以用于提示用户输入

<input list="cities"/>
<datalist id="cities">
    <option>长沙</option>
    <option>湘潭</option>
    <option>株洲</option>
</datalist>

image-20220724161753299.png

blockquote标签是长引用，其中的cite属性表示引用出自哪里

cite标签是短引用

code标签用于表示代码，如果有多行代码，在外面套个pre标签

strong标签表示强调，表现是字体加粗

em标签表示语气上重读，表现是斜体

语义化标签

HTML5新增的语义化便签：header、footer、nav、aside、figure。。。

作用：

  • 样式丢失时页面能呈现清晰的结构
  • 方便其他设备解析，(屏幕阅读器、盲人阅读器、移动设备等)，以有意义的方式来渲染网页。
  • 有利于SEO建立索引和优化
  • 便于团队开发和维护，遵循W3C标准，可以减少差异化

SEO：搜索引擎优化

lang属性表示内容所使用的语言，浏览器进行页面翻译时，可以准确了解到该页面使用的语言

使用HTML的各方：

  • 开发者：修改，维护页面
  • 浏览器：展示页面
  • 搜索引擎：提取关键字，排序
  • 屏幕阅读器：给盲人读页面内容

补充：

行内元素和块级元素

MDN定义：

行内元素：个行内元素只占据它对应标签的边框所包含的空间。

块级元素：块级元素占据其父元素（容器）的整个水平空间，垂直空间等于其内容高度，因此创建了一个“块”。

区别：

行内元素宽高由内容撑开，块级元素默认高度为父元素宽度，高由内容撑开

块级元素可以设置宽高（仍独占一行），行元素不行（除了img）

行内元素margin-top和margin-bottom无效

块级元素独占一行，多个行内元素可以放在一行

块级元素内可以放其他块级元素（除了p元素，p元素里的块级元素在渲染时会拿出来，与p元素同级）、行内元素和文本元素等等，行内元素（不包括单文本便签）只能放文本元素和其他行内元素

常见元素：

行内元素：a，button，input，img，label，area，select，span。。。

块级元素：div，h1-h6，p，ul，li，ol，table，header，footer，form。。。

avatar
文章
阅读
粉丝