黑马程序员 HTML笔记总结
2013-01-18 18:45
197 查看
-----------
android培训、java培训、java学习型技术博客、期待与您交流！
------------
<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)" onclick="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"一个按钮" onclick="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>
-----------
android培训、java培训、java学习型技术博客、期待与您交流！
------------
android培训、java培训、java学习型技术博客、期待与您交流！
------------
<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)" onclick="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"一个按钮" onclick="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>
-----------
android培训、java培训、java学习型技术博客、期待与您交流！
------------
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 黑马程序员之HTML学习笔记:HTML相关知识总结
- 黑马程序员-自己总结的java学习笔记（3）java字符串对象。
- 黑马程序员--.Net学习日记——HTML总结
- 黑马程序员-内部类总结和笔记
- 黑马程序员——C语言学习总结笔记9月17号
- HTML常见标签学习与笔记总结
- 黑马程序员之SQL学习笔记:数据库基础知识点学习总结
- 黑马程序员之SQL学习笔记:SQL个人的小总结
- 黑马程序员_HTML常用标签总结
- tinyxml使用笔记与总结 http://www.cppblog.com/elva/archive/2008/04/24/47907.html
- HTML总结笔记
- 黑马程序员—iOS- <项目笔记>UI控件常见属性总结（上）
- 前端html与css学习笔记总结篇(超详细)
- 黑马程序员——C#基础总结笔记
- 黑马程序员_学习笔记7可变参数的应用及1.5增强for的联合使用以及反射的总结
- 黑马程序员之c#学习笔记:总结C#修饰符,成员修饰符和类修饰符
- 黑马程序员-----集合框架总结笔记一
- 【黑马程序员】 学习笔记 - Html开发
- 黑马程序员--HTML总结
- HTML笔记心法总结