前端学习入门笔记 （ html5-1）

前端学习（HTML - CSS - Javascrpt - jQuery - ve）

快速回忆前端学习过程中的各项知识点，有助于梳理学习框架。

网页简介：网页由三个部分构成，对应于结构（HTML）+表现（CSS）+行为（js）

HTML：1.超文本标记语言。2：负责网页中三个要素之中的结构。3：HTML使用标签的形式来识别网页中不同的组成部分。4：锁为超文本就是超链接，使用链接可以让我们从一个也米娜跳转到另一个页面。

具体内容

★：实体：在网页编写中的多个空格默认情况会被浏览器解析为一个空格。HTML中，不能够直接书写一些特殊的符号。比如，多个连续的空格，比如字母两侧的大于和小于符号。如果我们需要在网页中书写这些特殊的符号，则需要使用html中的实体（转义字符），实体的语法：

&实体的名字：

&nbsp：空格

&gt：大于

&lt：小于。

W3C网站（实体符号参考手册）

meta：meta主要表示设置网页中的一些元数据。元数据不是给用户看

　　样式<meta name ="keywaords" content="HTML">

　　charset 指定网页的字符集：

　　name：指定数据的名称

　　content:指定数据的类容

　　keywords表示网站的关键字，可以同时指定多个关键字，关键字的使用，隔开

　　description用于指定网站的描述。

　　title标签的内容会最为搜索结构的超链接上的文字显示

块元素和行内元素的区别

　　块元素（block element）在网页中一般通过块元素对页面进行布局 

　　行内元素（inLine element）行内元素只要原来包裹文字

　　一般情况下可以在块元素中放行类元素（反之则不）

　　一般情况p不放块元素，通常的块元素中可以放一切元素（p除外）

　　浏览器会自动对行码进行修正

 

语义化标签：

在进行html语义化编写的时候 首先关注的是他的标签的语义，而不是它的样式。

　　

　　形式<p>

　　在网页中html专门用来负责网页的结构

　　标题标签（h1~h6）一共由六级标题

　　h1~h6重要性递减，h1最重要，h6最不重要。  h标签在一般仅次于title标签

　　p标签表示页面中的一个段落

　　p也是一个块元素

 

　　em标签用于表示语音语调的一个加重

　　strong表示强调重要内容

　　blockquote表示一个长引用

　　q表示一个短引用

　　br标签表示页面中的换行

　　header 表示王爷的头部

　　main 表示网页的主体部分

　　footer表示网页的底部

　　nav表示网页中的导航

　　aside和主体相关的其他内容

　　article表示一个独立文章

　　section表示一个独立的区块，上边的标签不能表示时使用section

　　

　　使用最多的区块标签为div div目前还是主要的布局标签

 

列表：

　　有序列表

　　无序列表

　　定义列表

有序列表：使用OL标签来创建有序列表，使用Li表示列表项

无序列表：使用ul标签来创建无序列表，使用Li表示列表项

定义列表: 使用dl标签来创建一个定义列表

　　使用dt来表示定义的类容

　　使用dd来对内容进行说明

列表之间可以互相嵌套

 

超链接：

　　超链接可以让我们从一个页面跳转到另一个页面，或者时当前页面的额其他位置

　　使用a标签来定义超链接

　　　　属性：

　　　　　　href 指定跳转的目标路径

　　　　　　　　值可以是一个外部网站的地址

　　　　　　　　也可以写一个内部页面的地址

　　超链接也是一个行内元素，在a标签阿忠可以仙桃除它自身外的任何元素

　　形式：<a href = "https://www.baidu.com">超链接</a>；

　　　　超链接的其他属性

　　　　target属性：用来指定超链接的打开位置

　　　　可选项：_self默认值  在当前页面中打开超链接

　　　　　　　　_blank 在一个新的页面中打开超链接

 

　　　　可以直接把超链接的href属性设置为# 这样调集超链接以后页面不会发生跳转，二十当前页面的顶部位置。

　　　　可以转到页面的指定位置，只需将href的属性设置#目标元素的id属性值

　　　　id属性（唯一不重复）

　　　　　　每一个标签都可以加一个id属性

　　　　　　id属性就是元素的唯一表示，同一个页面中不能出现相同的id属性

　　　　超链接占位符：javascript：；、

 

图片标签：

　　图片标签用于像当前页面中引入一个外部图像

　　样式：<image src="./img/1.gif" alt ="松鼠">

　　　　　<image witdh = "200" src="https://baidu.com">

　　属性：src指定的是外部图片的路径（路径和超链接是一样的）

　　　　　alt：图片的描述，这个描述默认情况下不会显示。

　　　　　width：图片的高度：宽度和高度只修改了一个，则另一个比例会缩放

图片的格式：

jpg png gif webq base64

 

内联框架（不会被搜索引擎检索）

　　　　用于向当前页面中引入一个其他页面

　　　　src指定要引入网页的路径

　　　　frameborder指定内联框架的边框

 

音视频播放：

　　　　音频

　　　　audio标签用来像页面中引入一个外部的音频文件。音频文件中在引入是，默认情况下不允许用户自己控制播放停止

　　　　属性

　　　　controls  是否运行用户控制播放

　　　　autoplay 音频文件是否自动播放  目前来讲大部分浏览器基于用户体验的考虑在用户首次登陆时不会允许音乐自动播放。

　　　　loop  音乐是否循环播放

 

　　<audio src=""http//:baidu.com" controls autoplay loop>

　　★：除了用src来指定外部文件的路劲以为外，还可以使用source来指导文件

　　eg：<audio controls>

　　　　<source src="http//:baidu">

　　　　视频：

　　　　使用vedio标签来向王爷中引入一个视频，其使用方式和audio基本一样

　　注：对于ie8及更低版本的浏览器，可以选择使用embed标签

　　　　示例：<embed src="http//:baidu.com" type="video/mp4">