2020-11-17

前端学习

学习目标：

11月17日：学到
掌握知识，并能自己完成例子

学习内容：

学习时间：

1、周二下午2点至5点半
2、周二晚上8点到10点半

学习产出：

1.网页：结构（HTML），表现（CSS）|控制页面元素的样式，行为（JS）| 响应用户操作
2.标签：根标签(子标签),子标签 ,
3.注释<!-- -->（功能，作者，日期）
4.属性：设置标签中的内容，在开始标签中设置，名值对结构，多个属性用空格分开，例如<font color = " red ">第二个</font>
5.doctype：告诉浏览器网页的版本。HTML5的文档声明：<! doctype html>
有怪异模式和标准模式的区别
6.16进制数数：0~9 之后a~f 之后10~19 1a~1f
7.字符集是编码和解码的采用规则，若字符集不同则会产生乱码。常见的字符集有ASC,ISO-8859-1,GBK,GB2312,UTF-8(万国码），中文系统浏览器默认GB2312
8. 告诉浏览器网页的编码字符集，meta可以设置元数据，字符集，关键字，简介等，meta是一个自结束标签，<meta charset="utf-8"/>,ANSI以系统的语言来保存文件
9. 共有六级标题标签，重点在标签的语义，h1到h6重要性依次减弱。h1非常重要，或影响网页在搜索引擎中的排名，一般只用h1,h2,h3

1.p表示段落，各占一行，并且段落之间有间距
2.空格永远只占一位，<br/>表示换行，自结束标签
3.<hr/>生成一条水平线，自结束标签
4.一些特殊字符不可以直接使用，需要使用特殊的符号，这些符号称为实体（转义字符串）比如：< &lt; > > 空格   版权符号 ©浏览器会自动转换(w3c下载）

5.图片标签<img src="1.gif" />
src：图片的路径，目前的路径都是相对路径（即相对于当前资源所在目录的位置）<img src="DEMO/2.gif" /> 或者<img src="../2.gif" />或者<img src="../DEMO/2.gif" />(…/表示返回上一级，返回几级目录就写几个）

alt：图片的描述
在图片不能显示时，对图片的描述;
搜索引擎可以用alt来识别图片；
如果不写alt属性，则搜索引擎不会收录；
对图片的大小进行规范：width(宽度，单位px）height(高度，单位px）当宽度和高度两个属性如果只设置一个，另外一个同时等比调整大小

图片格式：
JPEG:支持颜色多，图片可以压缩，不支持透明，一般来保存照片等颜色丰富的图片
GIF：支持的颜色少，只支持简单的透明，支持动态图
PNG：支持颜色多，并且支持复杂透明，用来显示颜色复杂的透明图片
图片的使用原则：效果不一致，使用效果好的；效果一致，使用小的

6.使用meta标签可以：
设置网页的关键字<meta name="keywords" content="html5,java" />
指定网页的描述<meta name="description" content="发布h5" />
（这些内容是给搜索引擎检索用的，但不会影响排名）
请求的重定向<meta http-equiv="refresh" content="5;url="http://www.baidu.com "/>

7.xHtml语法规范：
(1)不区分大小写，一般使用小写
(2)注释不能嵌套
(3)html标签必须结构完整
(4)html标签可以嵌套，但是不能交叉嵌套
(5)html标签中的属性必须有值，且有引号

8.内联框架可以引入外部页面. src:指向一个外部页面的相对路径
(不推荐使用，因为内联框架的内容搜索引擎不能检索）

<iframe src="demo02.html"></iframe>

属性：src width height name

9.超链接可以跳转页面，<a href="相对路径或者完整地址"></a>(如果没有访问过，就是蓝色)

_self:在当前窗口打开（默认值）
_blank：新窗口打开
设置为内联框架名，链接会在内联框架中打开
10.居中：

我是一个熊猫头

完成情况：剩了一个视频没看
遇到的问题：基本解决
写了一个练习