前端技术学习

一、语义化
- 1. 为什么要使用语义化
- 2. 语义化标签
- - （1）容器标签
  - - artical
    - section
    - div
  - （2）关于页面的标签
  - - nav
    - aside
    - header
    - main
    - footer
  - （3）表单（Forms）
  - - input
    - email
    - password
    - numbers
    - Hidden field
    - submit
    - 表单验证
    - upload file
    - button
    - Radio buttons
    - Checkboxes
    - Date and time
    - 。。。
  - （4）Select
  - （5）Tables
  - （6）Multimedia tags
  - - audio
    - video
  - （7）Iframs
  - （8）Figures
  - （9）Picture
  - （10）其他

一、语义化

1. 为什么要使用语义化

有利于构建响应式站点
更易查找、测试、调试
提高代码的可维护性
带来性能的提升：当你一个元素只有一个类名的时候，你的整个 HTML 代码体积都会更小

2. 语义化标签

（1）容器标签

artical

article标记标识一个可以独立于页面中其他内容的内容，比如一个博客：

<div><article><h2>A blog post</h2><a ...>Read more</a></article><article><h2>Another blog post</h2><a ...>Read more</a></article>
</div>

在一个article标签中应该有标题标签（h1-h6）。

section

表示文档的一节。每个节都应该有一个标题标签（h1-h6）。但不可以用作通用的容器，因为我们有div了。

<section><h2>A section of the page</h2><p>...</p><img ...>
</section>

div

看作一个容器，想必不用多说了。

（2）关于页面的标签

nav

此标记用于创建定义页面导航的标记，经常在里面放入 ol 和 ul。

<nav><ol><li><a href="/">Home</a></li><li><a href="/blog">Blog</a></li></ol>
</nav>

aside

aside标签用于添加与主内容相关的内容。例如侧边栏。

header

header表示作为简介的页面的一部分。例如，它可以包含一个或多个标题标记（h1-h6）、文章的标记行、图像。

main

页面的主要部分

footer

页脚

（3）表单（Forms）

<form action="/new-contact" method="POST">...
</form>

input

<input type="text" name="username" placeholder="username">

email

password

numbers

只接受数字

<input type="number" name="a-number"  min="10" max="50" step="5">

Hidden field

通常用来存放CSRF token用于安全或身份认证、标识表单等

<input type="hidden" name="some-hidden-field" value="some-value">

submit

表单验证

<input type="text" name="username" required>

upload file

支持从将本地文件提交至服务器
multiple 支持多个文件
accept 指定文件类型： accept=".jpg, .jpeg, .png" 或 accept=“image/*”

<input type="file" name="secret-documents" multiple accept="image/*">

button

与submit不同，比如可以实现重置等操作

Radio buttons

Checkboxes

Date and time

。。。

（4）Select

（5）Tables

colspan ：合并row；rowspan合并列

<table><thead><tr><th></th><th>Column 2</th><th>Column 3</th></tr></thead><tbody><tr><th>Row 1</th><td>Col 2</td><td>Col 3</td></tr><tr><th>Row 2</th><td>Col 2</td><td>Col 3</td></tr></tbody><tfoot><tr><td></td><td>Footer of Col 1</td><td>Footer of Col 2</td></tr></tfoot>
</table>

（6）Multimedia tags

audio

control为内置控件，设置autoplay自动播放，设置loop视频播放完毕自动重头播放。
相关事件：

play： when the file starts playing
pause： when the audio playing was paused
playing： when the audio is resumed from a pause
ended： when the end of the audio file was reached

<audio src="file.mp3" control autoplay loop>

video

与audio类似。

（7）Iframs

<iframe src="page.html"></iframe>
<iframe src="https://site.com/page.html"></iframe>

（8）Figures

figure标签通常与img标签一同使用

<figure><img src="dog.png"alt="A nice dog"><figcaption>A nice dog</figcaption>
</figure>

srcset属性设置根据像素密度或窗口宽度设置浏览器来使用响应图像。通过这种方式，它只能下载呈现页面所需的资源，例如，如果它在移动设备上，则无需下载更大的图像。其中w用来标定浏览器的宽度。
sizes可以根据浏览器视口大小响应图片大小，如果窗口大小小于500px，它将以窗口大小的100%渲染图像。如果窗口大于500px且小于900px，则以窗口大小的50%渲染图像。如果更大，图片大小为800px。

<img src="dog.png"alt="A picture of a dog"sizes="(max-width: 500px) 100vw, (max-width: 900px) 50vw, 800px"srcset="dog-500.png 500w,dog-800.png 800w,dog-1000.png 1000w,dog-1400.png 1400w">

（9）Picture

<picture><source media="(min-width: 500w)" srcset="dog-500.png" sizes="100vw"><source media="(min-width: 800w)" srcset="dog-800.png" sizes="100vw"><source media="(min-width: 1000w)" srcset="dog-1000.png"    sizes="800px"><source media="(min-width: 1400w)" srcset="dog-1400.png"    sizes="800px"><img src="dog.png" alt="A dog image">
</picture>

（10）其他

tabindex属性允许您更改按Tab键选择“可选”元素的顺序。默认情况下，通过使用Tab键进行导航，只有链接和表单元素是“可选择的”（您不需要在它们上设置tabindex）。
使用tabindex=“-1”将从基于选项卡的导航中删除一个元素。
span 是一个内联的（inline）无语义元素，最好只用于无法找到更好的语义元素来包含内容时，或者不想增加特定的含义时。

前端技术学习：语义化相关推荐

2015.12.08-2015.12.11 硕士毕业大论文前端技术学习
毕业大论文:本周完成第二章:异步电机故障诊断机理分析第二章基于HHT的电机故障特征提取前端技术学习:完成书本第10章 DOM 12.08 异步电机故障诊断机理分析&DOM10.1.1 ...
前端技术学习记录：react+dvajs+ant design实现暴走计算器的页面重构（二）
前端技术学习记录:react+dvajs+ant design实现暴走计算器的页面重构(二) 前言定义 Model connect 起来更新state 拥抱变化主题切换更换页面获取当前设备类 ...
前端面试—html语义化
html最常见的问题:语义化的HTML结构怎么理解? 前天面试对于这个问题我是这么答的: html语义化就是让页面的内容结构化. 1.在没有样式CCS情况下也以一种文档格式显示,并且是容易阅读的. 2 ...
前端技术学习记录：react+dvajs+ant design实现暴走计算器的页面重构（一）
前端技术学习记录:react+dvajs+ant design实现暴走计算器的页面重构(一) 前言现在的效果安装 dva-cli 创建新应用预览项目文件结构简单介绍使用 antd做页面定义 ...
Web前端技术学习路线图初阶+中阶+高阶
一.报告名称前端技术学习路线图二.作者阿里前端委员会:孟令君 | 舒文亮 | 许智燕 | 赵兴越 | 王忆天 | 吴天豪 | 潘佳 | 包续兵 | 张伟 | 王卓 | 金擘 | 周祺 | 张舒迪 ...
有关WEB前端中的语义化
作天在变卖大学书籍时也不晓得怎么的就想起语义化这个概念,于是乎也就花点时间搞搞它.语义化标记对于刚学web前端脚本语言的童鞋来说往往都没太在意,哇哈哈,其实我也就算只比较老的菜鸟而已,本文不是说教, ...
Java前端技术学习
一.Html和CSS的关系学习web前端开发基础技术需要掌握:HTML.CSS.JavaScript语言 1. HTML是网页内容的载体.内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文 ...
前端技术学习路线及技术汇总
第一阶段网页开发基础首先从以下几个方面了解web: 一.Web的概述 1.万维网的发展 2.浏览器与服务器 3.网页与网站 4.域名与主机 5.HTTP协议 6.W3C标准需要了解的核心是:浏览器 ...
前端技术学习之选择器（一）
2019独角兽企业重金招聘Python工程师标准>>> 一. 属性选择器属性选择器就是根据元素的属性及属性值来选择元素 1,只根据属性选择元素适用于希望选择有某个属性的元素,只关 ...

前端技术学习：语义化