html基础
2016-05-10 10:56
253 查看
Html基础:
无论什么编写语言,编程软件编写出来的网站,网页发送到浏览器被执行后都是HTML语言.
HTMLHTML由标记组成.从<Html>开始,到</Html>结束.<Html></Html>中包含两大部分分:<head></head><body></body>.<head></head>中有<title></title>标签,来显示网页的标题;脚本语言一般也放在<head></head>中.<body></body>中,用来呈现网页的具体内容.
在网页中<Form></Form>较为重要.Form表单常用来提交用户的信息,可以用在用户注册,用户登录,修改相关信息,发表留言或内容.提交信息时有两种方式,一种是get请求,一种是post请求.get请求是以查询字符串的形式提交,写在Form属性的action中.在action的值后加”?”之后加查询字符串的类型多个类型之间用”&”连接.post的提交方式可以直接在表单中添加<input type=”submit”>直接提交;也可以添加一个<input type=”Button”></input>,在Javascript脚本中先进行相应的验证后在提交,把Button的onclick()事件和Form的submit()事件相关联.我们熟知的百度和谷歌这一类搜索引擎都是用get进行提交的;要实现文件上传必须以Post为提交方式 并且设置表单属性enctype="multipart/form-data"<input
type=“file” name=“file”/>
写入标记包括9中:type类型分别是Text,Button,Radio,checkbox,Passwordhidden,image,submit,Reset,file.
单行文本框(text)的常用属性:
Name:
定义控件名称
Value 指定控件初始值
Size 指定控件的宽度
属性及说明: Maxlength 表示该文本框输入框允许输入的最大字符数
Onchange 当文本改变时要执行的函数
onselect 当控件被选中时要执行的操作
Onfocus 当文本接受焦点时要执行的操作
密码框(Password):
Name 定义控件名称
Value 指定控件初始值,该值就是浏览器一开始在文本框中的内容
Size 指定控件宽度,表示该文本输入框所能显示的最大字符数
属性:
Maxlegnth 表示该文本输入框允许用户输入的最大
按钮(Button):
普通按钮:<input type=”Button”/>
分类:
提交到服务器的按钮:<input type=”submit”/>
重置按钮: <inpue type=”Reset” />
按钮的共同属性:
Name 按钮的名称
Value 按钮表面显示的文字
共同属性: onclick 指定单击按钮后要调用的函数
Onfocus 指定按钮接受焦点时要调用的函数
单选按钮(Radio):
Name 控件名称
Value 控件的值
属性: checked 设定控件初始状态是被选中的
Onclick 控件被选择时要执行的函数
Onfocus 控件为焦点时要执行的函数
下拉列表
<select><Option></Option></select>:
Multiple 可多选
属性:
Name 控件名称
Size设置列表的高度
可输入多行的文本框:
<Textarea></Textarea>
Onchange 指定控件时要调用的函数
Onfocus 当控件接受焦点时要执行的函数
Onblur 当控件失去焦点时要执行的函数
Onselect 当控件内容被选中时要执行的函数
属性:
Name 文字区块的名称,作识别之用,将会传至CGI
Cols 文字区块的宽度
Rows 文字区块的列数,即其高度
Wrap 定义输入内容大于文本域时显示的方式
在标签中只有两个<br/>和<hr/>是单标签,其他的是双标签.
标签中可以有属性,比如:<body>标签中 bgcolor 设置背景色,text 设置文本颜色,link设置超级链接颜色,vlink 设置已使用的超级链接颜色,alink设置为正在被点击的超级链接的颜色.
连接:
本地链接:< a href =”D:\mypicture\pin.jpeg”>图片</a>
外部网络链接<a href =”http://www.baidu.com”>百度</a>
文件内部链接:< a name=”标签a ”>flag</a>
<a href=”#标签a”>转到flag初</a>
邮件链接:<a href =”mailto:cj910408@sina.cn”>阿进</a>
清单:
无序清单<ul>,有序清单<ol>,有序清单type属性:<li type=#A /a/I/i>
定义清单:
<dl> 用<dl>开始,清单条目用<dt>引导,说明用<dd>引导
页面板式:
<p>分段;<br/>换行;<center>剧中标记<hr/>水平线标记<pre>预排版标记<div>层定位标记
插入图像:
<img src=”图形文件地址”/>
图像链接:
<a href=”资源地址”><Img Src=”URL”></a>
图片的热点:
<map>和<area>
插入背景音乐:<bgsound src=”音乐地址” autostart=”true” loop=”infinite”>
<table></table>标记很实用.在做网页时经常用到,用来布局.表格可以互相嵌套,<tr></tr>表示一行,<td></td>表示一列.其中,行和列也可以嵌套表格.
框架:常用来设置网站的后台管理,各种WEB应用系统的使用界面.使用框架可以实现一个网页呈现多个窗口的效果,而且,每个窗口通过target可以相会沟通.
框架的结构:
<Frameset rows=”%,%,*” border=”数字”>
<Frame Name=”top” Src=”….Html”>
<Frame Name=”middle” Src=”….Html”>
<Frame Name=”Buttom” src=”….html”>
<Frameset>
注:在<Frameset>标记的文档中,将不再使用<body>标记
多个复杂的窗口(示例):
<Frameset rows=”20%,*” Frameborder=”0”(设置为无框架边框)>
<Frame Src=”top.Html” name=”topFrame” scrolling=”no”(不显示滚动条) Noresize=”noresize”(禁止调整框架大小)>
<Frameset cols=”20%,*”>
<frame src=”left.html” noresize=”noresize” scrolling=”no” name=”leftframe”>
<frame src=”right.html” name=”rightframe”(框架名称,便于超文本链接锚标签target属性所引用)>
</frameset>
</frameset>d
窗口间相互操作:
每个窗口起一个名字,用属性Name来定义,有了窗口的名称,还需要结合target来配合使用,target属性指定了所链接的文本出现在哪一窗口,target的值可以是Name定义的名称,也可以是:_blank(显示一个新窗口),_Self (显示在同一个窗口),_parent(显示在前一份文件的窗口),_top(显示在整个浏览器窗口)
Target示例:(target属性指定了所链接的文件出现在名称为”rithrframe”的框架里)
<a href =”right.html” target=”rightframe”>rifht页面</a>
<a href=”buy.html” target=”rithrframe”>buy页面</a>
嵌入式框架:Iframe(浮动帧标记),可以用它将一个HTML文档嵌入在一个HTML中显示 .常用来在页面上动态的显示其他系统页面的内容.
示例:
<Iframe Src=”URL” width=”x” height=”X” Frameborder=”x” Scrolling=”[Option]”></Iframe>
其中,URL是文件的路径,既可以是HTML的文件,也可以是文本,ASP等
在当今的网页中,重中之重的就是CSS了.有了CSS才使网页呈现出不同的效果,增强了用户的体验,使网页多姿多彩.
实现样式的三种方式:
外部链接CSS:在HTML文件里加一个超级连接,连接到外部的CSS文档(*.css)
内定义CSS:在HTML文件内的<head></head>之间
文本内CSS:在HTML文件的文本内容中,在需要时随时加CSS样式.
根据样式文件与网页的关联方式又分为:
连接(link)外部样式表和导入(@input)外部样式表
CSS:标记选择器,类选择器,ID选择器,符合选择器.作用范围是(或者优先级):ID选择器>类选择器>标记选择器
CSS架构:
<style type =”text/CSS”>p{color:red;font-size:30px;font-family:隶书;}</style>
无论什么编写语言,编程软件编写出来的网站,网页发送到浏览器被执行后都是HTML语言.
HTMLHTML由标记组成.从<Html>开始,到</Html>结束.<Html></Html>中包含两大部分分:<head></head><body></body>.<head></head>中有<title></title>标签,来显示网页的标题;脚本语言一般也放在<head></head>中.<body></body>中,用来呈现网页的具体内容.
在网页中<Form></Form>较为重要.Form表单常用来提交用户的信息,可以用在用户注册,用户登录,修改相关信息,发表留言或内容.提交信息时有两种方式,一种是get请求,一种是post请求.get请求是以查询字符串的形式提交,写在Form属性的action中.在action的值后加”?”之后加查询字符串的类型多个类型之间用”&”连接.post的提交方式可以直接在表单中添加<input type=”submit”>直接提交;也可以添加一个<input type=”Button”></input>,在Javascript脚本中先进行相应的验证后在提交,把Button的onclick()事件和Form的submit()事件相关联.我们熟知的百度和谷歌这一类搜索引擎都是用get进行提交的;要实现文件上传必须以Post为提交方式 并且设置表单属性enctype="multipart/form-data"<input
type=“file” name=“file”/>
写入标记包括9中:type类型分别是Text,Button,Radio,checkbox,Passwordhidden,image,submit,Reset,file.
单行文本框(text)的常用属性:
Name:
定义控件名称
Value 指定控件初始值
Size 指定控件的宽度
属性及说明: Maxlength 表示该文本框输入框允许输入的最大字符数
Onchange 当文本改变时要执行的函数
onselect 当控件被选中时要执行的操作
Onfocus 当文本接受焦点时要执行的操作
密码框(Password):
Name 定义控件名称
Value 指定控件初始值,该值就是浏览器一开始在文本框中的内容
Size 指定控件宽度,表示该文本输入框所能显示的最大字符数
属性:
Maxlegnth 表示该文本输入框允许用户输入的最大
按钮(Button):
普通按钮:<input type=”Button”/>
分类:
提交到服务器的按钮:<input type=”submit”/>
重置按钮: <inpue type=”Reset” />
按钮的共同属性:
Name 按钮的名称
Value 按钮表面显示的文字
共同属性: onclick 指定单击按钮后要调用的函数
Onfocus 指定按钮接受焦点时要调用的函数
单选按钮(Radio):
Name 控件名称
Value 控件的值
属性: checked 设定控件初始状态是被选中的
Onclick 控件被选择时要执行的函数
Onfocus 控件为焦点时要执行的函数
下拉列表
<select><Option></Option></select>:
Multiple 可多选
属性:
Name 控件名称
Size设置列表的高度
可输入多行的文本框:
<Textarea></Textarea>
Onchange 指定控件时要调用的函数
Onfocus 当控件接受焦点时要执行的函数
Onblur 当控件失去焦点时要执行的函数
Onselect 当控件内容被选中时要执行的函数
属性:
Name 文字区块的名称,作识别之用,将会传至CGI
Cols 文字区块的宽度
Rows 文字区块的列数,即其高度
Wrap 定义输入内容大于文本域时显示的方式
在标签中只有两个<br/>和<hr/>是单标签,其他的是双标签.
标签中可以有属性,比如:<body>标签中 bgcolor 设置背景色,text 设置文本颜色,link设置超级链接颜色,vlink 设置已使用的超级链接颜色,alink设置为正在被点击的超级链接的颜色.
连接:
本地链接:< a href =”D:\mypicture\pin.jpeg”>图片</a>
外部网络链接<a href =”http://www.baidu.com”>百度</a>
文件内部链接:< a name=”标签a ”>flag</a>
<a href=”#标签a”>转到flag初</a>
邮件链接:<a href =”mailto:cj910408@sina.cn”>阿进</a>
清单:
无序清单<ul>,有序清单<ol>,有序清单type属性:<li type=#A /a/I/i>
定义清单:
<dl> 用<dl>开始,清单条目用<dt>引导,说明用<dd>引导
页面板式:
<p>分段;<br/>换行;<center>剧中标记<hr/>水平线标记<pre>预排版标记<div>层定位标记
插入图像:
<img src=”图形文件地址”/>
图像链接:
<a href=”资源地址”><Img Src=”URL”></a>
图片的热点:
<map>和<area>
插入背景音乐:<bgsound src=”音乐地址” autostart=”true” loop=”infinite”>
<table></table>标记很实用.在做网页时经常用到,用来布局.表格可以互相嵌套,<tr></tr>表示一行,<td></td>表示一列.其中,行和列也可以嵌套表格.
框架:常用来设置网站的后台管理,各种WEB应用系统的使用界面.使用框架可以实现一个网页呈现多个窗口的效果,而且,每个窗口通过target可以相会沟通.
框架的结构:
<Frameset rows=”%,%,*” border=”数字”>
<Frame Name=”top” Src=”….Html”>
<Frame Name=”middle” Src=”….Html”>
<Frame Name=”Buttom” src=”….html”>
<Frameset>
注:在<Frameset>标记的文档中,将不再使用<body>标记
多个复杂的窗口(示例):
<Frameset rows=”20%,*” Frameborder=”0”(设置为无框架边框)>
<Frame Src=”top.Html” name=”topFrame” scrolling=”no”(不显示滚动条) Noresize=”noresize”(禁止调整框架大小)>
<Frameset cols=”20%,*”>
<frame src=”left.html” noresize=”noresize” scrolling=”no” name=”leftframe”>
<frame src=”right.html” name=”rightframe”(框架名称,便于超文本链接锚标签target属性所引用)>
</frameset>
</frameset>d
窗口间相互操作:
每个窗口起一个名字,用属性Name来定义,有了窗口的名称,还需要结合target来配合使用,target属性指定了所链接的文本出现在哪一窗口,target的值可以是Name定义的名称,也可以是:_blank(显示一个新窗口),_Self (显示在同一个窗口),_parent(显示在前一份文件的窗口),_top(显示在整个浏览器窗口)
Target示例:(target属性指定了所链接的文件出现在名称为”rithrframe”的框架里)
<a href =”right.html” target=”rightframe”>rifht页面</a>
<a href=”buy.html” target=”rithrframe”>buy页面</a>
嵌入式框架:Iframe(浮动帧标记),可以用它将一个HTML文档嵌入在一个HTML中显示 .常用来在页面上动态的显示其他系统页面的内容.
示例:
<Iframe Src=”URL” width=”x” height=”X” Frameborder=”x” Scrolling=”[Option]”></Iframe>
其中,URL是文件的路径,既可以是HTML的文件,也可以是文本,ASP等
在当今的网页中,重中之重的就是CSS了.有了CSS才使网页呈现出不同的效果,增强了用户的体验,使网页多姿多彩.
实现样式的三种方式:
外部链接CSS:在HTML文件里加一个超级连接,连接到外部的CSS文档(*.css)
内定义CSS:在HTML文件内的<head></head>之间
文本内CSS:在HTML文件的文本内容中,在需要时随时加CSS样式.
根据样式文件与网页的关联方式又分为:
连接(link)外部样式表和导入(@input)外部样式表
CSS:标记选择器,类选择器,ID选择器,符合选择器.作用范围是(或者优先级):ID选择器>类选择器>标记选择器
CSS架构:
<style type =”text/CSS”>p{color:red;font-size:30px;font-family:隶书;}</style>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- html知识点总结(二)
- html知识点总结
- C#正则提取HTML中img的url值
- angular中的ng-bind-html指令和$sce服务
- html——网页高度
- ng-bind-html在ng-repeat中问题的解决办法
- 通过preg_replace 函数将HTML 替换成文本
- 不加<！DOCTYPE html>页面也显示，加不加的区别
- html的笔记（列表）
- HTML DOM setTimeout() 方法
- 无法关闭了HtmlUnit日志信息
- HTML基本标签
- HTML基本标签
- HTML基本标签
- [dhtmlxGant(甘特图)开发手册]第二篇——初始化、基本设置以及基本功能
- html的笔记（table表格）
- HTML基础知识三（超链接、表单）
- HTML基础知识二（页面属性、注释、表格、设置表框颜色）
- 【HTML】4.Frameset框架
- HTML布局