前端学习第三次-HTML标签说明、网页结构、CSS概述

1.input标签

注意：

input标签，type属性的品种是很多的，有些input属性是针对某种type专用的。例如，type为radio，checkbox时，有个checked属性，只针对他们使用 ，其他type并不能使用。

placeholer属性：

可实现如右图的效果，在输入域中显示提示

maxlength属性

限制只能输入的最大长度

readonly属性

设置为只读类型，不能够更改

2.label标签

设置for属性等于某input标签id后，实现点击label聚焦输入框

3.select标签

required属性

提交前必须选择一个属性，其值就是required，主要针对样式表
样式表如下设置 输入中加入required属性

当存在输入不合法的值时（这里违反required），就会产生红色边框

未输入前：                                                                                                           输入后：

size属性

可通过size属性实现显示多行

4.表单提交

url和uri

url (网址),  universal resource location (全球资源定位符)，url是uri的子集
uri        universal resource identication，能在全球位置定位唯一的（范围广泛，如gps add，qq号，url等）

Get提交和post提交的差异

method方法默认提交方式为get方式
1） get提交的数据有限，因为get提交保存信息在url串上，url串长度一般不能超过256个字符，所以如果提交大量文本数据，则无法做到。
2） get提交虽然无法提交大数据，但成本低，速度快！
3） post提交，数据将保存在一个内部对象中，发往目的地，而不再出现在URL串上，能提交大数据，具有良好的保密性。 但post提交要造额外对象，成本较高，如无必要，或提交内容较少，尽量考虑get提交。 在这里，强调一点，中文尽量不要用get提交，因为中文要转码，URL上不能直接出现中文。
4)  get提交安全性不足，容易被人截获，尤其包含密码等内容。

5.网页结构 

网页结构是一颗倒置树，有些标签只能做枝干，不能做叶子(block element块内标签)
如<table></table>标签，只能作为枝干，不能作为叶子，还有<ul></ul>,<select/>等


还有一些标签，只能作为叶子(inline element行内标签)
如<b></b>，<br>

6.div标签

div标签特点
(1)非常灵活，既能做枝干，又能做叶子。
(2)div标签浏览器兼容性好
(3)div标签外观渲染很简单，成本低，大量使用div标签也不会造成大的系统负担。
所以现代网页开发经常使用div标签嵌套来做网页内容结构安排，然后外观处理就直接交给CSS处理。

7.CSS (Casading Style Sheet)

级联/层叠样式表 (Casading Style Sheet)
MIME类型：浏览器通过该类型信息，以掌握这些数据的理解方式，详细见第一次笔记，附带第一次笔记截图
 
告知系统这是样式表类型，然后系统调用样式表解析引擎去解析这个样式表

a. 为什么要使用CSS ?

     在传统网页编程中，用于控制内容显示的标签和正文标签相混合，使程序员对网页代码的阅读产生阻力，更多的查看影响显示效果的代码，而不能突出内容代码，导致网页代码不清晰。如果遇到显示风格的修改，将修改大量的页面数据。
使用样式表的优点：
          a.内容和显示相分离，容易进行代码阅读，降低开发强度，有利于分工协作。
          b.实现了类似函数的效果，可集中修改
          c.容易实现分享，css文件可以跨网页分享。
          d.降低网络流量，提高网站负载。
          e.提高渲染速度
          f. 可以提供更多的显示控制能力。
可以使用<link>标签进行跨网页的分享

阴影属性

例如在样式设置div{}可设置阴影其中2px和2px和3px是阴影偏移量。第一个2px是坐标右向，第二个是纵向。