HTML、CSS课堂笔记

HTML的一些介绍与语法

一。介绍:

     1.HTML编程语言是一种专门在浏览器编译与执行的编程语言
	 2.HTML编程语言学称是 超文本标记式编程语言 

		int a =10; //命令行书写方式
		<tr>

二。作用：

		作用一：HTML编程语言通知浏览器将接收的数据以指定方式在窗口展示 [前端工程师]

		作用二：控制浏览器请求行为[前端工程师/服务端工程师] 【重点】

三。HTML编程语言语法规范:

		1.HTML编程语言中所有命令都是声明在标签中,比如<br>
		2.HTML编程语言中所有命令都是预先定义好，不允许开发人员自行创建新的命令
		3.HTML编程语言中所有命令不区分英文字母大小写，比如<BR> <br> <Br> 都是合法命令
		4.HTML编程语言中命令开发时主要通过对命令中属性进行赋值实现开发目的。
		属性赋值时内容可以包含一个""中，也可以包含在'',也可以省略双引号与单引号，此时
		属性之间必须采用空格进行隔离
			<input type="text" name="one"/>
			<input type='text' name='one'/>
			<input type=text name=one/>
		5.HTML编程语言中命令根据书写方式分为：双目标签命令与单目标签命令
		6.双目标签命令书写命令分别出现在开始标签与结束标签，比如 <tr></tr>
		  双目标签命令在书写时结束标签是不能省略的,比如<tr>,由于没有书写结束标签因此是一个非法命令
		7.单目标签命令书写命令出现一个标签之内，比如：<br/>
		  单目标签命令用于表示结束"/"可以省略不写，比如 <br/>, <br> 这两个都是合法单目标签命令

作为服务端工程师必须掌握的知识点

浏览器发送请求三要素:

		1.控制浏览器发送请求地址
		2.控制浏览器发送请求采用请求方式
		3.控制浏览器发送请求携带请求参数

---

控制浏览器发送请求地址

（<a href="www.baidu.com">...</a>

<form action="www.baidu.com">...</f

1.超链接标签命令:<a>...</a>

		1)格式:  <a href="请求地址">提示信息</a>

		2)工作原理:  超链接标签命令不会被浏览器自动执行。
                 在用户使用鼠标单击超链接标签命令时，
		 此时这个命令才会执行，执行要求浏览器
		 立刻按照href属性地址发送请求

2.表单标签命令…

			1)格式:
					<form action="请求地址">
						<input type="submit"><!--提交按钮-->
					</form>

			2)工作原理:
                  表单标签命令不会被浏览器自动执行。
				  在用户单击提交按钮时，此时表单标签命令
				  被触发执行。执行时要求浏览器立刻按照
				  action属性地址发送请求

---

控制浏览器发送请求采用请求方式(GET POST)

  1.请求方式：决定浏览器在发送请求时行为特征
   
  2.浏览器可以选择请求方式：7种，目前为止只考虑【POST请求方式】和【GET请求方式】

  3.GET请求方式:（资源小，相对不安全，有缓存）

                1) 要求浏览器发送请求时，携带的【请求参数数量】不能超过4K
				2) 要求浏览器发送请求时，必须在浏览器地址栏上将【请求参数信息】展示出来
				3) 要求浏览器发送请求时，必须将请求参数信息保存在Http请求协议包中【请求头】
				4) 要求浏览器在接收到服务器返回的资源文件内容后，必须将资源文件内容保存在浏览器的缓存

  4.POST请求方式：（资源大，相对安全、无缓存）
                1）要求浏览器发送请求时，可以携带任意数量的【请求参数】
                2）要求浏览器发送请求时，必须在浏览器地址栏上隐藏请求参数信息
				3）要求浏览器发送请求时，必须将请求参数信息保存在Http请求协议包中【请求体】
				4）禁止浏览器将服务器返回资源文件内容进行保存【阅后即焚】

  5.控制浏览器发送请求时采用GET请求方式

                1.超链接标签命令在执行时，要求浏览器必须采用GET方式发送请求

				2.表单标签存在一个method属性，通过这个属性可以要求浏览器采用对应请求方式发送请求

					       <form action="请求地址" method="get">
					       <form action="请求地址" method="post">
						   
						method属性默认值是GET
							<form action="请求地址">---->浏览器以GET方式发送请求

  6.控制浏览器发送请求时采用POST请求方式

                   <form method="post"></form>

  7.请求方式适用场景【面试】

          1.考虑到POST请求方式，用户可以将【病毒文件内容】发送到服务器上进行攻击。
		  因此绝大多数门户级网站拒绝接收POST请求，日常开发过程绝大多数请求都是GET

          2.在某些特殊场景下必须使用POST
			  1)文件上传，必须使用POST
			  2)发起登录验证请求，必须使用POST
			  3)索要服务器中实时变化数据时（股票价格，车票数量。。。），必须采用POST

控制浏览器发送请求携带请求参数

（?n1=100&n2=200 ---->请求参数）

   1.请求参数作用:

            比如用户通过浏览器访问服务端计算机动态资源文件Student.class
			
			   class Student{
			   
					public int add(int n1,int n2){
						//请求处理
					  int sum =  n1 + n2;
					  return sum;
					}
				}
				
	       Http服务器：
	       Student stu = new Student();
	       stu.add(?,?)//add方法运行时需要实参，需要由用户通过浏览器以请求参数方式提供

	       浏览器发送请求时需要携带调用方法需要实参（请求参数）
	       http://www.baidu.com?n1=100&n2=200  [n1=100&n2=200]就是浏览器发送请求参数

   2.请求参数格式

               浏览器发送请求时  请求地址?请求参数名1=值1&请求参数名2=值2

   3.浏览器发送请求时携带的请求参数来源:

			   1).通过超链接标签命令指定请求参数
			   2).通过表单域标签命令指定请求参数

   4.通过超链接标签命令指定请求参数
                <a href="http://www.baidu.com?userName=mike&password=123">百度</a>

   5.表单域标签命令:

				1)一组声明在form标签内部的标签命令
				2)提示用户填写对应的【请求参数内容】，用于提供相对灵活的请求参数内容
				3)所有的表单域标签都拥有两个属性【name,value】
				  name属性声明【请求参数名】,value属性声明【请求参数内容】
				  例如：<input type="radio" name="sex" value="man"/>url显示出来sex=man
				  
                <form action="http://www.baidu.com">
					<input type="text" name="userName" value="mike"/>
					<input type="submit">
				</form>
				
				当用户单击submit后，浏览器发送请求信息 http://www.baidu.com?userName=mike

   6.表单域标签分类：

                1）<input />
				2）<select></select>下拉框
				3）<textarea></textarea>

   7.表单域标签value属性默认值

                1)大多数表单域标签value属性默认值是空字符串 userName=''
				2)对于radio与checkbox来说，value属性默认值'on'字符串

   8.表单域标签作为请求参数条件（请求参数，即url中的?...）

            对于大多数表单域标签来说，只要同时满足一下两个条件，就可以作为请求参数
				1)必须声明在form标签内部
				2)必须声明name属性

		   对于radio标签与checkbox标签来说在满足上述两个条件同时，还必须满足第三个条件才可以作为请求参数，
				3)第三个条件radio与checkbox必须在【被选中】的情况下才可以作为请求参数

		   如果表单域标签使用disabled(不可用)来修饰时，失去作为请求参数条件

		   readOnly与disabled区别：
				readOnly：要求当前标签中value属性只能看但是不能被修改，readOnly不会影响表单域
						  标签作为请求参数条件
				disabled：设置当前标签为不可用状态，此时标签中value属性内容不能被修改的.
						  disabled修饰的表单域标签是永远都不能作为请求参数

CSS的一些介绍

一。介绍：

    1.是一种专门在浏览器编译并执行的编程语言.
	2.用于定位浏览器中HTML标签并对定位的HTML标签中【样式属性】进行统一管理

二。HTML标签属性分类

     1.基本属性：
			  大多数HTML标签都拥有属性，是一个非常庞大群体
			  比如 id属性，相当于身份证编号，用于区分HTML标签
				  <input type="text" id="one"/>
				  <input type="text" id="two"/>
			  比如 name属性，相当于人名字,允许一组标签拥有相同name
				  <input type="text" id="one"  name="myText"/>
				  <input type="text" id="two"  name="myText"/>

     2.样式属性：【*****】
              是一个非常庞大群体，通知浏览器将HTML标签中数据在浏览器中以指定形态展示
				<div style="background-color:red;color:green;width:300px;height:200px"></div>

     3.工作状态属性:

			  只存在于【表单域标签】中，用于表示【表单域标签】状态.		  
				  checked:存在于radio与checkbox中，表示标签是否被选中
				  disabled:表示标签处于不可用状态
				  readOnly:表示标签处于只读状态
				  seleteced：存在option标签，表示标签是否被选中

     4.监听属性：

			  监听属性用户与HTML标签之间进行通信通道，监听属性
			  用于监听用户在何时对当前标签进行何种操作,当指定
			  操作产生时，监听属性将会通知浏览器调用对应JavaScript
			  方法处理当前请求

三。样式属性开发难度：

    1.由于网页经常出现大量的HTML标签拥有相同的样式属性设置，因此导致
  前端工程师进行大量重复性开发操作.

    2.当用户修改需求时，导致前端工程师进行大量重复维护工作

四。CSS编程语言作用：

   1.通知浏览器将所有满足定位条件的HTML标签进行统一定位
   2.通知浏览器对已经定位HTML标签中样式属性进行集中统一赋值管理

CSS选择器:

1.介绍：

		   CSS选择器，实际上就是一组定位条件用于定位HTML标签。
		   CSS选择器有9个大的分类

2.CSS选择器语法格式:

         <html>
			 <head>
				  <!--type='text/css'，-->
				  <style type="text/css">
					 定位条件{
								"样式属性1":"值1";
								"样式属性2":"值2"
						     }
				  </style>
			 
			 </head>	     
	     </html>

ID选择器:

1.介绍：

       根据HTML标签中ID属性的值进行定位

2.语法:

            <style type="text/css">
                #id编号{				
						   "样式属性1":"值1";
						   "样式属性2":"值2"
					   }
			</style>

标签类型选择器:

1.介绍:

       根据HTML标签类型进行定位

2.语法:

        <style type="text/css">
			标签类型名{
			
						"样式属性1":"值1";
						"样式属性2":"值2"
					  }
		</style>

层级选择器

1.HTML标签之间关系：

						父子关系
						兄弟关系

2.父子关系:

                     即为包含关系
				 <tr>
					<td>
						<input type="text">
					</td>
				 </tr>

		     td标签是tr标签的子标签
		     input标签是td标签的子标签

3.兄弟关系:

            一组标签拥有相同的父标签，并且彼此之间
		    没有任何包含关系，即为兄弟

				<body>
					<div>1</div>   大哥
					<p>2</p>       二哥
					<span>3</span> 三弟
				</body>

4.层级选择器介绍:

                  根据标签之间父子关系或则兄弟关系进行定位

5.简单的层级选择器

                <style type="text/css">
                        定位父标签条件  定位子标签条件{
														"样式属性1":"值1";
														"样式属性2":"值2"
													  }
				</style>

自定义选择器

1.介绍：

		   如果一组HTML标签之间没有相同的特征，但是却需要
		   对指定属性赋值相同内容，此时将自定义选择器绑定
		   到对应标签上

2.语法:

			<style type="text/css">
                         .自定义选择器名{
											color:red;
										}
			</style>

		  <div class="自定义选择器名"></div>
		  <p   class="自定义选择器名"></p>