HTML基础语法总结

HTML表格&＃xff1a;

格式&＃xff1a;

HTML特殊表格

rules 设置单元格的特效

fieldset 设置特殊表格

HTML表单

格式&＃xff1a;

1. name: 设置表单的名称

2. action: 设置表单的表单的处理程序的URL

3. method: 提交表单的方法

输入域一般在表单中使用

name 设置识别名称

rows 设置文本域的行数

cols 设置文本域的列数

disabled 设置文本为禁用

warp 设置为off不换行

标签

在前可以写普通的文本来修饰&＃xff0c;但是单击修饰文本时input并不会得到焦点&＃xff0c;而用lable标签则可以&＃xff1b;

for属性指定要修饰的空间的id&＃xff1b;

为被修饰的空间设置一个唯一的id&＃xff1b;

选择域

用来创建类似于WinForm中的ComboBox或者ListBox&＃xff1b;

如果size属性大于1就是ListBox&＃xff08;size值为显示出来的列表数量&＃xff09;&＃xff0c;否则就是ComboBox&＃xff0c;默认为ComboBox&＃xff1b;

通过select的multiple属性(multiple只有一个属性值)可以设置多选的ListBox&＃xff1b;

格式&＃xff1a;

</p><p> <select name&＃61;selectname></p><p>  <wbr /> <option selected>选项一</option>表示该项已选中</p><p>  <wbr /> <option> 选项二</option></p><p>  <wbr /> <wbr /> .....</p><p> </select></p><p>  <wbr /></p><p> <select name&＃61;selectname></p><p> <optgroup lable&＃61;“分组名”>使选项更清晰</p><p> <option selected>选项一</option>表示该项已选中</p><p>  <wbr />  <wbr /> <wbr /> <wbr /><option> 选项二</option></p><p>  <wbr /> <wbr /> <wbr /> <wbr /> ……</p><p> </optgroup></p><p> </select></p><p>

 

HTML的框架

使用框架可以划分页面

格式&＃xff1a;

</p><p> </p><p> </p><p> </p><p> </p><p> </p><p>

frameset标签属性

cols 设置列的大小

rows 设置行的大小

frameborder 是否显示边框 yes/no,1/0

framespacing 设置分割条大小

 

src 设置要链接的HTML文件

frameborder 是否显示边框yes/no,1/0

width 设置宽度

height 设置高度

scrolling 设置窗口是否使用滚动条yes/no,默认为auto

 

 

HTML不把“ ”当空格&＃xff0c;因为HTML中经常有缩进&＃xff0c;如果把缩紧的空格在浏览器中以空格的形式展现&＃xff0c;排版会很麻烦&＃xff1b;

<小于号  >大于号   空格符

 

相对URL&＃xff1a;表示对当前文档的资源&＃xff0c;“/”表示网站根目录&＃xff0c;“../”表示父目录&＃xff0c;“./”或者不写任何斜线便是相对于当前路径的目录&＃xff0c;站内引用最好用相对URL&＃xff0c;这样域名改变了、目录改变了都不受影响&＃xff1b;

</p><p> <image src&＃61;”../images/csharp.jpg”/>表示父目录下查找</p><p> <image src&＃61;”/images/csharp.jpg”/>表示根目录下查找</p><p>

 

标签

Src指向的文件&＃xff0c;图片是链接的&＃xff0c;不是插入的&＃xff0c;当src指向的文件不存在了&＃xff0c;图片就看不了了&＃xff1b;

Title鼠标放上去显示出来的文字

Alt属性为图片无法显示时的显示文本&＃xff0c;鼠标方式去也会有悬浮提示“点击查看大图”&＃xff1b;

Border属性指定边框&＃xff0c;属性值为0时不显示边框&＃xff1b;

Width、height属性指定现实的图片大小&＃xff0c;如果不指定则是图片的原始大小&＃xff1b;

最好指定Width、height&＃xff0c;哪怕是原始尺寸大小&＃xff0c;因为如果不指定大小&＃xff0c;图片会不占位置&＃xff0c;图片下载后才调整大小&＃xff0c;会造成页面很乱&＃xff1b;

 

CSS&＃xff08;层叠样式表&＃xff09;

用来美化页面&＃xff0c;可以对页面元素进行更精细的设置&＃xff0c;样式主要描述元素的字体颜色、背景颜色、边框等。CSS主要有元素内联、页面嵌入和外部三种使用方式。CSS是描述元素的皮肤&＃xff01;

   元素内联&＃xff0c;直接将样式写在元素的style属性中

   

</p><p>  <wbr /> <wbr /> <input type&＃61;”text” style&＃61;”background-color:red”/>适用于样式没有可重复性的场合</p><p>  <wbr /> <wbr /> 页面嵌入&＃xff1a;在head中加入</p><p>  <wbr /> <wbr /> </p><p>  <wbr /> <wbr /> 

   表示页面中所有的input都采用指定的样式。适用于样式重复&＃xff0c;减少页面体积&＃xff1b;

   外部引用&＃xff0c;将css内容写入css后缀文件

   Textarea{ background-color:red}

   然后再页面中引用&＃xff0c;在head中加入

   

   适合于多个页面共享css。

 

Div(层)

层&＃xff1a;

将内容放到层中&＃xff0c;就以将这些内容当成一个整体进行处理&＃xff0c;比如整体隐藏、整体移动等。类似于WinForm中的Panel&＃xff1b;

Span&＃xff08;块&＃xff09;

Div是将内容放到一个矩形的区块中&＃xff0c;会影响布局&＃xff0c;而span只是将一段内容定义成一个整体操作&＃xff0c;但不影响布局显示&＃xff1b;

 

常见样式&＃xff1a;

Css计量单位&＃xff1a;css中表示宽度、距离时有多种计量单位&＃xff1a;px&＃xff08;像素&＃xff09;、30%&＃xff08;百分比&＃xff09;、em&＃xff08;相对单位&＃xff09;等。Width&＃xff1a;20px

Background-color&＃xff1a;red;背景颜色&＃xff0c;color&＃xff1a;文本颜色

Border-style&＃xff1a;solid&＃xff1b;边框风格&＃xff08;默认没有边框&＃xff09;&＃xff0c;还有dotted&＃xff08;点&＃xff09;等值&＃xff1b;

Border-color&＃xff1a;边框颜色&＃xff1b;border-width&＃xff1a;边框宽度&＃xff08;默认为0&＃xff09;。

例&＃xff1a;style&＃61;“border-color&＃xff1a;red&＃xff1b;border-width&＃xff1a;1px;border-style&＃xff1a;dotted&＃xff1b;”

Display&＃xff1a;元素是否显示&＃xff0c;可选值none&＃xff08;不显示&＃xff09;&＃xff0c;block&＃xff08;显示为块级元素&＃xff0c;此元素前后会带有换行符。&＃xff09;、inline&＃xff08;显示为内敛元素&＃xff0c;元素前后没有换行符&＃xff09;等。

Cursor&＃xff1a;鼠标在元素上时显示的光标图标&＃xff0c;可选值&＃xff1a;cursor&＃xff08;默认光标&＃xff09;、pointer&＃xff08;超链接上的手&＃xff09;、text&＃xff08;输入bean&＃xff09;、wait&＃xff08;忙沙漏&＃xff09;、help&＃xff08;帮助&＃xff09;等。

LI不显示圆点&＃xff1a;LIST-STYLE-TYPE:none&＃xff1b;一般设在li或者ul上

应用&＃xff1a;图片&＃xff1a;不显示边框&＃xff0c;见备注

 

样式选择器

对于非元素内联的样式需要定义样式选择器&＃xff0c;通俗的说就是这个样式适合于哪些元素&＃xff0c;三种&＃xff1a;标签选择器、class选择器和id选择器。

标签选择器:

input{border-color&＃xff1a;yellow&＃xff1b;color&＃xff1a;red}&＃xff0c;对于指定的标签采用统一的样式

class选择器&＃xff1a;

以定义一个命名的样式&＃xff0c;然后在用到它的时候设定元素的class属性为样式的名称&＃xff0c;还可以同时设定多个class&＃xff0c;名称之间加空格

</p><p> .warning{blockgroud:yellow}</p><p> .highlight{font-size:xx-large;cursor:help;}</p><p> <table></p><p> <tr></p><p> <td class&＃61;”highlight”>你好</td></p><p> <td class&＃61;”warning”>我好</td></p><p> <td class&＃61;”highlight warning”>大家好</td></p><p>  <wbr /> <wbr /> </tr></p><p>  <wbr /></table></p><p>

 

标签&＃43;class选择器

Class选择器也可以针对不同的标签有不同的样式&＃xff0c;只要在样式名前加标签名即可。

</p><p> Input.accountno{text-align:right;color:red;}</p><p> Label.accountno{font-style:italic;}</p><p> <input class&＃61;”accountno” type&＃61;”text” value&＃61;”Hello”/></p><p> <label class&＃61;”accountno”>Hello</label></p><p>

 

Id选择器

为指定id的元素设定样式&＃xff0c;id前加#

</p><p> #username</p><p> {</p><p>  <wbr /> Font-size:xx-large&＃xff1b;</p><p> }</p><p> <input id&＃61;”username” type&＃61;”text” value&＃61;”aaaaaaaaa”/></p><p> Style、class可以同时组合使用</p><p> <input id&＃61;”username”class&＃61;”accountno” style&＃61;”font-size:xx-large” type&＃61;”text” value&＃61;”aaaaaaaaa”/></p><p>

 

关联选择器&＃xff1a;

</p><p> P strong{background-color&＃xff1a;yellow}</p><p> 表示P标签内的strong标签内的内容使用的样式</p><p> <strong>aaaaaaaa</strong></p><p> <p><strong>bbbbbbb</strong></p></p><p>  <wbr />

 

组合选择器&＃xff0c;同时为多个标签设定一个样式

</p><p> H1&＃xff0c;H2&＃xff0c;input{background-color:yellow}</p><p> <h1>nihao</h1></p><p> <input type&＃61;”text” value&＃61;”test”/></p><p>

 

伪选择器&＃xff0c;为标签的不同状态设定不同的样式&＃xff1b;

A:visited&＃xff1b;超链接点击过的样式&＃xff1b;

A&＃xff1a;active&＃xff1b;选中链接时的样式&＃xff1b;

A&＃xff1a;link&＃xff1b;超链接未被访问时的状态&＃xff1b;

A&＃xff1a;hover&＃xff1b;鼠标移到超链接时的状态&＃xff1b;

A:visited{TEXT-DECORATION:none}

A&＃xff1a;active{TEXT-DECORATION:none}

A&＃xff1a;link{TEXT-DECORATION:none}

A&＃xff1a;hover{TEXT-DECORATION:none}

多套用指定格式&＃xff1b;

• html
• int
• text
• 百度
• http
• 图片
• 文件
• io
• ide

写下你的评论吧 !

吐个槽吧,看都看了

会员登录 | 用户注册