5-26第1天学习前端的笔记
第一天复习HTML
1.浏览器内核
Trident IE的内核，Gecko 火狐内核，WebKit Safari内核，Blink 谷歌的内核。
2.开发工具
主要用Visual Studio Code，WebStorm（重量级软件）
3.HTML的各种标签
:表示下面的文档用html5规范使用。打完标签按tab可以自动加括号，Ctrl+/注释代码。
body:主体部分代码
script:放脚本代码的地方 /**/这是它的段落部分
p：段落
style:用于放样式的地方
<link rel = "stylesheet" href="style.css">
4.body内的标签
- ！+ tab 可以自动生成代码结构
- html:5 + tab 也可以
- div用来布局的，没有具体含义。
- h1,h2.....h6共六级标题
- p标签表示段落，可以用它换行
- br 换行
- hr一条水平线，单标签可以用width等标签
- a标签，超链接，target属性:_blank,_self在空白页面打开，在当前页面打开、
- img图片标签 src="文件的目的地址" alt=“没有图片显示这个”
- span标签，与div一样都是用来布局的，span不会单独占一行
- ul,ol标签，ul表示无序，ol表示有序，每一个都用li标签代表一个选项
- 注释，方便后期自己看得懂。
5.属性（格式： 属性名=“属性值”）
1.target属性:_blank,_self在空白页面打开，在当前页面打开
2.起附加说明的作用，不是所有标签都有属性。
6.转义符
1.html种代码中多个空格只显示一个空格。
7.HTML块级元素和行内元素、
1.块级元素可以独占一行，宽度和高度可控，如果没有设置宽度则默认铺满整行。中间可以包括块级和行级元素。
2.行内元素（display:inline;）不会独占一行，与相邻的行级元素独占一行，直到这一行占满，
行级元素的宽度和高度不可控制(不识别他的宽高)
其内部只能包含行级元素
3.块级标签转换为行级标签
在块级标签中的样式中加上display:inline;
4.行级元素转换为块级标签
在行级标签中的样式中加上display:block;
8.w3c规则（world wide web万维网联盟，统一所有标准）
8.1块元素可以包含行级元素和某些块级元素，但是行级元素不能包含块元素，只能包含行元素（内联元素）
<span><div></div></span>这个是错误的
8.2块级元素不能放在p标签内
8.3有些特殊的块级元素不能包含块级元素
h1,h2,h3,h4,h5,h6,p,dt
8.4块级元素和块级元素并列，行级元素和行级元素并列，块级元素和行级元素不能并列。
<div><h2></h2><span></span></div>这样是错的
9.语义化标签
9.1.使用语义化标签的作用
更容易被搜索引擎收录
更容易被屏幕阅读器读出网页内容
能够更好的体现网页注意
兼容性好，支持更多的网络设备
9.4语义化标签种类
<title>：页面主体内容。
<hn>：h1~h6，分级标题，<h1> 与 <title> 协调有利于搜索引擎优化。
<ul>：无序列表。
<li>：有序列表。
<header>：页眉通常包括网站标志、主导航、全站链接以及搜索框。
<nav>：标记导航，仅对文档中重要的链接群使用。
<main>：页面主要内容，一个页面只能使用一次。如果是web应用，则包围其主要功能。
<article>：定义外部的内容，其中的内容独立于文档的其余部分。
<section>：定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
<aside>：定义其所处内容之外的内容。如侧栏、文章的一组链接、广告、友情链接、相关产品列表等。
<footer>：页脚，只有当父级是body时，才是整个页面的页脚。
<small>：呈现小号字体效果，指定细则，输入免责声明、注解、署名、版权。
<strong>：和 em 标签一样，用于强调文本，但它强调的程度更强一些。
<em>：将其中的文本表示为强调的内容，表现为斜体。
<mark>：使用黄色突出显示部分文本。
<figure>：规定独立的流内容（图像、图表、照片、代码等等）（默认有40px左右margin）。
<figcaption>：定义 figure 元素的标题，应该被置于 figure 元素的第一个或最后一个子元素的位置。
<cite>：表示所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。
<blockquoto>：定义块引用，块引用拥有它们自己的空间。
<q>：短的引述（跨浏览器问题，尽量避免使用）。
<time>：datetime属性遵循特定格式，如果忽略此属性，文本内容必须是合法的日期或者时间格式。
<abbr>：简称或缩写。
<dfn>：定义术语元素，与定义必须紧挨着，可以在描述列表dl元素中使用。
<address>：作者、相关人士或组织的联系信息（电子邮件地址、指向联系信息页的链接）。
<del>：移除的内容。
<ins>：添加的内容。
<code>：标记代码。
<meter>：定义已知范围或分数值内的标量测量。（Internet Explorer 不支持 meter 标签）
<progress>：定义运行中的进度（进程）。
10.文件命名规范
和java命名规范差不多
首页：index.html 产品页：product.html 订单order.html 公司介绍about.html 新闻列表news.html 新闻详情页new_details.html 联系我们contact.html
由结构：html,表现css,行为JavaScript
1.定义语言的编码charset="utf-8"
1.顶替语言规范
<meta charset="utf-8>
2.javascrpt定义
<script language="javascrpt" type="text/javascrpt">
脚本代码位置
</script>
3.css顶柜
<style type="text/css">
样式设置。。。
</style>
为了把配置各个浏览器的兼容性，在写css时请带上计量单位
4.不要再注释中写--符号
<!--注释中不能用--，这样不符合规范 -->
5.所有标签和属性的名字都必须小写
6.所有属性值都必须用双引号括起来
7.输出>,<和&使用转义符去写
8.要给所有的属性赋值，如果不赋值，默认的值时属性名本身。
<img src="...." alt=".要复制."/>
9.所有标签（单/双）都必须要闭合！
10.所有的标签都必须合理嵌套，不能出现交叉情况(行扩大/列扩大)
11.图片要添加有意义的alt属性，增加用户的体验
12.再form表单添加以下lable标签，以增加用户的体验价值
