黑马程序员技术交流社区

标题: HTML随堂笔记 [打印本页]
作者: 姚团结    时间: 2013-10-7 08:19
标题: HTML随堂笔记
必备技能：手写HTML代码
HTML的页面结构，所有内容都在<html></html>标签之内，<head></head>中是头部信息，是对页面的描述，通常有<title></title>标题等，不会直接显示在页面中。<body></body>是页面的主体，大部分内容都定义在这里！
<body bgcolor="#00FF33">设置页面的背景色为草绿色，有颜色选取器选择桌面任意颜色
要求标签开始、结束都有明显标志/ <br></br>回车<br/>   <p/>、<p></p>是分段，分段前会有比较大的空白
特殊符号：空格&nbsp;   < &lt;     >&gt;  
超链接：/网站根目录，../父目录，.././父目录的父目录，./或者不写表示当前路径（站内引用最好用相对url）。<a href="http:baidu.com/" target="_blank">baidu<a> 在新窗口中打开连接。<a href="#last">直达评论页</a>  与  <a name="last">评论页</a>配对使用，实现页面内超链接的跳转。（锚点last）
注释   < pre /><!--保留原格式-->
图片  <img src="./xinghe.jpg"/> 注意图片是链接的不是插入的，如果src文件不存在就看不了，alt为图片无法显示时的显示文字（鼠标悬停文字），最好指定图片的width、height
　　缩略图的实现：准备一张小图、一张大图
　　<a href="./xinghe.jpg" target="_blank"><img src="xingheSmall.jpg" /></a>
　　把大图作为小图的超链接地址
列表、表格         <ul></ul>无序列表  <ol></ol>有序列表  
表格示例:
　　<tr></tr>的属性：algin水平对齐方式、Valigin垂直对齐方式、rospan（cospan）进行单元格的合并
　　<table>
　　    <tr><td>姓名</td><td>年龄</td><td>性别</td></tr>
　　    <tr><td><font color="#FF0000" >tom</font></td><td><a href="http:so.com/" >23</a></td><td>男</td></tr>
　　 </table>
表单 ctrl+J在vs中调用自动提示
　　表单内容写在<form>表单元素</form>中
　　 <form action="Register.aspx"> <!--表单提交地址 action的值-->
　　<input type="text"/>文本框
            <input type="checkbox"/>复选框
            <input type="button" value="注册" />按钮
            <input type="checkbox" checked= "checked"/>默认选中
　　<input type="submit"   value="注册"/>提交按钮
            <input type="file"/>文件选择器
            <input type="image" src="../Desktop/reg.png"/>图片按钮
            <input type="password"/>密码框
            <input type="radio"/>单选按钮
            <input type="reset"/>重置按钮
　　<input type="hidden" name="country" value="Norway" />                        用户不可见的隐藏字段（W3C  js中使用）
　　<input type="text" size="100"  value="请输入"                         maxlength="7" readonly="readonly"/><!--size 控件的宽                度、value 控件的值（text的默认值）、maxlength 最                大        输入长度、readonly 只读-->
　　Checked、readonly这种只有一个可选值的属性都可以省略属性值
　　<br/><input type="radio" name="Gender"/>男
　　<br/><input type="radio"name="Gender"/>女
　　<br/><input        type="radio"        name="Gender"                                         checked="checked"/>保密 <!--以name分组，相同name的互斥-->
Select标签    用来创建类似winform中的ComboBox或者ListBox。如果size 的属性大于1就是ListBox，否则是ComboBox，也可以通过multiple= "multiple"设置为多选的ListBox。Select中的项是<option>,<option value="4">广州</option>其中value是项的值。<option selected="selected">成都</option>默认选中。通过<option value="-1">可以编程实现不选择**。Select可以通过optgroup对数据进行分组，分组本身不会被选择。
其他标签                <textarea cols="100" rows="5">初值</textarea><!--cols可见宽度 rows可见行数-->生成后可以在浏览器中拖动，调整大小（可以通过css禁用拖动，固定大小）
<label for="name">姓名：</label><input id="name" type="text"/>通过lable使文本框得到聚焦
<fieldset>标签    <fieldset><!--GroupBox效果，把控件分组-->
                                    <legend>标题</legend>
                                <input type="text"/>
                                <input type="text"/>
                                <input type="text"/>
                                <input type="text"/>
                     </fieldset>、
中午练习
CSS样式表
　　可以对页面进行更精细的设置，如字体、背景、边框等等，主要由元素内嵌、页面嵌入、外部引用3种使用方式。即描述元素的皮肤。
　　
直接在某个元素的style上设置样式：<input type="text"         style="text-align:center; background-color:#3F3; border-color:#F00"         value="123"/>每个样式用;间隔
在页面的<head>标签中嵌入css，针对标签设置，类似vs编程
　　<style type="text/css">
　　                input{ background-color:#0F9; border-color:#F00; text-align:center;}</style>
外部引用css  在html 的<head>标签内加入引用代码<link         type="text/css" rel="stylesheet" href="./first.css"/>   css的优先级        类似继承的关系
Div、span、层、块（dom编程中非常重要）
<div></div>是将内容放到层中，将这些内容当做一个整体进行处理，类似于winform中的Panel
Span：div是将内容放到一个矩形的区块中（占全行），会影响布局，而span是把一段内容定义成一个整体进行操作，但不影响布局和显示。

常见样式
Css常用计量单位：表示宽度、距离的有：px（像素）、30%（百分比）、em（相对单位等）。
background-color:#00F"；背景颜色、color文本颜色
border-style:solid;边框风格，实线（默认无）；border-color:#FC6";边框颜色；border-width:3px；边框宽度（默认0）
Display：元素是否显示，可选值none（不显示）、block（显示为块级元素，此元素前后会带有换行符）、lnline（显示为内联元素，前后无换行符）
Cursor：鼠标悬停时显示的图案，可选值cursor（默认光标）、pointer（超链接上的手）、text（输入bean）、walt（忙）、help（帮助）
Li标签不显示圆点的方法：list-style-type：none；
样式选择器：标签选择器（上文）、class选择器、id选择器
Class选择器：在head中定义一个样式（.样式名称{}），用的时候设定元素的属性为样式名称，还可以设定多个class，名称之间加空格即可。
样式选择优先级遵循就近原则！
标签+class选择器：实现同样的样式名对于不同的标签有不同的样式，只要在样式名称前加标签名即可。
Id选择器：为指定id的元素添加样式，id前加#
关联选择器：P Strong{background-color：yellow；}P标签内的strong标签内的内容使用的样式。
组合选择器：同时为多个标签设定一个样式，标签之间以逗号分隔。
伪选择器：为标签的不同状态设定不同的样式。一般用于超链接
常用代码A:visited{ text-decoration:none;}
                        A:active{ text-decoration:none;}
                        A:link{text-decoration:none;}
                        A:hover{text-decoration:underline;}
                        <!--decoration文本装饰样式（无、下划线等）-->
作者: haxyek    时间: 2013-10-7 09:26
貌似，代码全乱了，如果你想插入html标签，请用编辑器的“代码”功能
作者: guo329838627    时间: 2013-10-7 12:06
额，你说把布局搞下多好，看的有点蒙圈了！{:soso_e142:}



欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2