黑马程序员_HTML
来源：互联网 发布：common.js是什么文件 编辑：程序博客网 时间：2024/04/28 19:16
----------- android培训、java培训、java学习型技术博客、期待与您交流！ ------------
HTML：Hypertext Marked Language
即超文本标记语言,是一种用来制作超文本文档的简单标记语言。
超文本传输协议规定了浏览器在运行 HTML 文档时所遵循的规则和进行的操作.
创建一个HTML文档，需要两个工具，一个是HTML编辑器，一个WEB浏览器。
HTML编辑器是用于生成和保存THML文档的应用程序。
WEB浏览器是用来打开WEB网页文件，提供给我们查看WEB资源的客户端程序。
----------------------------------------------------------------------------------------
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
-----------------------------------------------------------------------------------
多媒体的引用
背景音乐
<bgsound src="URL" loop="*"> loop设定循环的次数,loop=infinete表示不断循环到关闭为止
插入图象
<img src="Images/yoyebina.gif" alt="我的图片" bordor="1">
img标记的常用属性:src,alt.height,width,border,hspace(图片与左右两端文本距离),vspace(图片与上下两端文本距离) ,align
插入视频
<img src="yoyebina.avi">
通用标记
<object 属性=属性值></object>
插入动画
<embed src="yoyebina.swf/midi"></embed>
----------- android培训、java培训、java学习型技术博客、期待与您交流！ ------------
HTML：Hypertext Marked Language
即超文本标记语言,是一种用来制作超文本文档的简单标记语言。
超文本传输协议规定了浏览器在运行 HTML 文档时所遵循的规则和进行的操作.
创建一个HTML文档，需要两个工具，一个是HTML编辑器，一个WEB浏览器。
HTML编辑器是用于生成和保存THML文档的应用程序。
WEB浏览器是用来打开WEB网页文件，提供给我们查看WEB资源的客户端程序。
----------------------------------------------------------------------------------------
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
-----------------------------------------------------------------------------------
多媒体的引用
背景音乐
<bgsound src="URL" loop="*"> loop设定循环的次数,loop=infinete表示不断循环到关闭为止
插入图象
<img src="Images/yoyebina.gif" alt="我的图片" bordor="1">
img标记的常用属性:src,alt.height,width,border,hspace(图片与左右两端文本距离),vspace(图片与上下两端文本距离) ,align
插入视频
<img src="yoyebina.avi">
通用标记
<object 属性=属性值></object>
插入动画
<embed src="yoyebina.swf/midi"></embed>
----------- android培训、java培训、java学习型技术博客、期待与您交流！ ------------
- 黑马程序员_html
- 黑马程序员_HTML基础
- 黑马程序员_html
- 黑马程序员_html语言
- 黑马程序员_HTML学习
- 黑马程序员_HTML、CSS
- 黑马程序员_html基础
- 黑马程序员_HTML
- 黑马程序员_html 语言
- 黑马程序员_HTML
- 黑马程序员_HTML基础
- 黑马程序员_HTML
- 黑马程序员_HTML表单标签
- 黑马程序员_HTML css JavaScript
- 黑马程序员_Html常用标签
- 黑马程序员_HTML重点标签
- 黑马程序员_HTML、JavaScrip、DOM
- 黑马程序员_HTML、JavaScrip、DOM
- ROWID
- Creating Multiple APKs for Different Screen Sizes 创建多个APKs为不同的屏幕尺寸
- 分析netcat程序代码
- Creating Multiple APKs for Different GL Textures 创建多个APK给不同的GL结构
- c语言之普利姆算法（prim）
- 黑马程序员_HTML
- 在iOS开发中使用FMDB
- Tomcat6的类加载顺序
- 虚拟链路历史版本
- 再续前缘——三次面试与两份工作的总结
- 《OpenCL异构计算》学习笔记
- 地址栏输JS代码，打造在线便笺 编辑器
- ARM Cortex-A系列处理器
- Android笔记0101_无标题、显示全屏 ( 有参考别人文章 )
