黑马程序员--HTML基础（10）
2013-12-21 12:07
190 查看
----------------------
ASP.Net+Android+IOS开发、.Net培训、期待与您交流！ --------------------
一.HTML
1.html概念
① 描述网页长什么样子，有什么内容的一个文本。在浏览器中查看html的方式：若是是用的是IE浏览器，在页面上点击右键-->查看源文件
② 网页分为静态页面和动态页面
静态页面：有一个html页面文件保存在服务器上，浏览器要这个页面的时候，服务器就把 这个页面发给浏览器
动态页面：服务器上没有浏览者要看的页面，而是服务器动态生成的HTML页面发给浏览器
③ HTML的结构说明
(1) 所有内容都在<.html></html>中
(2) <head></head>内放的是头部信息，是对页面的描述，不会直接显示在页面中
(3) <head></head>内的<title>中是设置页面的标题，<title>只能放在<head>中
(4) <body>是页面的主题，大部分显示内容都定义在这里（<body>标签中的bgcolor属性可以设定网页的背景颜色）
结构如下所示：
<html>
<head>
<tittle>标题</title>
</head>
<body>
显示内容
</body>
</html>
2.基本标签
→ <br></br>表示回车
→ <.p></p>表示创建段落
（注意<p>是创建段落，段落中的内容前后会有比较大的空白； <br>只是表示回车，前后没有空白）
→ <font></font>字体标签
例如： 将你好的颜色变为变成红色
<font color="red">你好</font>
→ <h>标签:html定义了一个<h1><h2><h3><h4><h5><h6>6个标签，分别表示不同大小的字体
→ <a></a>表示超链接（将<a>的target属性设定为"_blank"就可以在新的窗口打开链接）
例如： <a href="http://www.rupeng.con">如鹏网</a>
在页面上点击如鹏网即可进入页面http://www.rupeng.con
→ <center></center>表示将其中的内容居中显示
→ <img/>标签是向网页中嵌入一幅图像
它的src属相是显示图像文件的URL，也就是引用该图像文件的绝对路径和相对路径
它的alt属性是规定图片无法显示时的替代文本
它的title属性表示当鼠标放在图片上时，显示title中的值
width和height指定图片的显示大小
→ <b></b>将其中的内容表示为粗体
→ <hr/>表示横线
→ <u></u.>表示下划线
→ <div></div>表示将内容存放在层中，就可以将这些内容当成一个整体进行处理，比如整体隐藏、整体移动。相当于放到一个矩形的区块中
→<span></span>把一段内容定义成一个整体进行操作
→<ul></ul>表示无序列表
→<ol><ol>表示有序列表
→<li><li>标签是定义一个列表项目，标签用在<ul></ul>和<ol></ol>中
→<table></table>表示一个表，在内部通过<tr></tr>创建行，<tr>内部通过<td></td>创建单元格。可以将<table>中的border属性设为0来隐藏表格线
3.网页设计中的一些名词
① URL：表示自愿在网络中的地址
相对URL：表示相对于当前文档的资源
“/”表示网站根目录
“../”表示父目录（上一级目录）
“../../”表示父目录的父目录
“./”或者不写任何斜线表示相对于当前路径的目录
② 表单标签
<form></form>为表单标签，它的用处通俗的说就是让服务器作处理，让用户输入，如果要把数据提交到服务器，则需要将<input><select><textarea.>等表单元素放到<form>中
(1)<input>中的type属性的可选值有：
→ submit提交按钮:点击提交按钮就会立即提交给服务器，修改value属性可按钮的显示文本
→ button普通按钮
→ checkbox复选框:checked属性表示是否为选中，若是checked="checked"则表示已经选中
→ hidden隐藏字段
→ file文件选择框 :若是需要提交给服务器，则在<form>中的enctype必须设置为 multipart/form-data；method属性设置为post
→ password密码框
→ image图片按钮:使用src属性来指定图片的地址
→ radio单选按钮:相同name属性的为一组,同一组之间radio设定不同的value值，同一组之间选择互斥
→ reset重置
→ text文本框:size属性为宽度，maxlength表示输入的的最大长度，readonly表示只读属性
(2)<selsect></selsect>用来创建类似于winform中的combobox或者listbox，Select中的项是option（option中也可以有value值，它指定该项真正代表的值）
如果select标签中的size属性大于1则表示为listbox， 可以通过multiple设置为多选的listbox
例如1：<select>
<option>北京</option>
<option>上海</option>
<option>上海</option>
</select>
这样生成的是一个combox形式
例如2：
<select size="3">
<option>北京</option>
<option>上海</option>
<option>上海</option>
</select>
这样生成的是一个listbox形式
此外：可以将一个option设置为选中
例如3.将北京设置为选中
<option selected="selected">北京<option>
(3)<textarea></textarea>用来创建多行文本，它的cols和rows属性表
abcd
示为列数和行数
例如：设计一个100列10行的多行文本，并在开始出注明：请在此处开始写
<textarea cols="100" rows="10">请在此处开始写</textarea>
(4)<label></label>是单击修饰文本的时候，input能够得到焦点。它的for属性指定要修饰的空间的id
例如：当单击”姓名”二字的时候，焦点就聚集在随后的文本框上了
<label for="name">姓名：<input id="name" type="text" /></label>
(5)<fieldset></fieldset>将空间划分到一个区域
例如：
<fieldset>
<legend>常用</legend>
<input type="text"/>
<input type="text" />
<input type="text" />
</fieldset>
<legend>表示区域的名字，它之后的就是各个控件的内容
4.层叠样式表：CSS
① 它是用来没话页面用的额，可以对页面元素进行更精细的设置，样式主要描述元素的字体颜色、背景颜色和边哭
② CSS的三种使用方式：
(1) 元素内联：直接将样式写入元素的style属性中
例如：将文本框的背景颜色设置为红色
<input type="text" value="124" style="background-color:Red"/>
(2) 页面嵌入：它是在<head></head>设置
例如1：将页面中所有的input中的背景颜色设为灰色，边框颜色设为绿色
在<head></head>中写入：
<style type="text/css">
input{background-color:Gray;border-color:Green}
</style>
在<body></body>中：
<input type="text" value="124" style="background-color:Red"/>
<input type="button"value="登录" />
<input type="text" value="123" />
<input type="password"/>
(3)外部引用：新建一个样式表，将css内容写入CSS后缀文件中
在CSS中：input{background-color:Red}
p{ color:Blue}
在html文件中：
<link type="text/css" rel="stylesheet" href=引用的哪个CSS>
③ 样式选择器：样式适用于哪些元素，它有三种方法
→标签选择器：对于指定的表用统一的方式
例如：将页面中所有的input中的背景颜色设为灰色，边框颜色设为绿色
<style type="text/css">
input{background-color:Gray;border-color:Green}
</style>
→Class选择器：以定义一个命名的样式，然后在用到它的时候，设定元素的class属性为样式的名称
例如：将“你好呀 你在哪里呢”设置成一个区域块，并让其背景颜色设为黄色，字体加大
<style type="text/css">
.warning{background-color:Yellow}
.heilight{font-size:xx-large}
</style>
此处的样式名称为warning和heilight
<div class="warning heilight">你好呀 你在哪里呢</div>
可以同时使用多个样式，中间用空格隔开
→Id选择器：为指定id的元素设定样式，id前面加#
例如：将文本框中的字体颜色显示为黄色
<style type="text/css">
#username
{
color:Yellow;
} </style>
<input id="username" type="text" value="1234" />
----------------------
ASP.Net+Android+IOS开发、.Net培训、期待与您交流！ --------------------
ASP.Net+Android+IOS开发、.Net培训、期待与您交流！ --------------------
一.HTML
1.html概念
① 描述网页长什么样子，有什么内容的一个文本。在浏览器中查看html的方式：若是是用的是IE浏览器，在页面上点击右键-->查看源文件
② 网页分为静态页面和动态页面
静态页面：有一个html页面文件保存在服务器上，浏览器要这个页面的时候，服务器就把 这个页面发给浏览器
动态页面：服务器上没有浏览者要看的页面，而是服务器动态生成的HTML页面发给浏览器
③ HTML的结构说明
(1) 所有内容都在<.html></html>中
(2) <head></head>内放的是头部信息，是对页面的描述，不会直接显示在页面中
(3) <head></head>内的<title>中是设置页面的标题，<title>只能放在<head>中
(4) <body>是页面的主题，大部分显示内容都定义在这里（<body>标签中的bgcolor属性可以设定网页的背景颜色）
结构如下所示：
<html>
<head>
<tittle>标题</title>
</head>
<body>
显示内容
</body>
</html>
2.基本标签
→ <br></br>表示回车
→ <.p></p>表示创建段落
（注意<p>是创建段落，段落中的内容前后会有比较大的空白； <br>只是表示回车，前后没有空白）
→ <font></font>字体标签
例如： 将你好的颜色变为变成红色
<font color="red">你好</font>
→ <h>标签:html定义了一个<h1><h2><h3><h4><h5><h6>6个标签，分别表示不同大小的字体
→ <a></a>表示超链接（将<a>的target属性设定为"_blank"就可以在新的窗口打开链接）
例如： <a href="http://www.rupeng.con">如鹏网</a>
在页面上点击如鹏网即可进入页面http://www.rupeng.con
→ <center></center>表示将其中的内容居中显示
→ <img/>标签是向网页中嵌入一幅图像
它的src属相是显示图像文件的URL，也就是引用该图像文件的绝对路径和相对路径
它的alt属性是规定图片无法显示时的替代文本
它的title属性表示当鼠标放在图片上时，显示title中的值
width和height指定图片的显示大小
→ <b></b>将其中的内容表示为粗体
→ <hr/>表示横线
→ <u></u.>表示下划线
→ <div></div>表示将内容存放在层中，就可以将这些内容当成一个整体进行处理，比如整体隐藏、整体移动。相当于放到一个矩形的区块中
→<span></span>把一段内容定义成一个整体进行操作
→<ul></ul>表示无序列表
→<ol><ol>表示有序列表
→<li><li>标签是定义一个列表项目，标签用在<ul></ul>和<ol></ol>中
→<table></table>表示一个表，在内部通过<tr></tr>创建行，<tr>内部通过<td></td>创建单元格。可以将<table>中的border属性设为0来隐藏表格线
3.网页设计中的一些名词
① URL：表示自愿在网络中的地址
相对URL：表示相对于当前文档的资源
“/”表示网站根目录
“../”表示父目录（上一级目录）
“../../”表示父目录的父目录
“./”或者不写任何斜线表示相对于当前路径的目录
② 表单标签
<form></form>为表单标签，它的用处通俗的说就是让服务器作处理，让用户输入，如果要把数据提交到服务器，则需要将<input><select><textarea.>等表单元素放到<form>中
(1)<input>中的type属性的可选值有：
→ submit提交按钮:点击提交按钮就会立即提交给服务器，修改value属性可按钮的显示文本
→ button普通按钮
→ checkbox复选框:checked属性表示是否为选中，若是checked="checked"则表示已经选中
→ hidden隐藏字段
→ file文件选择框 :若是需要提交给服务器，则在<form>中的enctype必须设置为 multipart/form-data；method属性设置为post
→ password密码框
→ image图片按钮:使用src属性来指定图片的地址
→ radio单选按钮:相同name属性的为一组,同一组之间radio设定不同的value值，同一组之间选择互斥
→ reset重置
→ text文本框:size属性为宽度，maxlength表示输入的的最大长度，readonly表示只读属性
(2)<selsect></selsect>用来创建类似于winform中的combobox或者listbox，Select中的项是option（option中也可以有value值，它指定该项真正代表的值）
如果select标签中的size属性大于1则表示为listbox， 可以通过multiple设置为多选的listbox
例如1：<select>
<option>北京</option>
<option>上海</option>
<option>上海</option>
</select>
这样生成的是一个combox形式
例如2：
<select size="3">
<option>北京</option>
<option>上海</option>
<option>上海</option>
</select>
这样生成的是一个listbox形式
此外：可以将一个option设置为选中
例如3.将北京设置为选中
<option selected="selected">北京<option>
(3)<textarea></textarea>用来创建多行文本，它的cols和rows属性表
abcd
示为列数和行数
例如：设计一个100列10行的多行文本，并在开始出注明：请在此处开始写
<textarea cols="100" rows="10">请在此处开始写</textarea>
(4)<label></label>是单击修饰文本的时候，input能够得到焦点。它的for属性指定要修饰的空间的id
例如：当单击”姓名”二字的时候，焦点就聚集在随后的文本框上了
<label for="name">姓名：<input id="name" type="text" /></label>
(5)<fieldset></fieldset>将空间划分到一个区域
例如：
<fieldset>
<legend>常用</legend>
<input type="text"/>
<input type="text" />
<input type="text" />
</fieldset>
<legend>表示区域的名字，它之后的就是各个控件的内容
4.层叠样式表：CSS
① 它是用来没话页面用的额，可以对页面元素进行更精细的设置，样式主要描述元素的字体颜色、背景颜色和边哭
② CSS的三种使用方式：
(1) 元素内联：直接将样式写入元素的style属性中
例如：将文本框的背景颜色设置为红色
<input type="text" value="124" style="background-color:Red"/>
(2) 页面嵌入：它是在<head></head>设置
例如1：将页面中所有的input中的背景颜色设为灰色，边框颜色设为绿色
在<head></head>中写入：
<style type="text/css">
input{background-color:Gray;border-color:Green}
</style>
在<body></body>中：
<input type="text" value="124" style="background-color:Red"/>
<input type="button"value="登录" />
<input type="text" value="123" />
<input type="password"/>
(3)外部引用：新建一个样式表，将css内容写入CSS后缀文件中
在CSS中：input{background-color:Red}
p{ color:Blue}
在html文件中：
<link type="text/css" rel="stylesheet" href=引用的哪个CSS>
③ 样式选择器：样式适用于哪些元素，它有三种方法
→标签选择器：对于指定的表用统一的方式
例如：将页面中所有的input中的背景颜色设为灰色，边框颜色设为绿色
<style type="text/css">
input{background-color:Gray;border-color:Green}
</style>
→Class选择器：以定义一个命名的样式，然后在用到它的时候，设定元素的class属性为样式的名称
例如：将“你好呀 你在哪里呢”设置成一个区域块，并让其背景颜色设为黄色，字体加大
<style type="text/css">
.warning{background-color:Yellow}
.heilight{font-size:xx-large}
</style>
此处的样式名称为warning和heilight
<div class="warning heilight">你好呀 你在哪里呢</div>
可以同时使用多个样式，中间用空格隔开
→Id选择器：为指定id的元素设定样式，id前面加#
例如：将文本框中的字体颜色显示为黄色
<style type="text/css">
#username
{
color:Yellow;
} </style>
<input id="username" type="text" value="1234" />
----------------------
ASP.Net+Android+IOS开发、.Net培训、期待与您交流！ --------------------
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 黑马程序员 HTML基础
- 黑马程序员——Java语言基础——10.反射
- 黑马程序员--HTML基础学习
- 黑马程序员_Java基础[10]_主函数main、数组、static、静态代码块、帮助文档
- 黑马程序员—HTML基础
- HTML HTML 基础 (stage1-10)
- HTML&CSS基础学习笔记10-添加链接
- 黑马程序员_基础html css 学习(二)
- 黑马程序员--html基础
- 黑马程序员_ios基础总结10_内存管理
- 黑马程序员_HTML及JavaScript基础重点
- 黑马程序员-html+css基础知识总结
- 黑马程序员---------踏踏实实学基础之HTML
- 黑马程序员html相关基础
- 黑马程序员_基础html css 学习(一)
- 黑马程序员-HTML基础
- 黑马程序员_Java基础10
- 黑马程序员--HTML基础标签
- 黑马程序员 -- Java基础学习（10）
- 背水一战 Windows 10 (63) - 控件（WebView）: 基础知识, 加载 html, http, https, ms-appx-web:///, embedded resource, ms-appdata:///, ms-local-stream://