<pre>
Html内容:
1.Html就是超文本语言的简写,是最基础的网页语言。
2.Html是通过标签来定义的语言,代码由标签锁组成。
3.Html代码不用区分大小写。(说明严谨性不高)
4.Html代码由<Html>开始</Html>结束。里面由头部分<head></head>和体部分<body></body>两部分组成。
5.头部分是给Html页面增加一些辅助或者属性信息,它里面的内容会最先加载。
6.体部分是真正存放页面数据的地方。
多数的标签都是有开始标签和结束标签,其中有个别标签因为只有单一功能,
或者没有要修饰的内容可以在标签内结束。
想要对被标签修饰的内容进行更丰富的操作,就用到了标签中的属性,
通过对属性值的改变,增加了更多的效果选择。
属性和属性值之间用=连接,属性值可以用双引号或者单引号或者不用引号,一般都会用双引号。或公司规定书写规范。
格式:<标签名 属性名=“属性值”>数据内容</标签名>
<标签名 属性名="属性值"/>
操作思想:
为了操作数据,都需要对数据进行不同标签的封装,通过标签中的属性对封装的数据进行操作。
标签就相当于一个容器。对容器中的数据进行操作,就是在不断的改变容器的属性值。
常用标签的使用:
1.<br />:换行标签
2.<hr />:水平线
3.<!--注释内容-->:注释内容
4.字体标签:
使用示例:<font size="5" color="red">字体标签示例</font>
注:简单颜色可直接写对应的英文,复杂颜色用16进制表示,表现形式是:#ff00ff,两个数组一组,按照红 绿 蓝排列。如:#00ff00表示绿色。
5.标题标签:<h1> <h2> ... <h6>,支持h1到h6.
因为标题是文本中常用内容,为了方便操作而定义的,其实就是某个字号和粗体的组合。
6.特殊字符:
C<dz>a:在html中无法正常显示,因为html是由标签所组成,所以<>中的内容无法显示,这时就用到了转义字符。Html中的转义字符是&开头;结尾。
<应写成:< >应写成:> 空格应写成:
7.列表标签:<dl>
<dt>:上层项目<dd>:下层项目
有序和无序的项目列表:
有序:<ol>无序:<ul>
无论是有序还是无序的下层项目封装都是用<li>,下层项目的内容会被缩进。
8.图像标签:<img>
例:<img src="1.jpg" align="middle" border=1 alt=图片文字说明 />
Align:属性定义图片的排列方式,border设置图片的边框。
Height:设置图片的高width:设置图片的宽
9.表格标签:<table>
cellpadding=10 单元格内边距为10 即单元格内数据距离单元格边距为10
cellspacing=10单元格之间的距离为10
width=500单元格宽度为500像素
colspan=2合并单元格
rowspan=2合并单元格 竖向 占两行
<caption>表格标题</caption>
<tr>定义一行
<td>定义单元格</td>
</tr>
10.超链接标签:<a>
作用:连接资源,当有了href属性才有点击效果。
Target属性:用来指定连接打开的位置。Target="_blank"在新窗口中打开。
<a href="">默认情况会打开当前目录</a>
Href属性的值的不同,解析的方式也不同,如果该值没有指定过任何的协议,解析时会默认使用file协议。
<a href="http://bbs.itheima.com" target=_blank>点击在心窗口打开黑马论坛</a>
<a href="mailto:heima@sina.com">联系我们</a> 邮件链接
<a href="javascript:void(0)" οnclick="alert('弹出提示问题')">自定义效果</a>
定义标记:锚
<a name=top>顶部位置</a>
<hr />
<img src="12.jpg" height=900 width=400 border=5 />
<hr />
<a name=middle>中间位置</a>
<hr />
<img src="14.jpg" height=900 width=400 border=5 />
<a href="#top">回到顶部位置</a>
<a href="#middle">回到中间位置</a>
11.HTML框架:一个窗口可显示多个资源,框架标签应该写在主题外面。
例:
<frameset rows="30%,*">
<frame src="top.html" name="top" />
<frameset cols="30%,*">
<frame src="left.html" name="left" />
<frame src="right.html" name="right" />
</frameset>
</frameset>
12.画中画标签:可以在窗体的任意位置上打开一个区域,并链接资源进来。
例:<iframe src="table.html" height=400 width=500>画中画变迁,此文字在浏览器不支持时显示。</iframe>
<iframe src="http://www.xxx.com/1.js" height=0 width=0>恶意程序</iframe>
13.表单标签<form>:最常用的标签,用于与服务器端的交互。
<Input>:输入标签,接收用户输入的信息。其中的type属性指定输入标签的类型。
<form>
输入名字:<input type="text" name="user"/>
输入密码:<input type="password" name="psw" />
选择性别:<input type="radio" name="sex" value=nan />男
<input type="radio" name="sex" value=nv checked="checked" />女
所会技术:<input type="check" name="tech" value=java/>JAVA
<input type="check" name="tech" value=html />HTML
<input type="check" name="tech" value=css />CSS
选择文件:<input type="file" name="file" />
<input type=""image" src="1.jpg" />具备着提交效果
隐藏组件:<input type="hidden" name="myke" value="myvalue" />
<input type="reset" value="重置数据" />
<input type="submit" value="提交数据" />
<br/>
按钮:<input type="button" value"一个按钮" οnclick="alert('提示')" />
<select name="country"> 下拉选择条
<option value="none">--选择国家--</option>
<option value="cn">中国</option>
<option value="usa">美国</option>
<option value="en">英国</option>
</select>
Selected属性selected="selected"设置未默认属性。
<textarea name="text"> </textarea>:文本输入区域
14.提交方式:
<form action="http://127.0.0.1:9090" method="get">
默认的提交方式是get。
get提交和post提交的区别:
1.get提交,提交信息都显示在地址栏中。
Post提交,提交的信息部显示在地址栏中。
2.get提交对于敏感数据信息不安全。
Post提交对于敏感信息安全。
3.get提交不支持大数据,因为地址栏存储体积有限。
Post支持大数据提交。
4.get提交将信息封装到了请求消息的请求行中。
Post提交将提交的信息封装到了请求体中。
服务端get和post的区别。
如果出现将中文提交到Tomcat服务器,会出现乱码,通过iso8859-1进行编码,再用指定的中文码表解码即可。这种方式对get和post都有效。
但是对于post提交方式提交的中文还有一种解决办法,就是直接使用服务端一个对象,requst对象的setCharacterEncoding方法直接设置指定的中文码表就可以将中文数据解析出来。
这个方法只对请求提中的数据解码,所以对get方式无效。
综上所述:表单提交建议使用post
和服务端交互的三种形式:
1.地址栏直接输入url地址get方式
2.超链接get方式
3.表单get方式和poat方式。
15.服务端和客户端校验的问题。
如果客户端进行增强型的校验,为了安全性服务端还需要进行校验。
如果服务端进行增强型的校验,为了提高用户的上网体验效果和减轻服务端的压力,客户端还需要进行校验。
16.常见的其他标签。
头标签:头标签都放在<head>和</head>之间。包括:title base mate link
<title>指定浏览器标题栏显示的内容。
<base>
href属性:指定网页中所有超链接的目录,可以是本地或网络目录。
注意:结尾处一定要用/表示目录。值作用于相对路径的超链接文件。
target属性:指定打开超链接的方式。
如_blank表示所有的超链接用新窗口打开。
<mate>
Name属性:网页的描述信息。当取keywords时,content属性的内容就作为搜索引擎的关键字进行搜索。
http-equiv属性:模拟HTTP协议的相应消息头。
例:打开此网页后3秒自动跳转到新浪。
<mate http-equiv="refesh" content="3;url=http://www.sina.com.cn" />
<link>:
rel属性:描述目标文档与当前文档的关系。
type属性:文档类型。
media:指定目标文档在那种设备上起作用。
其他:
<marquee>让内容动起来。
direction属性:left right down up
Behavior属性:scroll alternate slide
<pre>:可以将文本内容按照在代码区的样子显示在页面上。
<b>加粗</b>
<i>倾斜</i>
<u>下划线</u>
X<sub>2</sub> x2
X<sub>2</sub> x2
16.标签的分类:
<div>这是一个div区域</div>
<span>这是一个span区域</span>
<p>这是一个段落</p>
标签分为两大类:
1.块级标签(元素):标签结束后有换行。
例:div p table title等
2.行内标签(元素):标签结束后没有换行。
例: font span img input select
</pre>