------- Windows Phone 7手机开发、.Net培训、期待与您交流! ------
一、常用HTML标签及属性:
body:bgcolor表示背景颜色
<img>:src指明图片的链接地址,alt表示在图片无法显示的时候显示的文字。注意图片是链接的,不是插入的。border属性指定边框,border="0"不显示边框,width、height属性知道图片的显示大小,如果不指定则是图片的原始大小。(最好指定width、height,这样即使图片还未加载完,也会先占据位置)
缩略图:如果要在网页上显示小图(比如缩略图),不要仅仅把大图设定小的width、height来使图片变小,因为这样仍然会下载大图,导致加载速度慢,增大服务器的压力。
font:color文字颜色
<center>居中显示
<h1>~<h6>标题大小
二、常用特殊符号:
< 小于号,less than
> 大于号,greater than;
空格,no-break space
为什么HTML中<>要用<、>代替?因为<>有特殊的含义
三、<br/>和<p>的区别?
回车只是换行,p定义段落,前后会有空白行。
四、URL:资源在网络中的地址
相对URL:相对于当前文档的资源,"/"表示网站根目录,"../"表示父目录,"../../"表示父目录的父目录,"./"或者不写任何斜线,表示相对于当前路径的目录。站内引用最好用相对URL,这样域名改变了、目录改变了都不受影响。如:<ahref="a.html"><img src="a.jpg"/></a>
<a>的target属性:值"_blank"就是在新窗口中打开超链接(国内网站大多采用这种方式);
<a>的锚点:用name属性给<a>起名字,<a name="last">这是是最后</a>。可以通过<ahref="#last">转到最后</a>来跳转到超链接的部分。
五、ul和ol
ul:unordered list,无序列表
<ul>
<li>灌水区</li>
<li>版务区</li>
</ul>
ol:ordered list,有序列表,用的很少
table表格
<!--table的用法--><table border="1"><tr><td>姓名</td><td>年龄</td></tr><tr><td>tom</td><td>20</td></tr><tr align="center"><td>Jim</td><td align="right">23</td></tr></table>
在<table>内部通过<tr>创建一行,<td>创建单元格。默认table没有边框,属性<table border="1">设置边框的宽度为1。
<tr>的属性:align(水平对齐方式),可选值left、righ、center;valign(垂直对齐方式),可选值top、middle、bottom。
<td>也有alig和valign
align对齐方式,如<tr align="center">整行中间对齐,<td align="right">单个单元格右对齐。
子标签默认继承父标签的属性,也可以单独指定该属性,将覆盖父标签的属性。
六、表单
表单的作用:将用户输入的内容提交到服务器。
<form>:如果要提交数据到服务器,需要把<input>、<textarea>、<select>等表单元素放到form中。
<input >是主要的表单元素,示例:<input type="submit" />。
type的可选值有:submit(提交按钮)、button(普通按钮)、checkbox(多选框)、radio(单选按钮)、file(文件选择框)、hidden(隐藏字段)、image(图片按钮)、password(密码框)、reset(重置按钮)、text(单行文本框)、textarea(多行文本框)
input表单详解:
subit:点击submit按钮表单就会被提交到服务器,中午IE下默认按钮文本是“提交查询”,可以设置value属性修改按钮的显示文本。
text:size设置宽度,value为值,maxlength为可以输入的最大长度,readyonly只读。推荐<input type="text" readonly="readonly"/>。
checkbox:checked属性表是否被选中,推荐写法:<inputtype="checkbox" checked="checked"/>。
radio:相同name属性的为一组,不同readio设定不同的value值,这样通过name属性就知道谁被选中了,不用单独判断。
file:使用file,则form的enctype必须设置为multipart/form-data、method属性为post。
image:src属性指定图片的地址,用来美化按钮。
七、select标签
单行下拉列表框,示例代码如下:
<select><option value="1">北京</option><option value="2">河南</option><option value="3">山东</option></select>
<option>:<option value="1">北京</option>,北京是显示的文本,value是值。
将一个option选中:<option value="2"selected="selected">河南</option>
实现“不选择”:<optionvalue="-1">--不选择--</option>
实现“多选”:<selectsize="2" multiple="multiple">
<optgroup>:为选项分组,示例代码如下:
<select><optgroup label="Swedish Cars"><option value ="volvo">Volvo</option><option value ="saab">Saab</option></optgroup> <optgroup label="German Cars"><option value ="mercedes">Mercedes</option><option value ="audi">Audi</option></optgroup></select>
八、textarea
多行文本框,属性rows、cols控制TextArea的行高和列宽。
给textarea默认值:<textarea>我是默认值</textarea>。
九、label
作用:修饰元素A,就相当于将焦点聚焦到A。代码示例:
<labelfor="isMarried">婚否</label><inputid="isMarried"type="checkbox"/>
点击“婚否”,等于点击了id为isMarried的input。
十、filedset
相当于WinForm中的Groupbox效果,将一些控件划分为一个区域,看起来更规整。
十一、div
层:<div></div>将内容放到层中,就可以将这些内容当作一个整体进行处理,比如整体隐藏、整体移动。
十二、span
div是将内容放到一个矩形的区块中,会影响布局,而span只是将一段内容定义成一个整体进行操作,但不会影响布局显示。
十三、练习(登录页面)
<form action="index.htm" method="post"><table><tr><td colspan="2" align="center">登录</td></tr><tr><td>用户名</td><td><input type="text"/></td></tr><tr><td>密码</td><td><input type="password"/></td></tr><tr><td colspan="2"><input id="remember" type="checkbox" /><label for="remember">记住我?</label></td></tr><tr><td colspan="2" align="center"><input type="submit" value="登录" /></td></tr></table></form>
十四、练习(注册页面)
<form action="index.htm" method="post"><table><tr><td colspan="2" align="center">注册</td></tr><tr><td>用户名</td><td><input type="text" /></td></tr><tr><td>密码</td><td><input type="password" /></td></tr><tr><td>重复密码</td><td><input type="password" /></td></tr><tr><td>省份</td><td><select><option>北京</option><option>重庆</option><option>河南</option></select></td></tr><tr><td>性别</td><td><input type="radio" name="gender" checked="checked" />男<input type="radio" name="gender" />女<inputtype="radio" name="gender" />保密</td></tr><tr><td>职业</td><td><input type="radio" name="job" checked="checked" />学生<input type="radio" name="job" />公司职员<inputtype="radio" name="job" />其他</td></tr><tr><td>爱好</td><td><input type="checkbox" />登山<input type="checkbox" />篮球<input type="checkbox" />足球<inputtype="checkbox" />读书<input type="checkbox" />游泳</td></tr><tr><td colspan="2" align="center"><input type="submit" value="注册" /></td></tr></table></form>
十五、CSS
层叠样式表,用来美化页面。
三种使用方式:
1.元素内联,直接将样式写在元素的style属性中,如 <a href="#"style="text-decoration:none;">新浪</a>。
2.页面嵌入: 在head中加入<styletype="text/css"> a{text-decoration:none;} </style>表示页面中所有的a都采用指定样式,适用于样式复用,减小页面体积。
3.外部引用:将css内容写入css后缀的文件,然后在页面中引用,在head中加入<linktype="text/css" rel="stylesheet"href="style.css"/>,适用于多个页面共享css。
1.常见样式:
计量单位:px(像素)、百分比、em(相对单位);
background-color: 背景颜色;
color:文本颜色;
border-style:边框风格,值:solid(实线)、dotted(点线)等。
border-color:边框颜色;
border-width:边框宽度;
实例:style="border-color:red; border-width:1px;border-style:dotted",它的简写形式是:style="border:1pxdotted red"。
display:是否显示,none(不显示)、block(显示为块元素)、inline(显示为内联元素)等。
cursor:鼠标样式,可选:pointer(手)、text(输入bean)、wait(忙)、help(帮助)等。
取出li的原点:list-style-type:none;
2.CSS选择器:
(1)class选择器:
定义一个命名样式,然后在元素的class属性指定该名称,一个元素可以指定多个class名称,之间以空格隔开。
如:
.hey{color:red;font-size:x-large;}<span class="hey">hello,哈喽</span>
(2)标签+class选择器
针对不同的标签,可以使用相同样式名,但是样式内容可以不一样。代码示例:
input.uname{color:Red;}label.uname{text-decoration:underline;}<input type="text" class="uname" /><labelclass="uname">用户名:甄子丹</label>
(3)ID选择器
为指定ID的元素设定样式,id前加#
(4)更多选择器
1. 关联选择器
p strong{background-color:yellow;}
表示p标签内的strong子标签使用的样式,应用如下:
<p><strong>白日依山尽</strong></p>
2.组合选择器
同时为多个标签设定同一个样式
h1,h2,input{border:1px dotted red;}
3.伪选择器
为标签的不同的状态设定不同的样式
常用的有:
A:visited 超链接被访问过的样式
A:hover,鼠标停留在超链接上时的样式
A:link 超链接未被访问时的样式
a:active超链接点击后的样式
-------Windows Phone 7手机开发、.Net培训、期待与您交流! ------
如果觉得《黑马程序员 HTML基础》对你有帮助,请点赞、收藏,并留下你的观点哦!