黑马程序员--HTML笔记

------- Windows Phone 7手机开发.Net培训、期待与您交流! -------


html的结构:

<html>
<head>
    <title>标题</title>
</head>
<body bgcolor="颜色">
</body>
</html>
图片:
<image src="1.gif"/>(image可以没有结束标志)字体:aa<font color="red">aaa</font>
<img src="2.gif" usemap="#aaa">
<map nam="aaa">
<area>
</area>
</map>
<map nam="aaa2">
<area>
</area>
</map>
<img>与<map>时互相独立的。
html中的一些标签可以不关闭,<br>就是 一个,这是和XML不同的地方(常考),
但是为了遵循XHTML规范,推荐像XML一样严格关闭:<br/>,<img src="1.gif"/>
属性值:
html中属性值可以用单引号括起来,也可以用双引号括起来,甚至不用引号都可以(不推荐),单双要配对。
注释:
html和xml都是 用<!--注释内容-->
特殊字符:
html中<、>是有特殊含义的、空格是不会被显示的、所以需要特殊字符相当于C#中的转义字符,&lt:(小于号,less than);&gt:(大于号,greater than);&nbsp(空格,no-breakspace)
<pre>
       以写的方式输出,但是对于<,>仍没用
</pre>
<br/>是回车,<p>是分段,<p>前后会有比较大的空白,而<br/>则没有
<center>黑马程序员</center>居中显示
h标签:
<h1>--<h6>六个标签分别表示不同大小的字体
<b>a</b>粗体
<font></font>字体标签:<font color="red" size="30">红色</font>
超连接:
<a href="http://edu.csdn.net/heima/">黑马程序员训练营<img src="图片地址"/></a>
"/"表示网站根目录,"../"表示父目录,"../../"表示父目录的父目录,"./"或不写任何斜线表示相对于当前路径的目录,站内最好用相对URL,这样域名改变了、目录改变了都不受影响<a href="a.htm"><img src="a.jpg"/></a>
<img src="../images/csharp1.hpg">当前页面的父目录
<img src="/images/csharp1.hpg">根目录
将<a>的target属性设定为"_blank"就可以在新窗口中打开超链接
按住Crtl点超连接或鼠标点住超连接拖拽:在新窗口中打开
用name属性为<a>起名字:<a name="last">这里是最后</a>,这样可以通过<a href="#last">转到平台</a>来跳转到超连接的部分:锚点
图片的显示:
<img src="a.jpg"/>注意图片是连接的,不是插入的,所以如果src指向的文件不存在了,就看不了了,alt属性为图片无法显示时显示的文本,鼠标放上去会有悬浮提示“点击显示大图”;
border属性指定边框,border="0"不显示边框;width、height属性指定图片的显示大小,如果不指定则是图片的原始大
小。最好指定width、height,哪怕是原始尺寸大小,因为如果不在hiding大小图片不会占位置,图片下载后才调整大小,会造成页面很乱,如果指定了width、height哪怕图片没有加载完成,也会先把位置占上,如果网页上要显示小图(
如缩略图),不要仅仅是把大图设定一下width、height来缩小,因为仍然会下载大图,会使加载速度很慢。
点击图片显示大图:<a href="/images/csharp1.jpg"><img src="/images/csharp1.jpg" width="50" 
height="50"/></a>
图片显示问题(不用浏览器放大缩小的方式实现(好!)):
用画图工具缩小图片-另存为小的,保留大图片,显示的时候显示小的,当用户点击图片再显示大的(其实质是有两张图
(一大一小))代码如下:
<a href="/images/csharp1.jpg"><img src="/images/csharp1_small.jpg"/></a>
列表:
<ul>无序的
<ol>有序的
表格:
<table></table>
<tr>:行
<td>:创建单元格,可以将table的border属性设为0来隐藏表格线
<tr>的属性:align,水平对其,可选值:left,right,center;valign,垂直对其,可选值:top,middle,bottom(对整
行有效)
<td>也有align和valign(对单元格有效)
子标签的属性会覆盖父标签的属性。
还可用rowspan,colspan进行单元格的合并,用VS可视化的功能来做就行
表头的td可以用th代替,这样就会表头粗体居中显示。建议将表头用<thead>代替<tr>表单:
所有要提交给服务器的内容,都要放到form里,
<input>是主要的表单元素,type的可选值:submit(提交按钮)、button(普通按钮,不会提交给服务器)、checkbox(复选框)、file(文件选择框)、、hidden(隐藏字段,写服务器程序的时候用到)、image(图片按钮,会提交给服务器,还会把点的位置传给服务器,该图片可以另存为)、
password(密码框)、radio(单选按钮)、reset(重置按钮)、text(文本框)ctrl+J:自动提示
<form action="Register.aspx">:(action)表示要把表单提交给那个页面
       <input type="text"/>(在form中大部分的内容都是<input>标签,通过type属性表示要显示什么东西)
       <input type="button" value="按一下子">
</form>
<input>的value属性表示要显示的文本
text:size属性表示宽度,value属性表示值,
maxlength属性最多能输入的字符数
readonly属性只有 一个值readonly,即:readonly="readonly"
<input type="text" size="50" value="3333" maxlength="5" readonly="readonly">可以简写为:
<input type="text" size="50" value="3333" maxlength="5" readonly>(但不符合xml规范)
 
check:
checked属性表示是否被选中,<input type="checkbox" checked/>或者是<input type="checkbox" 
checked="checked"/>(推荐) 
radio:
分为两组,各组之间不互斥,组内互斥,相同name的表示为一组
<input type="radio" name="gender"/>男
<input type="radio" name="gender"/>女
<input type="radio" name="gender"/>保密
 
<input type="radio" name="xl"/>高中
<input type="radio" name="xl"/>专科
<input type="radio" name="xl"/>大学
 
file:使用file,则form的enctype必须设置为multipart/form-data,method属性为post 
<select>标签:用来创建类似与comboBox或者ListBox
如果size属性大于1则ListBox否则就是ComboBox
或者<select multiple="multiple">或者<select multiple>(推荐)那么就是可以多选的ListBox
comboBox:
<select>
       <option>北京</option>
       <option>上海</option>
       <option>广州</option>
</select>
ListBox:
<select size="2" multiple="nultiple">(size的值为显示项数)
       <option value="1" selected="selected">北京</option> (value属性设置每个项的值)
       <option value="2" selected="selected">上海</option>(selected可以简写)
       <option value="3">广州</option>
</select>
 
<optgroup>:
<select name="country" size=10>
       <optgroup label="Africa">
              <option>
              </option>
              <option>
              </option>
       </optgroup>
       <optgroup label="Europe">
              <option>
              </option>
              <option>
              </option>
       </optgroup>
</select>
 
<textarea>多行文本(也是表单元素):<textarea>文本</textarea>,cols,rows属性表示行数和列数
<label>:在<input type="text">前可以写普通的文本来修饰,但是单击修饰文本的时候input并不会得到焦点,而用label则可以,for属性指定要修饰的空间的id,<label for="txt1">姓名:</label><input type="text" id="txt1"/> 
<fieldset> 相当于winform中的groupBox
       <legend>常用</legend> //这一组的标题
       <input type="text">
       <input type="text">
       <input type="text">
</fieldset>



------- Windows Phone 7手机开发.Net培训、期待与您交流! -------

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值