黑马程序员---------踏踏实实学基础之HTML
2013-10-22 20:01
246 查看
----------------------
ASP.Net+Android+IOS开发、.Net培训、期待与您交流！ ----------------------
HTML的使用要依托浏览器这样的工具来使用，浏览器能够接受用户的操作，向服务器发送用户请求HTML（网页）的内容，然后显示给用户可视化强、可理解的页面。
静态页面与动态页面的区别，在于静态页面有html文件保存在服务器上，通过浏览器与服务器之间的通信调用页面，而动态页面是服务器动态生成的html页面发送给浏览器，开发html的工具很多，程序员一般使用visual studio工具来开发html网页，但需要程序与能熟练的使用不在有提示代码的情况下也能做出Html网页（对于初学者的我来说。。有难度）。
Html的结构，在vs中新建一个编译html的文件，其在创建接口的时候包含一下内容
<html>
<head>
<title>设置页面的标题（不设置时显示无标题文档）</title>
</head>存放开始信息，对网页页面的描述不会直接显示在页面上
<body>
正文内容
</body>
</html>
以上内容所有的html页面都包含这些内容。需要写完全。
标签的初始
Body标签中有bgcolor属性，可以设定网页的颜色 设置方法如下例：
<body color=”read”></body>
Html和xml的联系和区别
1、 html的属性值要用配对的符号标注起来
2、 注释都用<！----内容----->来标注
3、 Html和xml中使用的特殊字符相同
特殊字符如下：
< 小于号
> 大于号
&nbps 空格
4、单标签/双标签
单标签一般独立表示一个对像，形式如下：
<标签 属性1=”值1”…….属性n=”值n” />
如：<hr />或<hr align="left" width="10"size=”10”/>
双标签一般成对出现，对双标签内的内容进行设置其格式，形式如下：
<标签属性1=“值1”…….属性n=“值n”> 内容 </标签>
如：<font color="read"size="14" face="宋体"> aaaa</font>
文字格式常用标签：
<html>…</html> 用于标记HTML文档的开始和结束
<head>…</head> 用于写入标题和其他说明信息
<body>…</body> 网页的主体所在，用于写入文本、图像和链接。
<br/> 回车
<p/> 段落
<center>文本</center> 文本居中显示
H标签 html定义了<h1></h1>到<h6></h6>六个h标签来表示不同大小的字体
<b>a</b> 粗体
<font></font> 字体标签
<ahref =”链接地址” target=”_blank” title=”说明” >链接中文</a> （target设定链接打开方式，_blank表示在新窗口打开）站内引用使用相对URL:/表示网站根目录，../表示父目录，./表示当前目录。（此方法的好处是网站域名改变，不会影响）
<area>...</area> 标签用于标记区域
<table><tr><td></td></tr></table>标签用于创建表格（tr表示行，td表示单元格，表头的td可用th代替，表示粗体居中）cellpadding(table属性，单元格填充)cellspacing(table属性，单元格间距)rowspan(tr属性，跨行，值为要跨的行数) colspan(td属性，跨列，值为要跨的列数)
<imagesrc=”.jpg”></image> 链接图片
HTML中子标签默认继承父标签设定，如果自己单独设定，则会覆盖父标签的设定。
常用的标签属性
bgcolor 背景颜色（red,black，自选色等）
alt 图片无法显示时的文本
border 边框调整
Color 颜色（同上）
Size 大小、控件宽度（数字即可）
Width 宽度
Height 高度
Face 字体（宋体，黑体，楷体，等等）
target 目标（一般设定值为_blank，新窗口打开）
Align 水平对齐（left,right,center）
Valign 垂直对齐（top,bottom，middle）
Value 设定初始值
Maxlength 限制长度
Readonly 只读（值为readonly,单值属性）
Checked 初始化选中状态（值为checked，单值属性）
表单
用户在网页上进行注册等活动时，收集用户的信息，收集购买物品所需的信息等等。从而实现与用户的交互。每一个表单都有一个“提交”(submit)按钮，所填写的信息就发送WEB服务器，由服务器负责处理提交的信息。
表单的标签定义为:<form>，标签同时具有两个属性分别是<action>属性和<method>属性；<action>属性是处理该表单的程序和路径的，<method>属性的值有”post”和”get”两种。分别显示为明文方式或者后台数据的方式显示。表单中常用的元素有：<form>
4000
表单区域、<input>输入文本、<textarea>文本域、<select>选择框。
表单中的input标签代表可以输入元素，重要的属性有type属性，指定表单中的元素类型。常用的值有：text（文本）、password（密码）、checkbox（选择框）、file等。默认值为text。在使用file值时要求设定<form>标签的enctype的值为"multipart/form-data",method属性设置为：post。
表单中的其他属性还有：
name属性 指定表单元素的名称
value属性 指定表单元素初始值
size属性 指定表单元素的显示长度
src属性 标识图片的位置
选择元素标签select
Select标签为下拉列表框combobox控件，设定它的size属性大于1，或者设置为multiple=”multiple”。 Select标签中的每一项用<option>...</option>标签来表示，即设定可选值。设定其属性selected=“selected”（单值属性）来设定默认选中项。<optgroup>...<optgroup> 分组标签
<select name="city"size="10">
<optgroup label="三大主要城市">
<option>北京</option>
<optionselected="selected">上海</option>
<option >广州</option>
</optgroup>
<optgroup label="中部大都会">
<option>太原</option>
<option>西安</option>
</optgroup>
<optgroup label="新兴西部城市">
<option>乌鲁木齐</option>
<option>拉萨</option>
<option>西宁</option>
<option>成都</option>
<option>昆明</option>
</optgroup>
</select>
代码生成如图：
Cols和rows属性用与显示多行文本。
Lable标签可以使其内部文字产生关系：例如：<lable>男<inputtype=”checkbox”></lable>在标签中当用户点击到lable标签的时候，checkbox对话框中会显示“对号”。Fileset标签用于将一些控件划分区域。Legend标签用于显示标题。Div标签 将内容放在一个矩阵块中，影响布局操作。Span标签 跟div标签类似，但是它不会影响布局操作。
CSS（层叠样式表）是用来美化网页的。可以对页面元素进行更精致的设置，样式主要描述元素的字体，背景颜色，边框等。
三种使用方式： 元素内联，页面嵌入，外部引用
元素内联：直接将样式写入元素标签中，一般适用于样式没有复用的场合。
页面嵌入：当页面上某一类元素标签都是一种风格时使用。
外部引用：将固定的样式风格写入一个CSS文件中，需要的时候直接引用，这样复用的范围更广，适用于多个页面复用。（新建web-样式表，使用时在网页头部添加引用）一般情况下只需要改变href中的引用即可。CSS中的计量单位： px(像素) 、30%（百分比）、em(相对单位）。
常见样式：
设置边框：border-color/border-style/border-width/
设置可见：display（值为none时元素不显示）
设置鼠标指针显示：cursor(常设值有：pointer（手掌）、wait(沙漏))，可以添加url(cur或ani格式的图标自设指针形状)
设置链接：url(链接地址)例如：<inputtype="button" style="background-image:url('Sample%20Pictures/1.gif');height:182px; width:328px;cursor:url('Sample%20Pictures/1.gif')"/>
样式选择器
针对页面嵌入和外部引用，因为其使用范围扩大，所以引申出样式选择器的概念，样式选择器有三种。
1）标签选择器，根据不用的元素标签使用。
input{border-width:thick;width:300px;height:100px;}
div{font-size:x-large;color:Red;}
2）class选择器，命名一个样式，然后在需要使用的元素标签中设该名称为class属性的值表示引用该种样式。可以设多种class，用空格隔开（<inputtype="button" class="banlove"value="猜猜我是谁"/>），样式名称前加‘.’。
----------------------
ASP.Net+Android+IOS开发、.Net培训、期待与您交流！ ----------------------
ASP.Net+Android+IOS开发、.Net培训、期待与您交流！ ----------------------
HTML的使用要依托浏览器这样的工具来使用，浏览器能够接受用户的操作，向服务器发送用户请求HTML（网页）的内容，然后显示给用户可视化强、可理解的页面。
静态页面与动态页面的区别，在于静态页面有html文件保存在服务器上，通过浏览器与服务器之间的通信调用页面，而动态页面是服务器动态生成的html页面发送给浏览器，开发html的工具很多，程序员一般使用visual studio工具来开发html网页，但需要程序与能熟练的使用不在有提示代码的情况下也能做出Html网页（对于初学者的我来说。。有难度）。
Html的结构，在vs中新建一个编译html的文件，其在创建接口的时候包含一下内容
<html>
<head>
<title>设置页面的标题（不设置时显示无标题文档）</title>
</head>存放开始信息，对网页页面的描述不会直接显示在页面上
<body>
正文内容
</body>
</html>
以上内容所有的html页面都包含这些内容。需要写完全。
标签的初始
Body标签中有bgcolor属性，可以设定网页的颜色 设置方法如下例：
<body color=”read”></body>
Html和xml的联系和区别
1、 html的属性值要用配对的符号标注起来
2、 注释都用<！----内容----->来标注
3、 Html和xml中使用的特殊字符相同
特殊字符如下：
< 小于号
> 大于号
&nbps 空格
4、单标签/双标签
单标签一般独立表示一个对像，形式如下：
<标签 属性1=”值1”…….属性n=”值n” />
如：<hr />或<hr align="left" width="10"size=”10”/>
双标签一般成对出现，对双标签内的内容进行设置其格式，形式如下：
<标签属性1=“值1”…….属性n=“值n”> 内容 </标签>
如：<font color="read"size="14" face="宋体"> aaaa</font>
文字格式常用标签：
<html>…</html> 用于标记HTML文档的开始和结束
<head>…</head> 用于写入标题和其他说明信息
<body>…</body> 网页的主体所在，用于写入文本、图像和链接。
<br/> 回车
<p/> 段落
<center>文本</center> 文本居中显示
H标签 html定义了<h1></h1>到<h6></h6>六个h标签来表示不同大小的字体
<b>a</b> 粗体
<font></font> 字体标签
<ahref =”链接地址” target=”_blank” title=”说明” >链接中文</a> （target设定链接打开方式，_blank表示在新窗口打开）站内引用使用相对URL:/表示网站根目录，../表示父目录，./表示当前目录。（此方法的好处是网站域名改变，不会影响）
<area>...</area> 标签用于标记区域
<table><tr><td></td></tr></table>标签用于创建表格（tr表示行，td表示单元格，表头的td可用th代替，表示粗体居中）cellpadding(table属性，单元格填充)cellspacing(table属性，单元格间距)rowspan(tr属性，跨行，值为要跨的行数) colspan(td属性，跨列，值为要跨的列数)
<imagesrc=”.jpg”></image> 链接图片
HTML中子标签默认继承父标签设定，如果自己单独设定，则会覆盖父标签的设定。
常用的标签属性
bgcolor 背景颜色（red,black，自选色等）
alt 图片无法显示时的文本
border 边框调整
Color 颜色（同上）
Size 大小、控件宽度（数字即可）
Width 宽度
Height 高度
Face 字体（宋体，黑体，楷体，等等）
target 目标（一般设定值为_blank，新窗口打开）
Align 水平对齐（left,right,center）
Valign 垂直对齐（top,bottom，middle）
Value 设定初始值
Maxlength 限制长度
Readonly 只读（值为readonly,单值属性）
Checked 初始化选中状态（值为checked，单值属性）
表单
用户在网页上进行注册等活动时，收集用户的信息，收集购买物品所需的信息等等。从而实现与用户的交互。每一个表单都有一个“提交”(submit)按钮，所填写的信息就发送WEB服务器，由服务器负责处理提交的信息。
表单的标签定义为:<form>，标签同时具有两个属性分别是<action>属性和<method>属性；<action>属性是处理该表单的程序和路径的，<method>属性的值有”post”和”get”两种。分别显示为明文方式或者后台数据的方式显示。表单中常用的元素有：<form>
4000
表单区域、<input>输入文本、<textarea>文本域、<select>选择框。
表单中的input标签代表可以输入元素，重要的属性有type属性，指定表单中的元素类型。常用的值有：text（文本）、password（密码）、checkbox（选择框）、file等。默认值为text。在使用file值时要求设定<form>标签的enctype的值为"multipart/form-data",method属性设置为：post。
表单中的其他属性还有：
name属性 指定表单元素的名称
value属性 指定表单元素初始值
size属性 指定表单元素的显示长度
src属性 标识图片的位置
选择元素标签select
Select标签为下拉列表框combobox控件，设定它的size属性大于1，或者设置为multiple=”multiple”。 Select标签中的每一项用<option>...</option>标签来表示，即设定可选值。设定其属性selected=“selected”（单值属性）来设定默认选中项。<optgroup>...<optgroup> 分组标签
<select name="city"size="10">
<optgroup label="三大主要城市">
<option>北京</option>
<optionselected="selected">上海</option>
<option >广州</option>
</optgroup>
<optgroup label="中部大都会">
<option>太原</option>
<option>西安</option>
</optgroup>
<optgroup label="新兴西部城市">
<option>乌鲁木齐</option>
<option>拉萨</option>
<option>西宁</option>
<option>成都</option>
<option>昆明</option>
</optgroup>
</select>
代码生成如图：
Cols和rows属性用与显示多行文本。
Lable标签可以使其内部文字产生关系：例如：<lable>男<inputtype=”checkbox”></lable>在标签中当用户点击到lable标签的时候，checkbox对话框中会显示“对号”。Fileset标签用于将一些控件划分区域。Legend标签用于显示标题。Div标签 将内容放在一个矩阵块中，影响布局操作。Span标签 跟div标签类似，但是它不会影响布局操作。
CSS（层叠样式表）是用来美化网页的。可以对页面元素进行更精致的设置，样式主要描述元素的字体，背景颜色，边框等。
三种使用方式： 元素内联，页面嵌入，外部引用
元素内联：直接将样式写入元素标签中，一般适用于样式没有复用的场合。
页面嵌入：当页面上某一类元素标签都是一种风格时使用。
外部引用：将固定的样式风格写入一个CSS文件中，需要的时候直接引用，这样复用的范围更广，适用于多个页面复用。（新建web-样式表，使用时在网页头部添加引用）一般情况下只需要改变href中的引用即可。CSS中的计量单位： px(像素) 、30%（百分比）、em(相对单位）。
常见样式：
设置边框：border-color/border-style/border-width/
设置可见：display（值为none时元素不显示）
设置鼠标指针显示：cursor(常设值有：pointer（手掌）、wait(沙漏))，可以添加url(cur或ani格式的图标自设指针形状)
设置链接：url(链接地址)例如：<inputtype="button" style="background-image:url('Sample%20Pictures/1.gif');height:182px; width:328px;cursor:url('Sample%20Pictures/1.gif')"/>
样式选择器
针对页面嵌入和外部引用，因为其使用范围扩大，所以引申出样式选择器的概念，样式选择器有三种。
1）标签选择器，根据不用的元素标签使用。
input{border-width:thick;width:300px;height:100px;}
div{font-size:x-large;color:Red;}
2）class选择器，命名一个样式，然后在需要使用的元素标签中设该名称为class属性的值表示引用该种样式。可以设多种class，用空格隔开（<inputtype="button" class="banlove"value="猜猜我是谁"/>），样式名称前加‘.’。
----------------------
ASP.Net+Android+IOS开发、.Net培训、期待与您交流！ ----------------------
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 黑马程序员JS---HTML基础
- 黑马程序员--.NET笔记--HTML基础
- 黑马程序员_java基础笔记(09)...HTML基本知识、CSS、JavaScript、DOM
- 黑马程序员-------HTML基础知识
- 黑马程序员--html和css基础
- 黑马程序员---Java基础之HTML
- 黑马程序员—HTML基础
- 黑马程序员__html基础1
- 黑马程序员_HTML基础
- 黑马程序员__html基础3
- 黑马程序员--html一些基础知识小结
- 黑马程序员_HTML及JavaScript基础重点
- 黑马程序员--HTML基础
- 黑马程序员—HTML基础与加强
- 黑马程序员_基础html css 学习(二)
- 黑马程序员-自学笔记-HTML基础
- 黑马程序员-html基础知识
- 黑马程序员------入学资格------html编程基础
- 黑马程序员----------java基础加强之html注册表单
- 黑马程序员 笔记（一）——html基础