HTML


阅读数: 次   

[toc]

一:语法规范

1.换行

HTML编程语言中所有命令都是声明在标签中,比如

2.HTML编程语言中所有命令都是预先定义好，不允许开发人员自行创建新的命令
3.HTML编程语言中所有命令不区分英文字母大小写，比如

1
<BR> <br> <Br>

都是合法命令
4.HTML编程语言中命令开发时主要通过对命令中属性进行赋值实现开发目的。
属性赋值时内容可以包含一个””中，也可以包含在’’,也可以省略双引号与单引号，此时
属性之间必须采用空格进行隔离

1
2
3
<input type="text" name="one"/>
<input type='text' name='one'/>
<input type=text name=one/>

5.HTML编程语言中命令根据书写方式分为：双目标签命令与单目标签命令
6.双目标签命令书写命令分别出现在开始标签与结束标签，比如
双目标签命令在书写时结束标签是不能省略的,比如,由于没有书写结束标签因此是一个非法命令
7.单目标签命令书写命令出现一个标签之内，比如：

单目标签命令用于表示结束”/“可以省略不写，比如
,
这两个都是合法单目标签命令

2.基本格式设置和语言设置

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
</html>

二:==知识点总汇==

1.浏览器发送请求三要素:

1
2
3
4
5
1.控制浏览器发送请求地址

2.控制浏览器发送请求采用请求方式

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

2.控制浏览器发送请求地址

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 1.超链接标签命令:
    1)格式:  <a href="请求地址">提示信息</a>
    2)工作原理:  超链接标签命令不会被浏览器自动执行。
         在用户使用鼠标单击超链接标签命令时，
		 此时这个命令才会执行，执行要求浏览器
		 立刻按照href属性地址发送请求
2.表单标签命令
1)格式:
   <form action="请求地址">
		<input type="submit"><!--提交按钮-->
   </form>

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

3.控制浏览器发送请求采用请求方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
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

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

1.请求参数作用:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
比如用户通过浏览器访问服务端计算机动态资源文件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=值1&请求参数名2=值2

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

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

4.通过超链接标签命令指定请求参数

1
<a href="http://www.baidu.com?userName=mike&password=123">百度</a>

5.表单域标签命令:

1
2
3
4
5
6
7
8
9
1)一组声明在form标签内部的标签命令
2)提示用户填写对应的【请求参数内容】，用于提供相对灵活的请求参数内容
3)所有的表单域标签都拥有两个属性【name,value】
	name属性声明【请求参数名】,value属性声明【请求参数内容】
   <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
2
3
1）<input/>
2）<select></select>
3）<textarea></textarea>

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

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

8.表单域标签作为请求参数条件

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

对于radio标签与checkbox标签来说在满足上述两个条件同时，还必须满足第三个条件才可以作为请求参数，
3)第三个条件radio与checkbox必须在【被选中】的情况下才可以作为请求参数
	  如果表单域标签使用disabled来修饰时，失去作为请求参数条件

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

三:基本标签

1.段落标签–p

1
<p></p>

2.标题标签–h1

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
        <h1>标题标签</h1>
        <h2>标题标签</h2>
        <h3>标题标签</h3>
        <h4>标题标签</h4>
	</body>
</html>

3.有序标签–ol

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	</head>
	<body>
         <ol>
            <li>中国</li>
            <li>德国</li>
            <li>美国</li>
    	</ol>
	</body>
</html>

4.无序标签–ul

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	</head>
	<body>
         <ul>
            <li>中国</li>
            <li>德国</li>
            <li>美国</li>
    	</ul>
	</body>
</html>

5.有序,无序嵌套

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	</head>
	<body>
         <ul>
            <li>职员管理
               <ol>
                 <li>中国</li>
                 <li>德国</li>
                 <li>美国</li>
               </ol>
             </li>
             <li>部门管理
               <ol>
                 <li>部门注册</li>
                 <li>部门查询</li>
                 <li>部门更新</li>
               </ol>
             </li>
    	</ul>
	</body>
</html>

6.表格标签–table

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<html>
     <body>
	       <table border="2" align="center">
               <!--align:对齐方式-->
		      <tr style="background-color:green">
			        <td>职员编号</td>
				    <td>职员姓名</td>
				    <td>职员职位</td>
				    <td>职员工资</td>
			  </tr>

			  <tr align="center" style="background-color:yellow">
			        <td>10</td>
				    <td>smith</td>
				    <td>JAVA工程师</td>
				    <td>13000</td>
			  </tr>

			   <tr align="center" style="background-color:yellow">
			        <td>20</td>
				    <td>mike</td>
				    <td>中级JAVA工程师</td>
				    <td>35000</td>
			  </tr>

			   <tr align="center" style="background-color:yellow">
			        <td>30</td>
				    <td>allen</td>
				    <td>高级JAVA工程师</td>
				    <td>55000</td>
			  </tr>

			   <tr align="center" style="background-color:yellow">
			        <td>40</td>
				    <td>king</td>
				    <td>架构师</td>
				    <td>85000</td>
			  </tr>
		   </table>
	 
	 </body>
</html>

7.rowspan标签

1.==行==合并

2.即相同的属性可以合并为一个单元格

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<html>
     <body>
	       <table border="2" align="center">
		      <tr style="background-color:green">
			        <td>部门名称</td>
			        <td>职员编号</td>
				    <td>职员姓名</td>
				    <td>职员职位</td>
				    <td>职员工资</td>
			  </tr>

			  <tr align="center" style="background-color:yellow">
			        <td rowspan="3">金融事业部</td>
			        <td>10</td>
				    <td>smith</td>
				    <td>JAVA工程师</td>
				    <td>13000</td>
			  </tr>

			   <tr align="center" style="background-color:yellow">
			        
			        <td>20</td>
				    <td>mike</td>
				    <td>中级JAVA工程师</td>
				    <td>35000</td>
			  </tr>

			   <tr align="center" style="background-color:yellow">
			        
			        <td>30</td>
				    <td>allen</td>
				    <td>高级JAVA工程师</td>
				    <td>55000</td>
			  </tr>

			   <tr align="center" style="background-color:yellow">
			        <td>云仓库</td>
			        <td>40</td>
				    <td>king</td>
				    <td>架构师</td>
				    <td>85000</td>
			  </tr>
		   </table>
	 
	 </body>
</html>

8.colspan标签

1.==列==合并

2.即单元格不够(空白的)的可以扩充宽度,与下面多余的对其,保持整体充满

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<html>

    <body>
	
	            <table border=2 align="center">
				  <tr align="center">
				      <td rowspan="2">学员名称</td>
					  <td colspan="3">学习科目</td>
				  </tr>

				  <tr>
				     <td>数学</td>
					  <td>语文</td>
					   <td>英语</td>
				  </tr>

				   <tr>
				     <td>mike</td>
				     <td>96</td>
					  <td>89</td>
					   <td>100</td>
				  </tr>
				   <tr>
				     <td>jones</td>
				     <td>67</td>
					  <td>90</td>
					   <td>92</td>
				  </tr>
				   <tr>
				     <td>allen</td>
				     <td>78</td>
					  <td>70</td>
					   <td>78</td>
				  </tr>
				 
				</table>
	</body>
</html>

9.图片标签–src

1
2
3
4
5
6
7
8
9
10
11
12
<html>
     <body>
	   <center>
		<div>
		  <font style="font-size:50">怀念我的恩师</font>
		</div>
		<div style="border:1px solid black;width:500;height:500">
	       <img src="cuicui.jpg" title="崔手凉老师" width=300  height=300 style="margin:50"/>
		<div>
       </center>
	   </body>
</html>

10.超链接–href

要求浏览器必须采用GET方式发送请求

1
2
3
4
5
6
<html>
  <body>
      <a href="http://www.baidu.com">百度</a><br/>
	  <a href="图片标签.html">我的恩师</a>
  </body>
</html>

11.表单–from

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

1
2
3
4
<form action="请求地址" method="get">
<form action="请求地址" method="post">
***method属性默认值是GET
<form action="请求地址">---->浏览器以GET方式发送请求
1
2
3
4
5
6
7
<html>
   <body>
	<form action="http://www.sina.com">
		<input type="submit" value="新浪"/>
	 </form>
   </body>
</html>

12.==input标签==

1.单选框:radio

2.多选框:checkbox

3.文件:file

4.多行文本框:textarea

5.重置:reset

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<html>
    <form action="http://www.baidu.com">
        用户姓名<input type="text" name="username"/></br>
   		用户密码<input type="text" name="password"/></br>
		性别：<input type="radio" name="sex" value="man">
			 <input type="radio" name="sex" value="woman"></br>
			<!--单选框radio,当name相同时表示是同一组,只能选一个-->
                
       擅长的技术:<input type="checkbox" name="技术" value="java">java
                <input type="checkbox" name="技术" value="c++">c++
                <input type="checkbox" name="技术" value="mysql">mysql
                <!--多选框-->
		
		用户头像:<input type="file" name="myfile"/><br/>
		<!--文件选择框,将选中的文件内容作为请求参数内容-->
		备注信息:<textarea name="tt" rows=10 cols=30></textarea>
		<!--rows:在界面上显示的行数  cols:每行可以写的字个数-->
		<input type="submit"/>
        <!--提交按钮,属于表单域标签,但是用于触发form命令,不作为请求参数使用-->
		<input type="reset"/>
		<!--重置标签,属于表单域标签,但是用于将form表单域标签value设置初始值,即清空,不作为请求参数使用-->
	</form>
</html>

13.下拉列表:select

1
2
3
4
5
6
7
8
9
10
11
12
<html>
    <center>
        <form action="http://www.baidu.com">
        籍贯:<select name="home">
                <option value="bj">北京</option>
                <option value="sh">上海</option>
                <option value="tj">天津</option>
            </select><br/>
             <input type="submit"/><input type="reset"/>
		</form>
	</center>
</html>

14.disable,readonly标签–不可更改

1
2
3
4
5
6
7
<html>
   <form action="http://www.baidu.com">
	性别：<input type="text" name="sex" value="man" disabled>性别不能改<br/>
	姓名：<input type="text" name="userName" value="mike" readOnly>姓名不能改,只读<br/>
	 <input type="submit"/>
	</form>
</html>
赏

谢谢你请我吃糖果

支付宝
微信

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

很惭愧<br><br>只做了一点微小的工作<br>谢谢大家