HTML笔记-动力节点

1、基础概念

1.1系统结构

系统结构优缺点代表

B/S架构

(Browser / Server

浏览器/服务器的交互形式。)

优点:升级方便,只升级服务器端代码即可。维护成本低。

缺点:速度慢、体验不好、界面不炫酷

京东、百度、天猫(企业使用:不需要太多用户体验增删改查;维护成本低)

C/S架构

(Client / Server     客户端/服务器端的交互形式。)

优点:速度快,体验好,界面炫酷。

缺点:升级麻烦,维护成本较高。

娱乐型系统:QQ、VX、ZFB

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

* HTML: Hyper Text Markup Language (超文本标记语言)
        由大量的标签组成,每一个标签都有开始标签和结束标签。
        <标签>
            <标签>
                <标签 属性名="属性值" 属性名="属性值">
                </标签>
            </标签>
        </标签>

        超文本: 流媒体、图片、声音、视频....

    * HTML开发的时候使用普通的文本编辑器就行,创建的文件扩展名是.html或者.htm
    HTML也有专业的开发工具,例如:DreamWeaver、HBuilder.....

    * 直接采用浏览器打开HTML文件就是运行。

1.3HTML是谁制定的?

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

    W3C制定了很多规范:
        HTML/XML/http协议/https协议......

    为了方便中国web前端程序员的开发,提供大量的帮助文档。为开发提供方便。
        w3school:先出现的,和W3C没有关系
        w3cschool:后出现的,和W3C没有关系

2、代码知识点整理

1.基本标签(&)

<!doctype html>
<head>
    <title>Html基本标签</title>
</head>

<body>
   <!-- 段落标记 -->
    <p>1234567890</p>12345678901234567<p>125678901234890</p>

    <!-- 标题字:是HTML预留的格式,和word中的标题字相同 -->
    <h1>1</h1>
    <h2>2</h2>
    <h3>3</h3>
    <h4>4</h4>

    <!-- 换行标记,br标签是一个独目标记 -->
    hello <br> world

    <!-- 横线,独目标记 -->
    <hr>

    <!-- color和width都是hr标签的属性 -->
    <hr color="red" width="50%">

    <!-- 语法太松散了 -->
    <hr color="green" width="30%">

    <!-- 预留格式 -->
    <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的2次方

    10<sub>m</sub>    右下角加字,10m

    <font color='red' size='50'>字体标签</font>
</body>

</html>

2.实体符号

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

        abc       def <br>

        abc&nbsp;&nbsp;&nbsp;def

3.表格(&)

<!doctype html>
<html>
	<head>
		<title>表格</title>
	</head>
	<body>
		<br><br><br><br><br><br><br>
		<center><h1>员工信息列表</h1></center>
		<hr>
		<table align="center" border="1px" width="300px" height="150px">

		<!--宽高也可以写百分比-->
		<!-- border="1px" 设置表格的边框为1像素宽度 -->
		<!-- 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>

3.1单元格合并(&)

<!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>
			-->
			<!-- th 标签也是单元格标签,比td多的是居中、加粗 -->
			<tr>
				<th>员工编号</th>
				<th>员工薪资</th>
				<th>部门名称</th>
			</tr>

			<tr>
				<td>1</td>
				<td>2</td>
				<td>3</td>
			</tr>
			<tr>
				<td>a</td>
				<td>b</td>
				<td rowspan="2">cf</td>
				<!--c行加上rowspan合并2行写2-->
			</tr>
			<tr>
				<!-- 
				<td>d</td>   去掉d或e都可以 
				-->

				<td colspan="2">de</td>
				
				<!-- 
				<td>f</td>   去掉f行 
				-->			
			</tr>

		</table>
	</body>
</html>

3.2 thead tbody tfoot

<!doctype html>
<html>
	<head>
		<title>thead tbody tfoot 在table中不是必须的,只是这样做便于后期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>
		
				<tr>
					<td>a</td>
					<td>b</td>
					<td rowspan="2">cf</td>
				</tr>
			
				<tr>
					<td colspan="2">de</td>	
				</tr>
			</tbody>
		</table>
	</body>
</html>

4.背景颜色和背景图片

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>背景颜色和背景图片</title>
	</head>
	<!--
		bgcolor:设置背景色
		background:设置背景图片
		以上的设置都是对背景设置 
	-->
	<body bgcolor = "red" background="img/aaa.jpg">
	</body>
</html>

5.图片

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>图片img</title>
	</head>
	<body>
		<!--
			1.设置图片宽度和高度的时候,只设置宽度,高度会进行等比例缩放		
			2.img标签就是图片标签		
		    3.src属性是图片的路径
		    4.width设置宽度 height设置高度
		    5.title 设置鼠标悬停时显示的信息
		    6.alt设置图片加载失败时显示的提示信息
		-->
		<img src="img/aaa.jpg" width="100px" height="200px" title="我是图片" alt="图片加载失败"/>
		<img src="img/aaa.jpg" width="100px" height="200px" title="我是图片" alt="图片加载失败"></img>
		<br><br><br><br><br>
		<img src="img/aaa.jpg" />
	</body>
</html>

6.超链接或热链接(&)

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

<!-- 
	超链接的作用:
		通过超链接可以从浏览器向服务器发送请求
		浏览器向服务器发送数据(请求:request)
		服务器向浏览器发送数据(响应:response)
		
		B/S结构的系统,每一个请求都会对应一个响应
		B--请求--------------S
		S--响应--------------B
		
	用户点击超链接和用户在浏览器地址栏上直接输入URL,有什么区别?
		本质上没有区别,都是向服务器发送请求。
		
	从操作上来讲,超链接使用更方便。
->

7.列表

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>列表</title>
	</head>
	<body>
		<!-- 有序列表 -->	
		    <ol type="A">	
		        <!--type写A就是ABC,写1就是123排序,写I 就是字符-->	
		        <li>水果	
		            <ol type="a">	
		                <li>苹果</li>	
		                <li>西瓜</li>	
		                <li>桃子</li>	
		            </ol>	
		        </li>	
		        <li>蔬菜	
		            <ol>
		                <li>西红柿</li>	
		            </ol>	
		        </li>	
		        <li>甜点</li>	
		    </ol>	
		    <!-- 无序列表  -->	
		    <ul>	
		        <li>中国	
		            <ul type='square'>		
		                <li>北京
		                    <ul type='disc'>
		                        <li>东城区</li>
		                        <li>西城区</li>
		                        <li>海淀区</li>
		                        <li>朝阳区</li>
		                    </ul>
		                </li>
		                <li>天津</li>
		                <li>上海</li>
		            </ul>
		        </li>
		        <li>美国</li>
		        <li>日本</li>
		    </ul>
	</body>
</html>

8.表单form(&)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单form</title>
	</head>
	<body>
		<!-- 
			1.表单有什么用?		
				手机用户信息。表单展现之后,用户填写表单,点击提交按钮提交数据交给服务器		
			2.怎么画一个表单。		
				使用form标签画表单。		
			3.一个网页当中可以有多个表单form
			4.表单最终是需要提交数据给服务器的,form标签有一个action属性,这个属性用来指定服务器地址:		
				action属性用来指定数据提交给哪个服务器。	
				action属性和超链接中的href属性一样。都可以向服务器发送请求(request)		
			5: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://baidu.com">	
		    <input type="text">	
		    <input type="submit" value="百度">		
		</form>		
		<br>		
		<br>	
		<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=abc&userpwd=111		
		    格式:action?name=value&name=value&name=value&name=value...  必须记住  name指的是input标签的namem,value指的是input标签的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="登录">				
		                <input type="reset" value="清空">		
		            </td>		
		        </tr>		
		    </table>		
		</form>		
		<!-- submit必须放到form标签内部 -->		
		<input type="submit">		
		<!-- reset必须放到form标签内部 -->		
		<input type="reset" value="清空">
	</body>
</html>
<!--复习视频:https://www.bilibili.com/video/BV11t411K74Q?p=22-->

9.用户注册表单

<!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还是一样的,只不过不在地址栏上显示出来。		
		        post提交的数据还是:name=value&name=value&name=value....		
		    -->		
		    <form action="http://localhost:8080/jd/register" method="post">		
		        用户名		
		        <input type="text" name="username">	
		        <br>		
		        密码		
		        <input type="password" name="userpwd">		
		        <br>		
		        确认密码		
		        <input type="password">		
		        <br>		
		        性别	
		        <input type="radio" name="gender" value="1" checked>男
		        <input type="radio" name='gender' value="0">女		
		        <!-- 单选按钮的value必须手动指定 -->		
		        兴趣爱好		
		        <input type="checkbox" name="interest" value="smoke">抽烟		
		        <input type="checkbox" name="interest" value="drink">喝酒		
		        <input type="checkbox" name="interest" value="Hot head" checked>烫头	
		        <br>	
		        学历		
		        <select name="grade">		
		            <option value="high school">高中</option>		
		            <option value="polytechnic">大专</option>		
		            <option value="graduate" selected>本科</option>		
		            <!--默认选中-->		
		            <option value="master">硕士</option>		
		        </select>	
		        <br>		
		        简介		
		        <!--文本域没有value属性,用户填写的内容就是value-->		
		        <textarea name="introduce" id="" cols="30" rows="10"></textarea>		
		        <input type="submit" value="注册">		
		        <input type="reset" value="清空">		
			</form>
		        <!--超链接也可以提交数据给服务器,但是提交的数据都是固定不变的。-->
		        <!--超链接是get请求。不是post请求-->
				<a href="http://localhost:8080/oa/save?username=zhangsan&password=111">提交</a>
	</body>
</html>

<!--http://localhost:8080/jd/register?username=zhangsan&userpwd=111&gender=1&interest=smoke&interest=drink&interest=Hot+head&grade=master&introduce=jack+goodman-->

10.下拉列表支持多选

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>下拉列表支持多选</title>
	</head>
	<body>
		<!--multiple="multiple" 支持多选的 size设置选中的条目数量-->
		<select multiple="multiple" size="2">		
		    <option value="">河北</option>		
		    <option value="">河南</option>		
		    <option value="">山东</option>		
		    <option value="">山西</option>
		</select>
	</body>
</html>

11.file控件:文件上传专用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>file控件</title>
	</head>
	<body>
		<!--file控件:文件上传专用。-->
		<input type="file"/>
		
		<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>

12.readonly和disable

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

13.input控件的maxlength属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>maxlength</title>
	</head>
	<body>
		 <!-- maxlength 设置文本框中可输入的字符数量 -->
		
		    <input type="text" maxlength="3">
	</body>
</html>

14.HTML中元素的id属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML中元素的id属性</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树上的节点进行增删改的。
				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>

15.div和span

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML中的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的区别?
				div独自占用一行(默认情况下)
				span不会独自占用一行。
		-->
		<div id="div1">我是一个DIV</div>
		<div id="div2">我是一个DIV</div>
		
		<span id="span1">我是一个SPAN标签</span>
		<span id="span2">我是一个SPAN标签</span>
		
		<div id="div3">
			<div>
				<div>test</div>
			</div>
		</div>
	</body>
</html>

         

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值