HTML笔记总结

<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>,支持h1h6.

因为标题是文本中常用内容,为了方便操作而定义的,其实就是某个字号和粗体的组合。

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提交将提交的信息封装到了请求体中。

服务端getpost的区别。

如果出现将中文提交到Tomcat服务器,会出现乱码,通过iso8859-1进行编码,再用指定的中文码表解码即可。这种方式对getpost都有效。

但是对于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>


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值