页面设计以谷歌浏览器的bink内核为主流使用。

 

　　一个页面的主要组成由结构（html5）表现（css）行为（JavaScript）组成，

 

　　今天学习的是以标签和路径为主的html5的内容。

 

　　lang语言：作用于提示浏览器编译  charset字符：用UTF-8为全球通用准没错。

 

　　骨架标签：html，head，title，body（head与body同级关系，head与title父子关系）

 

　　排版标签：h1-6类似目录分级，br换行，p段落，hr单行线，div和span没有明确意义，但是一个是一行一个一个是一行多个以后会经常使用文本格式标签：strong加粗，em斜体，del删除线，ins下划线。

 

　　图片标签：正常img后必须是src=链接，用来获取图片。属性有title显示内容，height与width宽高，alt无法显示显示备注，border图片边框宽度。

 

　　链接标签：a标签后必跟herf=“x”，其中x可以引用外部的链接或者内部链接，内部链接可以分为绝对路径与相对路径。上级路径表达下级路劲表达/，这个上下级是相对的。

 

　　a标签也可用于描点定位，在h1-6的标题标签里加入id之后，href=可以转跳。

 

　　base标签：此标签作用在head里面，告知body内容里面的标签应该全体获得base里的属性预格式化与特殊字符：pre标签可以方便的将汉字排版转换为显示效果，但是不利于排版与操作一般不使用。

 

　　特殊字符是&+单词可以代替部分符号，但是在编译时不会编译这些特殊字符符号，在显示部分内容时可以优化代码。

 

　　主要学习的是表格，表单与列表

 

　　表格是用来显示数据内容的，tabel为表格整体，tr为表格行（没有列的概念），td为行里面的小格子，使用th是可以自动居中和加粗的表头。

 

　　需要添加表格标题可以使用caption。正常显示出表格轮廓经常用到boeder=1和cellspacing=0，width与height显示出表格大小，align选取位置。

 

　　为了以后css更方便的美化表格，可以自己分成thead，tbody，tfood的组成方式。

 

　　需要合并表格时使用colspan与rowspan，两者同时使用可以类似“田”字效果。

 

　　表单是用来收集用户内容的，在与后台交流数据时使用form来让表单成为一个整体去提交。

 

　　最常用的是input，在填写每一个input的时候请务必添加name方便后台认知其作用。

 

　　input里面的type决定input的类型，text为文本，password为密码，radio是同name只能选一个，checkbox则是同name可以选多个，button为默认按钮，还有submit的提交和reset的重置。imge插入图片，file选择文件。

 

　　value可以让text文本里面自己显示出想要的文字，但是每次点上去需要自己删除才能再去输入，和我们正常情况不一样后面应该会学到。checked是默认选择。label为了让用户体验提升可以让鼠标的判定范围更大。

 

　　testarea主要和input里面text区别在于输入内容容量，学习css之后更方便的美观testarea。

 

　　select是选择器，通过option来决定选择的内容，默认选择也可以写入selected。

 

　　在使用时表格和表单经常是一起使用的，表格的表现方式可以让数据更明确，表单则是需要收集数据的功能。

 

　　列表感觉视频讲解的最少但是实际用起来应该是最多的，无序列表ul与有序列表ol，在我的谷歌浏览器里面没有显示出圆点与数字头标，自定义列表理解为多了一层的列表可以带一个标题。

 

　　正常情况下我每次看到视频里面的综合案例我是自己先写再去看视频，最后看有啥区别的，有时候会有部分不一样。

 

　　1. ——

 

　　属于选择器的一类，在2种元素有相同的父级元素时，element1——element2的选择，定义为

 

　　element1 之后出现的所有 element2的元素全部选中更改样式属性

 

　　2. 伪元素选择器

 

　　del::selection：当你的鼠标滑过时选择的内容中的属性

 

　　del::first-lette：一段文字中的第一个单词

 

　　del::first-line：一段文字中的第一个段落

 

　　。class::before与。class::after：默认的是行内元素，在一个元素之前和之后添加的内容

 

　　3. 伪类选择器

 

　　first-chird：选取父元素中首个子元素

 

　　last-chird：选取父元素中最后一个的样式

 

　　nth-chird（）：选取父元素中自定义的选择，（）添加2n偶数even，2n+1奇数odd，3n3的倍数

 

　　4.属性选择器

 

　　class[class^=]：所有定义过class中头部带有=之后的单词的类

 

　　Class[class$=]：所有定义过class中尾部带有=之后的单词的类

 

　　Class[class*=]：所有定义过class中带有=之后的单词的类

 

　　1. 新标签

 

　　header：定义头部

 

　　nav：定义导航栏

 

　　footer：定义尾部

 

　　article：定义文章

 

　　section：定义某一节

 

　　aside：定义内容侧边

 

　　2.新属性

 

　　Input的表单属性，比较常用的

 

　　placeholder：再点击之后直接消失预设置的词语

 

　　autofocus：自动获取焦点

 

　　button：文字可以自动居中，语意向的属性

 

　　multiple：多文件上传

 

　　required：必填，一般就是我们常遇见的*

 

　　介绍下tab栏的实现方式，利用纯css去实现点击的tab栏，最为关键的部分为首先对多选的盒子进行隐藏display：block，再去利用target（类似于hover但是这个是点击生效），再显示出来display：block。之后再利用选择器去更改点击后的样式即可。

 

　　iframe：直接引入第三方网站播放，control可以不设置也能操作

 

　　video：视频引入方式，可以设置是否循环loop，是否自动播放autoplay，重要的是control必须设置不设置不能播放，可以使用默认插件

 

　　audio：音频引入方式，可以设置是否循环loop，是否自动播放autoplay，重要的是control必须设置不设置不能播放，可以使用默认插件

 

　　实质就是在内容之前创建可一个行内快元素，给予高度与宽度可以设置文档流的位置，如果设置一个vertical-align: middle;让文字自动居中可以消除这种影响。