HTMLday02（表单）、CSSday01（语法，选择器）
HTML表单
<form action=”请求服务器路径” method=”get|post”> 表单元素 </form>
action:代表服务器的请求路径
method:提交的方式
get：安全性较差，会在url路径后以?形式显示出所以提交数据内容，每一个数据中间使用&进行分隔。如果以中文形式提交，则会以Base64算法进行加密，例如?username=%E5%BC%A0%E6%B3%BD%E6%96%87。除此之外，作为get提交方式，他的传输大小会受到浏览器以及对应的服务器的限制。因此不能够在登录、注册、上传等场景中使用。但是其传输速度要快于post，因此其它非安全性场景，首选get请求。
post：安全性相对于get要高，不会在url路径中显示出提交的参数。在文件上传时，传输容量没有限制。经常用于登录、注册、上传等场景中。
enctype：传输类型：
application/x-www-form-urlencoded：以文本形式进行数据提交
multipart/form-data:以二进制形式进行提交
表单元素
文本框：
密码框:
单选框:
复选框:
下拉列表:
按钮：
<button></button>
<input type=”submit” value=”按钮名称” />
多行文本域:
文件域：
邮箱:
网址:
数字:
滑块:
搜索框:
隐藏域：
只读：
禁用：
css
css概念
CSS（Cascading Style Sheet），级联样式表
语法
行内样式
直接用”style=样式”定义某个元素的样式。
内部样式
写在”<head></head>”中间，通常情况是作用于本页中多个内容使用，但是其他页面很少使用的一些样式。
外部样式
外部链接形式，通过link进行引入。
- 需要定义一个css文件，并且放置在css文件夹(style文件夹)
- 通过link或者是@import导入
<!-- link --> <link href="css/style.css" type="text/css" rel="stylesheet" /> <!-- @Import--> @Import(css2.1标准引入形式)导入式
<style type=”text/css”> <!— @import url(“css路径”) --> </style>
导入式和链接式的区别：
<link/>标签属于XHTML，@import是属于CSS2.1
使用<link/>链接的CSS文件先加载到网页当中，再进行编译显示
使用@import导入的CSS文件，客户端显示HTML结构，再把CSS文件加载到网页当中
@import是属于CSS2.1特有的，对不兼容CSS2.1的浏览器是无效的
选择器
标签选择器
是以标签名称命名来进行css的设置，该方式会将所有的标签全部应用统一样式。
类选择器
是以”.”的形式进行命名，在使用时，在标签上加入”class=’类名称’”来进行引用，由于在页面中可以多次重复使用，所以使用率较高。
ID选择器
是以”#”的形式进行命名，在使用时，在标签上加入”id=’类名称’”来进行引用，由于在页面中仅能够使用一次，因此不建议大范围应用，一般用在布局的元素之上。
基本选择器优先级
ID选择器>类选择器>标签选择器
层次选择器
· 
<html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> /*后代选择器*/ /*div p{ color:blue ; }*/ /*子选择器*/ /*div>p{ color:blue ; }*/ /*相邻兄弟选择器*/ .div2+p{ color:green ; } /*通用兄弟选择器*/ /*.div1~p{ color:green ; }*/ </style> </head> <body> <div class="div1"> <p>hello</p> <div> world </div> <p>world_p</p> <p>p_world</p> <strong> <p>hello,world</p> </strong> </div> <div class="div2"> 这是div2 </div> <p> hello,p tag! </p> <p> p tag,hello! </p> </body> </html>
结构选择器
<html> <head lang="en"> <meta charset="UTF-8"> <title>使用CSS3结构伪类选择器</title> <style type="text/css"> /** 选择第一个被选择元素 */ /*li:first-child{ color:blue; } /** 选择最后一个被选择元素 */ /* li:last-child{ color:red; }*/ /*从第一个元素开始计数 找到第n个对应的子元素 包含两个关键字: even: 偶数 odd: 奇数 */ /*ul li:nth-child(odd) { color: red; }*/ /** 选择父元素内具有指定类型的第一个指定元素 */ li:first-of-type{ color: #008b8b; } /** 选择父元素内具有指定类型的最后一个指定元素 */ p:last-of-type{ color:yellow; } /** 找到指定的类型对应第几个元素 */ ul li:nth-of-type(2){ color:blue; } </style> </head> <body> <p>p1</p> <p>p2</p> <p>p3</p> <ul> <li>li1</li> <li>li2</li> <li>li3</li> <li>li4</li> <li>li5</li> <li>li6</li> </ul> </body> </html>
属性选择器
<html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> /** 只要包含id属性就会被选择 */ a[id] { } /** id属性的值必须是a1 */ a[id=a1]{ color:blue; } input[class]{ width:155px; height: 30px; text-indent: 5px; border:1px dashed gray; line-height: 30px; color:gray; } /** href中的开头部分必须是http */ /*a[href^=http]{ color:red; }*/ /** href中的结尾部分必须是com */ /*a[href$=com]{ color:yellow; }*/ /** 只要href中包含了http就可以 */ a[href*=http]{ color:red; } </style> </head> <body> <div> <input type="text" name="username" id="username" class/> <br /> <input type="password" name="password" id="password" class/> <input type="text"> <br> <a href="http://www.baidu.com" id="a1">baidu</a> <br /> <a href="https://www.sohu.com.cn">sohu</a> <br /> <a href="#">网易</a> </div> </body> </html>
