html加强
HTML 基础 www.55.la 网站美工素材网 指定网页编码:<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
浏览器:输入网址点击链接后,向服务器请求页面, 服务器将页面编译解析出来并将HTML JS CSS等内容返回给浏览器 展现在用户面前的是一个页面 2.浏览器的兼容性问题:开发注意 3.HTML和XML的联系 , 区别: 书写规范,标签必须前后封闭,属性值带引号"" 4.HTML的注释: <!--注释内容--> 5.敏感字符以及标签: 1.小于<或 大于>: < 或 > 2.空格符 : 3.双引号" ": " 4.回车符 : <br/> 5.居中显示标签 : <center></center> 6.表示段落,控制段落之间的间隙 : <p></p> 7.<h1>--<h6>: 表示字体的大小Size. 8.<b>与<strong>: 粗体 . 建议使用<strong> 9.<i> : 斜体. 10.<u>:下划线(underline) 11.<font color="red"></font>:(不推荐使用) 控制字体的属性,size-字体大小,color-字体颜色. 因为按照网页设计理念,html本身只是描述内容的,格式交由CSS控制,因此br,b,i,u,center,font标签等 不建议使用.
6.超链接<a href ="">转向超链接</a> 7.图片标签:<img src="图片路径" onerror="加载失败后显示自定义的图片"/>--显示图片 缩略图:使用专业工具进行缩略,不要使用属性width和height定义图片大小(其实大小还是原来的大小) 图片保存格式: jpg ,jpeg(只压缩) ,png(可设置透明) , gif(动画图片) bmp(原始位图,尺寸大):网页中不要使用bmp格式的图片,浪费流量. 文件路径问题: 1. ./当前目录. 2. ../相对于当前页面上一级目录 3. http://www.cnblogs.com/相对于当前页面上一级目录的上一级目录 4. / 网站根目录
8.锚点: 定义锚点--<a name="top"></a>,指定name属性 转向锚点--<a href="#top">回到顶部</a>-->转向定义锚点的位置
--------------------------------重要标签---------------------------------- 1. 无序列表: ul (unordered list) li (list item) <ul> <li>灌水区</li> ------<li>不显示圆点 list-style-type:none; <li>服务区</li> <li>原创区</li> </ul> 2.有序列表:<ol></ol>(ordered list) ,用的少
3.表格:<table></table> <thead>用来设置表头. <tbody>用来设置表体. <tr>创建行. <td>创建单元格 可以将table的border属性设为0来隐藏表格线 cellpadding: 内容和表格边线之间的距离 cellspacing : 单元格之间的间距 <tr>的属性: align水平对齐(left,rightcenter) valign垂直对齐(top,middle,bottom) <td>的属性: 与<tr>大致相同 子标签默认继承父标签的属性 属性 rowspan 与 colspan 用于 行 与 列 单元格的合并 通过设置td的 colspan, rowspan 属性 可以设定它占用多少纵向,横向的空间 4.<form>表单标签: 如果要把数据提交到服务器,则需要将<input>,<textarea>,<select>等 表单元素放到<form>标签中 5.<input>为主要的表单元素 <input type="" id="" value="" text=""/> type的可选值: 1.submit(提交按钮)--点击按钮,表单会被提交给服务器,可设置value属性修改按钮的显示文本 2.button(普通按钮) 3.checkbox:复选框--<input type="checkbox" checked="checked" />(推荐) 4.file:文件选择框 5.hidden:隐藏字段 6.radio:单选按钮--相同name属性的为一组 7.reset:重置按钮 8.text:文本框--size属性为宽度,value为值,maxlength为可输入的最大长度 9.readonly:只读文本.<input type="text" readonly="readonly" />(推荐) 10.image:图片提交按钮,使用src属性指定图片的地址,用来实现美化的“登录按钮” 11.password:密码框 6.<select>标签:用来创建类似于Winform中的ComboBox或者ListBox 下拉列表框: 其中的每项表示为: <option value="1">山东</option> 将一个option设置为选中:<option selected="selected">山东</option>(推荐)就可以将这个项设定为选择项 将列表中的选项 进行分组在select标签下使用<optgroup>标签,其中的label属性用来显示父类内容 <select> <optgroup label="山东"> <option>烟台</option> <option>青岛</option> </optgroup> <optgroup label="辽宁"> <option>沈阳</option> <option>大脸</option> </optgroup> </select> ListBox列表: <select size="3"></select> --size属性 设置显示项的个数
7.多行文本<textarea></textarea> 属性 cols , rows 控制多行文本框的 宽度和高度. 8.label标签: for属性用来指定所关联标签的id值. <input type="checkbox" id="chk"><label for="chk">购物</label>
----------------------------Div + Css--------------------------------
1.div层: 块级元素, 英文自动折行属性 <div style="word-break:break-all"></div> 将内容放到层中,就以将这些内容当成一个整体进行处理, 比如整体隐藏、整体移动等。div非常强大和常用。类似于WinForm的Panel 2.span: 不影响其他元素的布局.span只是把一段内容定义成一个整体进行操作, 但不影响布局、显示 3.样式表CSS : 是用来美化页面用的,元素单独设置的样式覆盖页面级别等更高级的,类似继承中的override CSS(层叠样式表)是用来美化页面用的,可以对页面元素进行更精细的设置,样式主要描述元素的字体颜色、背景颜色、边框等。 CSS主要有元素内联、页面嵌入和外部引用三种使用方式。 CSS是描述元素的皮肤! 1.元素内联 : 直接将样式写入元素的style属性中,<input type="text" readonly="readonly" style="background-color: #FF00FF" />,适用于样式没有可复用性的场合。 2.页面嵌入:在head中加入 <style type="text/css"> input{border-color:Yellow;color:Red;} </style> 表示页面中 所有input 都是采用指定的样式。适合于样式复用,减小页面体积 3.外部引用,将css内容写入css后缀的文件 textarea{background:yellow} 然后在页面中引用,在head中加入 <link type="text/css" rel="Stylesheet" href="s1.css" /> 适合于多个页面共享css。 4.class选择器 : ( . 样式名 ) 以定义一个命名的样式,然后在用到它的时候设定元素的class属性为样式的名称, <style type="text/css"> .warn {border-color:Yellow;color:Red;} .error {border-color:Red;color:Red;} </style>
还可以同时设定多个class,名称之间加空格,若设定的多个样式中有相同的属性, 则按照样式声明的顺序,采用最后声明的样式 <input type="text" class="warn error"/> 这里error选择器后声明的,这里的border-color 就采用error的样式 5.Id选择器:( # 样式名 ) ----永远不要把属性设置到 标签中 标签使用该Id样式选择器时,只要指定元素Id名跟选择器的名字相同即可 #txtname { font-size:xx-large; } <input id="txtname" type="text" value="" />
6.标签选择器+class选择器: input . warn{background-color: Red;} input.accountno{text-align:right;color:Red;} label.accountno{font-style:italic;} <input class="accountno" type="text" value="123" /> <label class="accountno">这里是内同</label>
7.Id选择器+标签选择器 Id为span1标签下面的 input标签所采用的样式 #span1 input{background-color:Yellow;} 8.包含选择器: P strong{ background-color:Yellow} 表示P标签内的strong标签内的内容使用的样式 <strong>fadsfasdfads</strong> <p><strong>adfasfd</strong></p> 9.组合选择器,同时为多个标签设定一个样式 H1,H2,input{background-color:Green} <h1>nihao</h1> <input type="text" value="test" /> 10:属性 display:none 隐藏元素,隐藏后并且不占据位置(不保留物理空间) visibility: hidden 也是隐藏元素 但是占据着位置.(保留物理空间)
11.cursor:设置鼠标的形状(hand和pointer--手, move--移动, wait--等待. help--帮助?) 12.可以设定position:absolute; 来让元素绝对定位,一旦设定绝对定位,元素不再占据"文档流" 而是"飘起来",覆盖在其他没有绝对定位的元素上. 13.float: none ,right ,left. none : 对象不浮动 left : 对象浮在左边 right : 对象浮在右边 导航栏可以使用<ul>中的<li>布局. 给ul设置id选择器(向左飘,去掉圆点,选项间的间隙) #ul1 li {float:left; list-style-type:none;margin-left: 50px; }