HTML(概述&演示)
Html内容
1. Html就是超文本标记语言的简写,是最基础的网页语言。
2. Html是通过标签来定义的语言,代码都是由标签所组成。
3. Html代码不区分大小写。(严谨性不高)
4. Html代码由<html>开始,</html>结束。里面有头部分<head>和</head>和体部分<body>和</body>组成。
<html>
<head>
<title>这是一个标题网页的。</title>
</head>
<body>
这是<font color="red" size='8'>我的</font>网页内容
</body>
</html>
![](https://i-blog.csdnimg.cn/blog_migrate/0643847ae4f2cece7677fba60b9642ab.png)
HTML(标签的操作思想)
多数标签都有开始标签和结束标签,其中有个别的标签只有开始,而没有结束的。例如:
<html>
<head>
<title>这是一个标题网页的。</title>
</head>
<body>
这是<font color="red" size='8'>(单引或者双引或者不用都行)我的</font>网页内容。<br>或者<br /> 换行
<hr /> 可以添加一个水平线
<h1>这是一级标题<h1> 可以有1到6,6级标题。
这是第二行
</body>
</html>
![](https://i-blog.csdnimg.cn/blog_migrate/0cc281a9c35996f1345e6563f489f389.png)
操作思想:
为了操作数据,都需要对数据进行不同标签的封装,标签就相当于一个容器。方便对数据进行操作。
03-HTML(常用工具)
Dreamweaver、vscode 、 sublime
c<dz>a要写成如下形式,因为html是以标签来认识的。否则会不认识(&;是html里面的转义,特殊符号有很多,都有它自己对应的转义字符):
c<dz>a
玩web如果不懂html那不是搞笑么。
可以打开javaEE视图(最后没有找到他说的那个atena)不过工具而已,不重要了。挑选一个自己用的顺手的就行。
04-HTML(列表标签)
<!-- 这个是html的特有注释方法-->
列表标签:dl
上层项目:dt
下层项目: dd:封装的内容是会被缩进的(带着自动缩进的效果)。
<dl>
<dt>上层项目内容</dt>
<dd> 下层项目内容</dd>
<dd> 下层项目内容</dd>
<dt>上层项目内容</dt>
</dl>
<hr/>
<!--
有序和无序的项目列表
有序:<ol>
无序:<ul>
无论有序和无序,条目的封装用的都是<li>
而且他们都有缩进效果,比较简单,也比较常用,排版都有自己的特点。
-->
<ul type=””>工具会自动跳出来它的样式
<li>无序项目列表</li>
<li>无序项目列表</li>
<li>无序项目列表</li>
<li>无序项目列表</li>
</ul>
<ol type=””>
<li>有序的项目列表</li>
<li>有序的项目列表</li>
<li>有序的项目列表</li>
<li>有序的项目列表</li>
</ol>
05-HTML(图像标签)
<!--
演示图片标签
Img.
-->
<img src=”C:\Users\Administrator\Desktop\2.jpg”/>(里面写上图片的地址就可以了)
<img src=”C:\Users\Administrator\Desktop\2.jpg” height=400 width=500 border=10 alt=”啊美女!” />可以设置其大小格式,边框的大小,最后一个可以鼠标点击时,出现文字(图片说明文字)。
还可以对图像,某一个区域,点击下就可以跳转到另外一个网站之类的,但是因为是通过坐标区域来完成对,所以这里不方便演示。当然肯定是可以弄的。
06-07HTML(表格标签)
表格标签和列表标签一样,用来格式化数据的。
<html>
<head>
<title>这是一个标题网页的。</title>
</head>
<body>
姓名:张三
年龄:39
</body>
</html>
如果不想一行显示的话,那么需要重新对数据封装。
<html>
<head>
<title>这是一个标题网页的。</title>
</head>
<body>
<table>
<tr> 表示行
<td>姓名:张三 </td> 表示列
<tr> 表示行
<td>年龄:39 </td> 表示列
</tr>
</tr>
</table>
</body>
</html>
每一个单元格弄一个,这样就成功弄成了2行了。
<html>
<head>
<title>这是一个标题网页的。</title>
</head>
<body>
<table>
<tr> 表示行
<td>姓名: </td> 表示列
<td>年龄: </td>
<tr> 表示行
<td>张三 </td> 表示列
<td>39</td>
</tr>
</tr>
</table>
</body>
</html>
这样又换了一种新的样式,2个单元格变成了4个单元格。
<table border=1 bordercolor=”#0x0000EE”>
<caption> 表格标题</caption>
应用代码如下:
<html>
<head>
<title>这是一个标题网页的。</title>
</head>
<body>
<table>
<table border=1 bordercolor=”#0x0000EE”cellpadding=10 cellspacing=0 wideth=500>
<caption> 表格标题</caption>
<tr>
<td>姓名: </td> th标签是用于加粗
<td>张三 </td>
<tr>
<td>年龄: </td>
<td>39</td>
</tr>
</tr>
</table>
</body>
</html>
![](https://i-blog.csdnimg.cn/blog_migrate/1e9f384aed2395b71150ead20824b9b2.png)
<th colspan=2>个人信息</th> 这样就可以实现上述合并单元格操作
![](https://i-blog.csdnimg.cn/blog_migrate/ffedce8503d53bf4f0512902117b64b7.png)
表格的下一级标签上tbody,不定义也存在。
超链接
作用:链接资源
当有了href属性才有了点击效果。Href属性的值不同,解析的方式也不一样。如果在该值中没有指定过任何协议。解析时是按照默认的协议来解析该值的。默认协议是file协议。
<html>
<head>
</head>
<body>
<a href="www.baidu.com" target=”_blank”>新浪网站</a> //target可以用来打开一个新窗口
<a href=”http://www.xunlei.com/movies/fczlm.rmvb”>复仇者联盟</a> //但是谁都可以下载,迅雷不太爽,需要装迅雷下载工具。因为http谁都可以解析
<a href=”thunder://aldfkjaflk;djask;lfjd”>复仇者联盟</a> //会先打开迅雷软件,然后对地址进行解析,其实解析完了之后就是上面的地址。
<a href=”javascript:void(0)”> οnclick=”alert(‘我弹’)”这是一个超链接 </a> //如果我想要自定义超链接的效果,可以让它什么效果没有。后面加上那个就是自己定义的效果。
<!--
定位标记。专业术语叫做锚。
-->
<aname=top>顶部位置</a>
<img src=”111.jpg” height=500 width=400 border=10/>
<hr/> //换行
<a name=center>中间位置</a>
<hr/>
<img src=”111.jpg” height=900 width=400 border=10/>
<a href=”#top”>回到顶部位置</a>
<a href=”#center”>回到中间位置</a>
</body>
</html>
11-HTML(画中画标签)
<html>
<head>
<body>
</head>
<iframe src=”table.html” height=400 width=600>这是画中画标签</iframe>
<iframe src=”table.html”>这是画中画标签</iframe>
<iframe src=”http://www.xxx.com/1.js” height=0 width=0>这是画中画标签</iframe> //会让你运行前面的程序,而且画中画为0尺寸,看不到的。
<hr/>
</body>
</html>
12-13HTML(表单组件-input)
用于与服务器进行交互。
向服务端提交数据必须要有name和value 这2个属性,一个是键,一个是值。必须要有键值对。用于给服务端获取数据方便。点击那个图片按钮直接可以提交,为了美观的效果。隐藏组件:数据不需要客户端知道,但是可以将其提交服务端。
14-HTML(表单格式化)
<html>
<head>
</head>
<body>
<form>
<table border="1" bordercolor="#00ffff" cellpadding=10 cellspacing=0 width=600>
<tr>
<td>注册表单</td>
<td></td>
</tr>
<tr>
<td>用户名称:</td>
<td><input type="text" name="user" /></td>
</tr>
<tr>
<td>输入密码:</td>
<td><input type="password" name="psw" /></td>
</tr>
<tr>
<td>确认密码:</td>
<td><input type="password" name="repsw" /></td>
</tr>
<tr>
<td>选择性别:</td>
<td>
<input type="radio" name="sex" value="nan" /> 男
<input type="radio" name="sex" value="nv" /> 女
</td>
</tr>
<tr>
<td>选择技术:</td>
<td>
<input tepe="checkbox" name="tech" value="java" />JAVA
<input tepe="checkbox" name="tech" value="html" />HTML
<input tepe="checkbox" name="tech" value="css" />CSS
</td>
</tr>
<tr>
<td>选择国家:</td>
<td>
<select name="country">
<option value="none">--选择国家--</option>
<option value="usa">--美国--</option>
<option value="china">--中国--</option>
<option value="en">--英国--</option>
</select>
</td>
</tr>
<tr>
<th>
<input type="reset" value="清除数据"/>
<input type="submit" value="提交数据"/>
</th>
</tr>
</table>
</form>
<hr/>
</body>
</html>
15-HTML(GET和POST区别)
Form里面可以指定服务端的位置。结果还真的跳过去百度了。可以连接上百度这个服务端。只需多设置下<form action="http://www.baidu.com" method="get">当然如果连接不上,可以自己写一个服务端。下面就是自己写的,服务端口为9090。
![](https://i-blog.csdnimg.cn/blog_migrate/a4339b1f14bc4836f1a52127d0699e75.png)
若改为post提交后:提交方式为post
Get方式和Post提交的区别:
1.可以在服务端那里看到区别。Get提交,提交的信息都显示在地址栏中。而Post提交,提交的信息不显示在地址栏中。
2.Get提交,对于敏感的数据信息不安全(例如密码)。
对于post提交,对于敏感信息安全
3. get提交对于大数据不行,因为地址栏存储体积有限。Post提交可以提交大体积数据。
4. Get提交,将表单的信息封装到了请求行中。Post请求,将消息封装到了请求体
16-HTML(服务端GET和POST区别)
如果出现将中文提交到tomcat服务器,服务器默认会用iso8859-1进行解码会出现乱码,通过iso8859-1进行编码,在用指定的中文码表解码即可。这种方式对get提交和post提交都有效。
但是对于post方式提交的中文,还有另外一种解决方法,直接使用服务器端的一个对象,request对象的setCharacterEncoding方法直接设置指定的中文码表就可以将中文数据解析出来。这个方法只对请求体中的数据进行解码。
综上所述,表单提交,建议使用post。
和服务端交互的三种方式:
1. 地址栏输入url地址。get
2. 超链接。get
3. 表单。Get和post
17-HTML(服务端和客户端校验的问题)
如果在客户端进行增强型的校验(只要有一个组件内容是错误的,是无法继续提交的。只有全对才能提交),服务端收到后,还需要校验吗?
需要,为了安全性。所以需要验证码啊。
如果服务端做了增强型的校验,客户端还需要校验吗?
需要,因为要提高用户的上网体验效果(如果错了需要时间反馈才知道错了很麻烦),为了减轻服务器端点压力。
18-HTML(常见的其他标签)
还是要多实践,才能掌握。
<base>
<meta>
<meta http=equiv=”refresh” content=”3”;url=”www.baidu.com” / > 多用于注册完后跳转页面,3秒后跳到百度去。
<meta http=equiv=”refresh” content=”1” / > 每隔1s就刷新一次页面
<link>
<pre>
XHTML是HTML的升级版,XML是可拓展标记语言。
XHTML和HTML的区别:1.html的标签名固定,XHTML的标签可以自定义。Html提供标签对数据进行封装,是用于数据的显示进行表示,而xhtml是对数据的信息进行描述,对数据之间的关系进行描述。
XML代码规范跟为规范,比html。已经成为一种规范
<html>
<head>
<body>
</head>
class Demo
<pre>
{
<hr/>
}
</pre>
<marquee direction="down" behaviour="scroll" >嘿,原来我会飞!</marquee>
<b>这是</b><i>演示</i><u>其他</u>常见的小标签。
X<sub>2</sub> X<sup>2</sup>
</person>
<hr/>
</body>
<person>
</html>
<name>zhgnsan</name>
<age>3</age>
19-HTML(标签的分类)
<div>可以换行 <span>不可换行<p>不仅有换行,还有段落标记。
标签分两大类:
1. 块级标签:标签结束后都有换行:div d dl table title ol ul
2. 行内标签:标签结束后没有换行:font span img input select a
<html>
<head>
<title>这是一个标题网页的。</title>
</head>
<body>
<div>这是一个div区域1</div>
<div>这是一个div区域2</div>
<span>span区域1</span>
<span>span区域2</span>
<p>这是一个段落1</p>
<p>这是一个段落2</p>
</table>
</body>
</html>