HTML总结

Html

1.所谓的Trident引擎就是IE的WebBrowser控件。很多非IE核心的浏览器用的是Webkit引擎,比如遨游3,或搜狗的双核,chrome,safari,塞班。Gecko内核,火狐浏览器。

2.Html中的属性值可以用‘’,“”甚至不用引号。

3. &nbsp  (no break space)  空格

&alt                   <

>                    >

用这些特殊的字符是为了防止被误认识别为标签

<pre></pre>           表示计算机的源代码,可定义预格式化的文本,被包围在 pre 元素中的文本通常会保留空格和换行符

<br/>只是回车

<p></p> 是分段,<p>前后会有比较大的空白,而<br/>则没有。

<h1></h1> 从h1到h6

<font  size=30  color="red"></font> 字体标签

URL:表示地址栏里的东西。

<a  href="www.baidu.com"> </a>  超级链接(超链接中还可以嵌套图片这样就是点击图片打开连接<a  href=XXX> <img  src="XXXX"/></a>)

Src:一般表示图片的路径

相对URL:相对URL表示相对于当前文档的资源,"/"表示网站根目录,“.. /”表示父目录,“.. /.. /”表示父目录的父目录,“. /”或者不写任何斜线表示相对于当前路径的目录。站内引用最好用相对URL,这样域名,目录改变了都不受影响。

<a>的target属性设定为“_blank”就可在新的窗口打开新的链接

<a> <img src="c:/img/2.png" width="50" height="50"/></a>

这样可以实现把图片放大功能

好一点的解决方案是:<a href="/image/2.png"> <img src="/image/2_small.png"/></a>

实际上就是两张图片,点击小图时会链接到一张大图

<ul><li>  </li></ul>无序的列表

<ol></ol>  有序的列表

<table></table> 表示表格

<tr></tr> 表格的行

<td></td> 表格的单元格

Align="right"  表格内文本的对齐方式

子标签会覆盖父标签的属性。

4.表单   <form>

如果要把数据提交到服务器,需要将<input>,<textarea>,<select>等表单元素放到form中。

(1)<input> 是主要的表单元素,type的可选值:submit(提交按钮)、button(普通按钮)、hidden(隐藏字段)、image(图片按钮)、password(密码框)、checkbox(复选框)、file(文件选择框)、radio(单选按钮)、reset(重置按钮)、text(文本框)。

(2)Radio的互斥是通过名字name来实现的。

<input type="radio"  name="gender"/>男

<input type="radio"  name="gender"/>女

(3)file:使用file,则form的enctype属性必须设置为multipart/form-data、method属性为POST,这样才可以提交给服务器。

(4)<select>标签:用来创建类似于winform中的combobox或者LIstBox。如果size属性大于1就是ListBox,否则就是comboBox。<select  multiple>或者<select  multiple="multiple">那么就是可以多选的listbox。

<select>

<option> 北京/option>

<option> 天津</option>

<option> 武汉</option>

<select/>

(5)<textarea>多行文本(也是表单元素):cols、rows属性表示列数和行数

(6)Label

<label for="name">姓名:</label><input id="name" type="text" />

<label for="ma">婚否:</label><input id="ma" type="checkbox" />

(7)<fieldset></fieldset>将一些控件框起来

例如:<fieldset>

<legend >常用</legend>

<input type="text"/>

<input type="text"/>

<input type="text"/>

</fieldset>

wps_clip_image-17772

5.CSS

(1)使用css三种方式:a.直接style写在标签内部  b.style写在<head>标签内  c.样式写在单独的一个文件中

a.<input type="text" style=" background-color:Red;text-align:left;"/>

b.<head>

<title></title>

<style type="text/css">

input{ background-color: Black; border-color:Green;}   

</style>

</head>

C.直接写在一个样式表文件中。

(2)css中宽度,距离计量单位:px,百分比(20%),em(相对单位)

(3)Color:表示文本颜色

(4)Cursor:鼠标在元素上时显示的光标图标,可选值:cursor(默认光标)、pointer(超链接上的手)、

Text(输入bean)、wait(忙沙漏)、help(帮助)等。

自定义光标:cursor:url(图片路径),图片的格式必须为.cor和.ani

(5)li 去掉前面的圆点  list-style:none

6.样式选择器

三种选择器:标签选择器,class选择器,id选择器。

(1)在用class选择器时可以用一种以上的选择器 如:<div class="nav footer"></div>

两个类中间用空格隔开。

(2)样式的优先级:style的级别高于class样式的级别。

(3)标签选择器+class选择器

格式:标签的名字.class的名字{样式内容}

如:input.acto{text-align:right;color:red;}

label.acto{font-style:italic;color:black;}

(4)id选择器

例如:#username

{

      Font-size:20px;

}

<input id=username type=text/>

(5)关联选择器

描述某一个标签在另一个标签内部长什么样

P strong{ color:red;}在p标签下得strong标签中的内容的样式

(6)组合选择器

几种标签都采用同一种样式。如:

P ,h1,input { color: green;}

(7)伪选择器

为标签的不同状态设定不同的样式:

A:visited:超链接点击过的样式; A:active:选中超链接时的样式; A:link:超链接未被访问时的状态;A:hover:鼠标移到超链接时的状态。

A:visited{ TEXT-DECORATION:none}

A:active{ TEXT-DECORATION:none}

A:link{ TEXT-DECORATION:none}

A:hover{ TEXT-DECORATION:underline}

原文地址:https://www.cnblogs.com/yichengbo/p/2151222.html