码迷,mamicode.com
首页 > Web开发 > 详细

HTML

时间:2020-07-21 09:43:38      阅读:304      评论:0      收藏:0      [点我收藏+]

标签:重复   也会   file   超文本标记语言   背景图片   天猫   网页开发   号码   server   

系统结构

B/S架构

  • Browser/Server : (浏览器/服务器的交互形式)
  • Brower支持哪些语言:BTMLCSSJavaScript
  • HTMLCSSJavaScript代码的这拨人职位叫做:WEB前端开发工程师。
  • 前端页面上的图片需要UI设计师完成。
  • S是服务器端ServerServer端的语言很多:CC++JavaPython ...
  • B/S结构的系统有什么优点和缺点?
    • 优点:升级方面、只升级服务器端代码即可。维护成本低。
    • 缺点:速度慢、体验不好、界面不炫酷。
  • 企业内部的解决方案都是采用B/S架构的系统,因为企业内部办公需要的一些系统不需要炫酷,不需要特别好的用户体验,只要能做数据的增删改查即可。并且企业内部更注重维护成本。
  • B/S架构的系统有哪些代表?
    • 京东、百度、天猫...

C/S架构

  • Client/Server :(客户端/服务端的交互形式)
  • 优点和缺点
    • 缺点:升级麻烦,维护成本较高。
    • 优点:速度快,体验好,界面炫酷。(娱乐性的系统多数是C/S架构的)
  • 常见的C/S架构的系统:
    • QQ、微信、支付宝...

什么是HTML?怎么开发HTML?怎么运行HTML?

  • HTMLHyper Text Markup Language (超文本标记语言;超文本:流媒体、图片、声音、视频...)由大量的标签组成,每一个标签都有开始标签和结束标签。
<标签>
    <标签>
        <标签 属性名=‘属性值‘ 属性名=‘属性值‘>
        </标签>
    </标签>
</标签>
  • HTML开发的时候使用普通的文本编辑器就行,创建的文件扩展名是.html或者.htm。HTML也有专业的开发工具,例如:DreamWeaverHBuilder ...
  • 直接采用浏览器打开HTML文件就是运行。

HTML是谁制定的?

  • w3c (世界万维网联盟)制定了HTML的规范,每个浏览器生产厂家都会遵守规范。HTML程序员也会按照这个规范去写代码。
  • HTML目前最高的版本是HTML5.0,简称H5。我们这里学习HTML4.0(主要是学习一下HTML的基础用法)。

我的第一个HTML页面

<!--
	1.这是HTML的注释
	2.加上以下代码的第一行就表示HTML5语法。去掉就表示HTML4.0
	3.HTML不区分大小写,语法松散不严格。
-->
<!doctype html>

<!--根-->
<html>

<!--头-->
	<head>
	<!--网页标题,显示在网页的左上角-->
		<title>页面的标题</title>
	</head>
	
	<!--体-->
	<body>
		页面的主体内容,欢迎学习HTML!
	</body>	
</html>

HTML的基本标签

<!doctype html>
<html>
	<head>
		<title>HTML的基本标签</title>
	</head>
	<body>
		<!--段落标记-->
		<p>诗曰:混沌未分天地乱,茫茫渺渺无人见。自从盘古破鸿蒙,开辟从兹清浊辨。
		覆载群生仰至仁,发明万物皆成善。欲知造化会元功,须看西游释厄传。</p>
		<p>盖闻天地之数,有十二万九千六百岁为一元。</p>
		<p>将一元分为十二会,乃子、丑、寅、卯、辰、巳、午、未、申、酉、戌、亥之十二支也。</p>
		<p>每会该一万八百岁。且就一日而论:子时得阳气,而丑则鸡鸣;寅不通光,而卯则日出;辰时食后,而巳则挨排;</p>
		<p>日午天中,而未则西蹉;申时晡而日落酉,戌黄昏而人定亥。譬于大数,若到戌会之终,则天地昏缯而万物否矣。</p>
		
		<!--标题字:是HTML预留的格式,和word中的标题字相同-->
		<h1>标题字</h1>
		<h2>标题字</h2>
		<h3>标题字</h3>
		<h4>标题字</h4>
		<h5>标题字</h5>
		
		<!--换行标记,br是一个独目标记-->
		hello
		world
		hello<br>world!
		
		<!--横线,独目标记-->
		<hr>
		<!--color和width都是hr标签的属性-->
		<hr color="red" width="50%">
		<!--下面的语句也是可以的,说明语法太松散了!-->
		<hr color=‘green‘ width=50%>
		
		<!--预留格式-->
		<pre>
		for(int i=0;i<10;i++){
			System.out.println("i = " +i);
		}
		</pre>
		
		<del>删除字</del>
		<ins>插入字</ins>
		<b>粗体字</b>
		<i>斜体字</i>
		
		10<sup>2</sup>
		10<sub>m</sub>
		
		<!--字体标签-->
		<font color="red" size="50">字体标签</font>
	</body>
</html>

HTML的实体符号

<!doctype html>
<html>
	<head>
		<title>实体符号</title>
    </head>
		<body>
			b<a>c
			<!--实体符号的特点是:以&开始,以;结束。&lt;是小于号 &gt;是大于号-->
			b&lt;a&gt;c
			
			<!--空格符是:&nbsp;-->
			a&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;b
		</body>
</html>

HTML的表格

<!doctype html>
<html>
	<head>
		<title>表格</title>
    </head>
		<body>
		<!--border="1px" 设置表格的边框为1像素宽度
			width 宽度
			height 高度
		-->
		<!--<table border="1px" width="300px">-->
			<table border="1px" width="60%" height="150px">
			<!--align为对齐方式-->
				<tr align="center">
					<td>a</td>
					<td>b</td>
					<td>c</td>
				</tr>
				<tr>
					<td>d</td>
					<td>e</td>
					<td>f</td>
				</tr>
				<tr>
					<td>x</td>
					<td>y</td>
					<td align="center">z</td>
				</tr>
			</table>
		</body>
</html>

HTML的表格-单元格合并

<!doctype html>
<html>
	<head>
		<title>表格的单元格合并</title>
    </head>
		<body>
		<!--注意事项
			1.row合并行时,删除“下面的”单元格
			2.col合并列时,对删除哪一个没有要求
		-->
			<table border="1px" width="50%">
				<tr>
					<td colspan="2">1</td>
					<!--
					<td>2</td>
					-->
					<td>3</td>
				</tr>
				<tr>
					<td>a</td>
					<td>b</td>
					<td rowspan="2">cf</td>
				</tr>
				<tr>
					<td>d</td>
					<td>e</td>
					<!--
					<td>f</td>
					-->
				</tr>
		</body>
</html>
<!doctype html>
<html>
	<head>
		<title>表格的单元格合并 以及th标签</title>
    </head>
		<body>
		<!--注意事项
			1.row合并行时,删除“下面的”单元格
			2.col合并列时,对删除哪一个没有要求
		-->
			<table border="1px" width="50%">
				<!--
				<tr>
					<td>员工编号</td>
					<td>员工薪资</td>
					<td>部门名称</td>
				</tr>
				-->
				<tr>
				<!--th 标签也是单元格标签,比td多的是居中、加粗-->
					<th>员工编号</th>
					<th>员工薪资</th>
					<th>部门名称</th>
				</tr>
				<tr>
					<td colspan="2">1</td>
					<!--
					<td>2</td>
					-->
					<td>3</td>
				</tr>
				<tr>
					<td>a</td>
					<td>b</td>
					<td rowspan="2">cf</td>
				</tr>
				<tr>
					<td>d</td>
					<td>e</td>
					<!--
					<td>f</td>
					-->
				</tr>
		</body>
</html>

HTML的表格-thead tbody tfoot

<!doctype html>
<html>
	<head>
		<title>thead tbody tfoot在表格中不是必须的,只是便于后期的JS代码的编写</title>
    </head>
		<body>
			<table border="1px" width="50%">
				<thead>
					<tr>
						<th>员工编号</th>
						<th>员工薪资</th>
						<th>部门名称</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>1</td>
						<td>2</td>
						<td>3</td>
					</tr>
				</tbody>
				<tfoot>
					<tr>
						<td>a</td>
						<td>b</td>
						<td>c</td>
					</tr>
				</tfoot>
		</body>
</html>

HTML-背景色和背景图片

<!DOCTYPE html>
<html>
	<head>
		<!--这行代码的作用是告诉浏览器采用哪一种字符集打开当前页面
		注意:并不是在设置当前页面的字符编码方式-->
		<meta charset="utf-8">
		<title></title>
	</head>
	<!--
		bgcolor:设置背景色
		background:设置背景图片
		
		以上的设置都是对背景进行设置
	-->
	<body bgcolor="red" background="img/u=3914148106,1251187670&fm=26&gp=0.jpg">
	</body>
</html>

HTML-图片img标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!--
			1.设置图片宽度和高度的时候,只设置宽度,高度会进行等比例的缩放
			2.img标签就是图片标签
			3.src属性是图片的路径
			4.width设置宽度,height设置高度
			5.title是设置鼠标悬停时显示的信息。
			6.alt设置图片加载失败时显示的提示信息。
		-->
		<img src="img/u=3914148106,1251187670&fm=26&gp=0.jpg" width="100px" title="我是Java的创始人哦" alt="图片找不到了哦!"/>
		
		<br><br><br>
		
		<img src="img/u=3914148106,1251187670&fm=26&gp=0.jpg"/>
	</body>
</html>

HTML-超链接

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>超链接 热链接</title>
	</head>
	<body>
		<!--
			超链接的特点:
				有下划线
				鼠标停留在超链接上显示小手形状
				点击超链接之后能跳转页面
		-->
		<a href="http://www.baidu.com">百度</a>
		<a href="http://news.baidu.com">百度新闻</a>
		<a href="http://www.jd.com">京东商城</a>
		<a href="http://www.tmall.com">天猫</a>
		<a href="http://www.12306.cn">12306</a>
		
		<br><br>
		
		<!--
			href:hot references 热引用
			href属性后面一定是一个资源的地址
			href后面可以是绝对路径也可以是相对路径,可以是网络中某个资源的路径,也可以是本地资源的路径
		-->
		<a href="html-图片img标签.html">图片</a>
		
		<!--图片超链接-->
		<a href="http://www.hao123.com/">
			<img src="img/hao123.png" width="120"/>
		</a>
		
		<!--
			超链接有一个target属性:
				可取值:
				_blank :新窗口
				_self :当前窗口(默认就是这种方式)
				_top :顶级窗口
				_parent :父窗口
		-->
		<a href="http://www.hao123.com/" target="_self">
			<img src="img/hao123.png" width="120"/>
		</a>
	</body>
</html>

Html-超链接的作用-request和response的概念

  • 超链接的作用
    • 超过超链接可以从浏览器向服务器发送请求
    • 浏览器向服务器发送数据(请求:request
    • 服务器向浏览器发送数据(响应:response
  • B/S结构的系统:每一个请求都会对应一个响应。

B ---请求---> S

S ---响应---> B

  • 用户点击超链接和用户在浏览器状态栏上直接输入url,有什么区别?
    • 本质上没有区别,都是向服务器发送请求。
    • 从操作上讲,超链接使用起来更方便。

HTML-列表

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>列表</title>
	</head>
	<body>
		<!--有序列表-->
		<ol type="I">
			<li>水果
				<ol type="i">
					<li>苹果</li>
					<li>西瓜</li>
					<li>桃子</li>
				</ol>
			</li>
			<li>蔬菜
				<ol type="1">
					<li>白菜</li>
					<li>胡萝卜</li>
					<li>芹菜</li>
				</ol>
			</li>
			<li>甜点</li>
		</ol>
		<!--无序列表-->
		<ul type="circle">
			<li>中国
				<ul type="square">
					<li>北京</li>
					<li>南京
						<ul type="disc">
							<li>江宁区</li>
							<li>栖霞区</li>
							<li>建邺区</li>
						</ul>
					</li>
					<li>杭州</li>
				</ul>
			</li>
			<li>美国</li>
			<li>日本</li>
		</ul>
	</body>
</html>

HTML-form表单初步

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!--
			1.表单有什么作用?
				收集用户信息。表单展现之后,用户填写表单,点击提交按钮提交数据给服务器。
			2.怎么画一个表单?
				使用form标签画表单
			3.一个网页当中可以有多个表单form
			4.表单最终需要提交数据给服务器,form标签有一个action属性,这个属性用来指定服务器地址。
				action属性用来指定数据提交给哪个服务器。
				action属性和超链接中的href属性一样。都可以向服务器中发送请求。(request)
			5.action="http://192.168.111.3:8080/oa/save 这是请求路径,表单提交的数据最终提交给:
				192.168.111.3机器上的8080端口对应的软件。
		-->
		<form action="http://192.168.111.3:8080/oa/save">
			<!--画一个提交按钮,这个按钮可以提交表单-->
			<!--画按钮可以使用input输入域,type="submit"的时候表示该按钮是一个提交按钮,具有提交表单的能力。-->
			<!--对于按钮来说,按钮的value属性用来指定按钮上显示的文本信息-->
			<input type="submit" value="注册"/>
			
			<!--这是一个普通的按钮,不具备提交表单的能力-->
			<input type="button" value="设置按钮上显示的文本"/>
		</form>
		
		<!--这个按钮和超链接没有太大区别。(超链接和表单都可以向服务器发送请求,只不过表单在发送请求的同时可以携带数据)-->
		<form action="http://www.baidu.com">
			<input type="submit" value="百度"/>
		</form>
		
		<form action="http://localhost:8080/jd/login">
			用户名<input type="text"/><br>
			密码<input type="password"/><br>
			<input type="submit" value="登录"/>
		</form>
		
		<!--
			表单时以什么格式提交数据给服务器的?
				http://localhost:8080/jd/login?username=jack&userpwd=123
				格式:action?name=value&name=value&name=value&name=value...
				W3C的HTTP协议规定的,必须以这种格式提交给服务器。
				
			重点强调:表单填写了name属性的,一律会提交给服务器。不想提交这一项的,就不要些name属性。
			
			文本框和密码的value不需要程序员指定,用户输入什么value就是什么。
			
			当name没有写的时候,该项不会提交给服务器。
			但是当value没有写的时候,value的默认值是空字符串"",会将空字符串提交给服务器。Java代码得到的是:String username="";
		-->
		<form action="http://localhost:8080/jd/login">
			<table>
				<tr>
					<td>用户名</td>
					<td><input type="text" name="username"/></td>
				</tr>
				<tr>
					<td>密码</td>
					<td><input type="password" name="userpwd"/></td>
				</tr>
				<tr align="center">
					<td colspan="2">
						<input type="submit" value="登录"/>
						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						<input type="reset" value="清空"/>
					</td>
				</tr>
			</table>
		</form>
	</body>
</html>

html-用户注册的表单

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!--
			用户注册:
				用户名
				姓名
				密码
				确认密码
				性别
				兴趣爱好
				学历
				简介
				
			form表单method属性
				get:采用get方式提交的时候,用户提交的信息会显示在浏览器的地址栏上
				post:采用post方式提交的时候,用户提交的信息不会显示在浏览器的地址栏上
				当用户提交的信息中有敏感信息时,例如:密码,建议采用post方式进行提交!
				
			method属性不指定或者指定为get,这种情况下都是get。
			只有当method属性指定为post的时候才是post请求。剩下所有的请求都是get请求。
			post提交的时候提交的数据格式和get还是一样的,只不过不在地址栏上显示出来。
			
			超链接也可以提交数据给服务器,但是提交的数据是固定不变的。
			超链接是get请求,不是post请求。
		-->
		<form action="http://localhost:8080/jd/register" method="post">
			用户名
			<input type="text" name="username"/>
			<br>
			密码
			<input type="password" name="username"/>
			<br>
			确认密码
			<input type="password"/>
			性别
			<input type="radio" name="gender" value="1"/>男
			<input type="radio" name="gender" value="0" checked/>女  <!--单选按钮的value必须手动指定-->
			<br>
			兴趣爱好
			<input type="checkbox" name="interest" value="smoke"/>抽烟
			<input type="checkbox" name="interest" value="drink" checked/>喝酒
			<input type="checkbox" name="interest" value="fireHair" checked />烫头
			<br>
			学历
			<select name="grade">
				<option value="gz">高中</option>
				<option value="dz">大专</option>
				<option value="bk" selected>本科</option> <!--默认选中-->
				<option value="ss">硕士</option>
				<option value="bs">博士</option>
			</select>
			<br>	
			简介 <!--文本域,文本域没有value属性,用户填写的就是value-->
			<textarea rows="10" cols="60" name="introduce"></textarea>
			<br>
			<input type="submit" value="注册"/>
			<input type="reset" value="清空"/>
		</form>
	</body>
</html>

HTML-下拉列表支持多选

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>下拉列表支持多选</title>
	</head>
	<body>
		<!--multiple="multiple" 支持多选的。设置显示条目数量-->
		<select multiple="multiple" size="3">
			<option>江苏省</option>
			<option>浙江省</option>
			<option>安徽省</option>
			<option>湖南省</option>
			<option>四川省</option>
		</select>
	</body>
</html>

HTML-form的file控件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>file控件</title>
	</head>
	<body>
		<!--file控件 文件上传专用-->
		<input type="file"/>
	</body>
</html>

HTML-隐藏域hidden控件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>隐藏域hidden控件</title>
	</head>
	<body>
		<form action="http://localhost:8080/oa/save">
			<!--隐藏域,网页上看不到,但是表单提交的时候数据会自动提交给服务器-->
			<input type="hidden" name="userid" value="111"/>
			用户代码<input type="text" name="usercode"/>
			<input type="submit" value="提交"/>
		</form>
	</body>
</html>

HTML-readonly和disabled

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>readonly和disabled</title>
	</head>
	<body>
		<!--
			readonly和disabled相同点:都是制度不能修改
			但是readonly可以提交给服务器,disabled数据不会提交(即使有name属性也不会提交)
		-->
		<form action="http://localhost:8080/taobao/save">
			用户代码<input type="text" name="usercode" value="111" readonly />
			<br>
			用户姓名<input type="text" name="username" value="zhangsan" disabled />
			<br>
			<input type="submit" value="提交数据" />
		</form>
	</body>
</html>

HTML-控件的maxlength属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>控件的maxlength属性</title>
	</head>
	<body>
		<!--
			maxlength 设置文本框中可输入的属性
		-->
		<input type="text" maxlength="3"/>
	</body>
</html>

HTML-文档中节点的id属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body id="mybody">
		<!--
			1.在HTML文档中,任何元素(节点)都有id属性,id属性是该节点的唯一标识。所以在同一个HTML文档中id值不能重复。
			2.注意:表单提交数据的时候,只和name有关系,和id无关。
			3.id有什么作用?
				javascript语言,可以对HTML文档中的任意节点进行增删改操作。
				javascript可以对HTML文档当中的任意节点进行增删改,那么增删改之前需要先拿到这个节点,通常我们通过id来拿节点对象。
				id的存在让我们获取元素(节点)更方便。
			4.HTML文档是一棵树,树上有很多节点,每一个节点都有唯一的id。
				javascript主要是对这颗DOM(document)树上的节点进行增删改的。
				
		-->
		<form id="myform">
			<input type="text" id="username" name="username" />
			<input type="password" id="userpwd" name="userpwd" />
			<!--id就是节点的身份证号码,不能重复-->
			<!--
				<input type="text" id="username" />
			-->
		</form>
	</body>
</html>

HTML-div和span在网页中的应用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>div和span在网页中的应用</title>
	</head>
	<body>
		<!--
			1.div和span是什么?有什么作用?
				div和span都可以成为“图层”
				图层的作用是为了保证页面可以灵活的布局。
				图层就是一个一个的盒子,div嵌套div就是盒子套盒子
				div和span是可以定位的,只要定下div的左上角的x轴和y轴坐标即可。
			2.其实最早的网页是采用table进行布局的,但是table不灵活,太死板。
				现在的网页开发中div使用最多,几乎很少使用table进行布局了。
				
			3.div和span的区别?
				di独自占用一行(默认情况下)
				span不会独自占用一行
		-->
		<div id="div1">我是一个div</div>
		<div id="div2">我是一个div</div>
		
		<span id="span1">我是一个span标签</span>
		<span id="span2">我是一个span标签</span>
	</body>
</html>

HTML

标签:重复   也会   file   超文本标记语言   背景图片   天猫   网页开发   号码   server   

原文地址:https://www.cnblogs.com/yxc-160206/p/13352478.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有
迷上了代码!