网页制作学习日记

前端的前世今生

• 1991年,HTML诞生了,由蒂姆·伯纳斯-李创造第一个HTML标准，除去链接元素外，基本借鉴SGML.
  
• 1995年,HTML2诞生.
  
• 1996年,CSS1诞生,HTML3.2诞生,JScript诞生(JavaScript的前身).
• 1997年1月,HTML4诞生,ECMAscript1
  诞生.
  
• 1998年1月,CSS2诞生,ECMAscript2修正.
  
• 1999年12月,HTML4.01诞生,ECMAscript3.修正.
  
• 2000年,XHTML诞生.
• 2006年,CSS2.1标准化.
  
• 2009年,ECMAscript5修正.
  
• 2011年,CSS3标准化.
  
• 2014年,HTML5标准化.
  
• 2015年,ECMAscript6修正.
  

新生报到

"en">

    "UTF-8">
    "viewport" content="width=device-width, initial-scale=1.0">
    "X-UA-Compatible" content="ie=edge">
    

第一部分:HTML的结构

1. html5标准网页声明,支持html5标准的主流浏览器都认识这个声明.

2. : 根标签 ,HTML文件标签,其中是网页正文,lang是language的缩写,可以理解开发者的国际,中国开发人员就是将en改为zh-cn.之所以设置这个是因为,如果你在中国打开一个lang="en"的网页,浏览器会弹出一个是否翻译网页的窗口.有一定的优化.

3. 表示头部–脑袋瓜子里可以添加关键字 描述 加载外部的css以及js ，对于title标题还有描述都对网站优化起到一定的作用.

4. 编码格式 ,告诉给浏览器用什么方式来都这页代码. 如果没有这行代码,浏览器会解析为默认编码,也有可能会出现乱码.

5. 标题标签 ,会显示在网页标签中

6. 表示身体–网页的主体 可视化区域.

7. :视口 配置移动端的

8. :标记一些头部的信息
   例如:name=“keywords” 方便浏览器抓取信息;

""keywords" content="关键字信息">

name="description"：为搜索引擎提供参考，网页的描述信息被搜索引擎采纳后，作为搜索结果中的页面摘要显示。

"description" content="网页描述信息">

第二部分:常用标签(分为单标签和双标签)

1. <标题标签>:
   数字一直到6,有六种大小的字体型号,以
   这种形式 1-6字体越来越小
2. <设置文本颜色>: ,为想要强调,或者单纯为了好看的文字加上颜色.
3. <段落标签>:
   在这里可以输入一段文字,属于块级元素
   文字标签,span标签的作用就是在网页内容的大段文字中间标注一行或是数行文字，并给这些文字设置一些不一样的展示效果，比如：下划线，颜色

4. <列表标签>:

"square">
   
呜哈哈哈

list-style-type:none>
   
呜哈哈哈

"A">
呜哈哈哈

• 无序列表, 网页中间还有一些内容相似、结构相仿、布局接近的区域，像这一类区域我们就使用无序列表来进行区域划分;

去掉无序列表的小圆点方法: list-style-type:none

改变无序列表小圆点的样式
type=” 属性 ”小黑点:disc（默认值)；方块:square；空心圆:circle
例如:

• 有序列表网页中间还有一些内容相似、结构相仿、布局接近但是每个区域的内容是有先后关系的的区域，像这一类区域我们就使用有序列表来进行区域划分，这一类区域大多用在详细法律条文、政府公告、产品说明等内容上;(不仅仅可以由数字表示序号,也可以用字母表示.在
  中选择性地加入属性type=”A/i/I/a/1” ‘双引号中的被分号隔开的都是可用值’ 即可.分别表示不同符号表示的顺序.)
  放置于无序或者有序列表中;
  3. 也可以加入其他文本标签;

5. 定义列表,网页中间还有一些内容不完全一样、结构相仿、布局接近、每个区域的内容没有先后关系的的区域，像这一类区域我们就使用有自定义列表来进行区域划分，这一类区域大多用在专业名词条目的解释，或是网页底部信息分类等内容上, 内标签不一样

• 使文字前端对齐
• 使文字顶格显示
  
  

6. 
换行标签
   

   ---

   下划线标签
7. <粗体斜体标签>
   斜体
   加粗
8. <同样有加粗和斜体的标签,但主要功能是强调>
   
   斜体,表示强调
   更为强调并且加粗字体
   不常启用 并且他们还有搜索的功能 称SEO优化
9. <删除线标签>

删除线
删除线

10. <下划线标签>

下划线标签
下划线标签

11. <图片,视频,音频标签>

"" alt="" title="" width="" height="">

• src: 是sourse的缩写,路径写法,不能出现中文
  相对路径: 从本地文件(该代码所在文件的当前位置)出发寻找到目标文件
  ./ (当前目录)
  …/(上级目录)
  …/…/(上上级目录)类推
  绝对路径:
  从本地: D:/project/demo/pic.jpg
  从网络 :https://www.baidu.com/img/blabla.jpg
• controls=“controls”：这是视频文件的控制按钮区域.可以调为自动播放,或者播放控制的属性值.
• alt:标记图片信息,在图片无法显示的时候出现.
• title:鼠标悬停展示的内容
• width:设定图片设定宽度
  height:设定图片的高度
  同理,视频也可以设定宽高,并且可以仅定义一个属性,另一个值便会按比例缩小.

12. <链接标签>

"" target="">百度一下,你就知道

• href=“网页地址”: href是Hypertext Reference的缩写，意思是超文本引用，作用就是让我们可以点击网页的某些内容可以跳转到其他的网页上去
• target=“页面打开方式”： ‘_blank’新页面打开; _self 默认打开方式,当前页打开.

13. <引用标签>:

• 长引用标签的作用就是：在网页内容中间划分展示大段引用自古典，古籍或是名人名言的区域。
• 短引用标签