前端与html
这是我参与「第四届青训营 」笔记创作活动的的第1天****学习了第一节课《前端与html》后，学到了很多，以下就是我对我自己的学习到的知识点做好的总结
前端是什么？
前端就是使用web技术栈解决多端图形用户界面交互问题
前端技术栈
前端分为三层：html，css，JavaScript； html负责显示内容，css负责显示样式，JavaScript负责行为动作 前端通过网络协议与服务端相联系，构成基础前端技术栈。
前端应该关注哪些方面？
最基本的是功能，但安全，性能，美观，无障碍，兼容性和用户体验等方面也需要重点关注
html是什么？
html----->HyperText（超文本） Markup Language（标签语言） 超文本包括的形式不止于文本，还包括图片标题链接和表格等等。
例如
其中src代表属性名，photo.jpg为属性值
完整的html代码示范
!doctype html
决定渲染页面的模式
html
根标签，其他的标签都写在里面
head
页面的源数据，页面上需要的信息但不需要直接呈现给用户例如标题
body
需要呈现给用户的内容
在浏览器上显示效果
html语法
1.标签和属性不区分大小写，推荐小写
2.空标签可以不闭合，比如 input、meta
3.属性值推荐用双引号包裹
4.某些属性值可以省略，比如 required、readonly
使用小写便于阅读，也方便统一 属性值包裹双引号是最常用的，但有些属性值本身就含有双引号时，就必须使用单引号包裹了。例如name=‘John “ShotGun” Nelson’
标签总结
标题标签
h1~h6 由小到大的字体
列表标签
-
有序列表ol 列表每一项有li
-
无序列表ul 列表每一项有li
-
定义列表dl 列表下有dt和dd标签
dt标签为定义标题 dd标签为定义描述
用法与ol，ul与li类似 但dd和dt存在多对多的关系
链接标签
a href="url" 其中可以选择性使用target
target决定打开方式
1、target="_self"表示：将链接的画面内容，显示在目前的视窗中。(内定值) 。 即：同窗口打开。
2、target="_parent"表示：将链接的画面内容，当成文件的上一个画面。即：当前窗口打开。
3、target="_top"表示：将框架中链接的画面内容，显示在没有框架的视窗中（即除去了框架)。即：顶端打开窗口。
4、target="_blank"表示：将链接的画面内容，在新的浏览视窗中打开。即：打开新窗口。
插入多媒体时使用的标签
图片 img src="url" alt=" " width=" "
alt表示替代性的文本 width 表示图片展示多宽
声音 audio src="url" controls
controls显示浏览器默认的音频播放控件
视频 video src="url" controls
controls显示浏览器默认的视频播放控件
输入标签
input placeholder="请输入用户名"
未输入时显示属性值，输入后显示输入内容
input type="range"
滑动条显示
input type="number" min="1" max="10"
输入数字，可以设定数字区间
input type="date" min="2020-02-26"
输入日期
textarea
输入长文本
文本类标签
引用标签
blockquote cite
直接引用别人的一段话，cite用来标记引用内容的来源
cite
短引用，一般用来引用标题和章节
q
短引用，已经出现的内容，再次提到的引用
code
界面中提到的代码内容，可以使用code引起来
strong
表示很重要的内容
em
表示语气上的强调
内容整体划分
页面头部的logo导航等信息放在header
重点主要内容放在main中
一些相关内容放在aside中
参考链接，版权信息等结尾内容放在footer
html语义化
1.html中的元素，属性及属性值都拥有某些含义
2.开发者应该遵循语义来编写html
语义化的好处
- 有利于SEO，搜索引擎根据标签确定上下文和各个关键字的权重。
- 利于用户阅读，样式文件未加载时页面结构清晰。
- 利于屏幕阅读器解析，如盲人阅读器会根据语义渲染网页。
- 利于开发和维护，代码更具可读性、更易于维护。
如何做到语义化
-
了解每个标签和属性的含义
-
思考什么标签最适合描述这个内容
-
不使用可视化工具生成代码
HTML语义化就是指在使用HTML标签构建页面时，避免大篇幅的使用无语义的标签，要求尽可能的使用具有语义的标签，所以一定要清楚了解每个标签和属性的含义，要斟酌用什么标签才能最好表达内容
注意
我们在做页面时，要明白内容更为重要，传达信息要先于样式显示。
