黑马程序员技术交流社区

标题: 这几天看视频总结的常用html和css需要注意的知识点 [打印本页]

作者: 李拴同 时间: 2012-12-26 17:06
标题: 这几天看视频总结的常用html和css需要注意的知识点
不对的还请大家一起改正
(1)html
格式
<html>
   <head>
      <title>
      </title>
   </head>
<body>

</body>
</html>
（2）常用特殊字符
空格 &nbsp；大于号&lt；小于号>
（3）常用标签
文字格式
<br/>回车两之间没有空白知识换行 <p>分段两端之间有较大空白
居中<center></center>
h标签从<h1>到<h6>表示不同大小字体从大到小排序只有6种
<b></b>粗体
<font></font字体标签><font color="颜色"size="数字">显示字</font>
超链接<a >显示的字</a> 属性target 设定"_blank"在新窗口中打开
<a ><img src="http://www/adad"/></a>
URL：资源在网络中的位置 http://124.0.0.1/a.html
"/"表示网站根目录 "../"表示父目录，"../../"表示父目录的父目录
页内跳转
<a name="Last">呆呆地</a>  <a href="#Last">跳掉name处</a>
图片
<img src="a.jpg"/> alt属性为图片无法显示是显示的字 title 鼠标放上去显示的字
width height  调整图片大小  border 边框设定
（4）列表表格
列表<ul><li>灌水区</li><li>版务区</li></ul>
表格<table><tr><td>列</td></tr></table>
一般用表头替代<tr><thead>表头</thead>
(5)表单
<form></form> 所有表单内用都要写到这个标签里
<from action="提交到得页面"></from>
<input type="text">文本框
<input type="checkbox">多选框
<input type="button">按钮
type 可选值 submit 提交按钮 file文件选择框 image图片 password密码框 radio单选按钮 rest重置
text 属性 value text的值 maxlength可输入最大值 readonly 只可看不可写 readonly="readonly"
checkbox 属性 checked="checked" 默认选中
file 用file form属性enctype必须设置成multipeart/form-date method属性必须为 post
radio 属性 name 相同的为一组 name一样的一组才能互斥
select标签下拉菜单
<select><option>显示内容<option></select>
select属性 size 的值就是显示出来的列表数量 size为1就是下拉菜单

option 属性selected="selected" 就是默认选项值
<optgroup>分组的内容<optgroup>
<textarea></textarea> 多行文本框属性cols rows  设定最大行列
<Lable></Lable>聚焦点姓名光标就会出现在text中<Lable for="name">姓名</lable

（1）css
格式一<input type="text" value="123"style="background-color:Red;border-color:Green"/>
格式二在<head>标签里边 <style type="text/css">input{background-color:Red;border-color:Green}</style> 把所有input标签设置格式
格式三引用其他文件夹下的css样式表  在<head><link type="text/css" rel="Stylesheet" href="css.css"
(2)Div, Span
Div 把内容包到一起放到矩形区域里当成一块处理前后有换行符
Span 把内容也放到一起不是矩形，是随着数据而改变的什么形状也行
（3）css常用样式
css计量单位
px 像素 % em相对单位 width：20px
background-color：Red 背景颜色 color文本颜色
border-style：solid 边框风格实线虚线点（dotted）等 border-color：边框颜色border-width 边框宽度
style="border-color:Red;border-width:1px"

display: 元素是否显示  none

cursor 鼠标在元素上时显示的光标图标，cursor默认值光标 pointer手 wait忙漏斗 help 帮助
Li LIST-STYLE-TYPE：none 不显示圆点
（4）样式选择器
标签选择器 input{border-color：Red}
class选择器  .名字{background：Red}  <div class="名字">ddd</div>
标签+Class选择器
标签名.Class
input.accountor{text-align:right;}
<input class="accountor"type="text"value="ddd"/>
id选择器
#id名字 {border-color：Red;}
#id user{color:Yellow;}
<input type="txst" id="user"/>
伪选择器
A:visited：超链接点击过的样式 A:active 选中超连接时 A:link 超链接未被访问时的状态A:hover 鼠标移动到超链接的状态
超链接死格式复制黏贴就行了
A:visited{TEXT-DECORATION:none}A:active{TEXT-DECORATION:none}A:lin{TEXT_DECORATION:none}
A:hover{TEXT-DECORATION:underline}

作者: 许庭洲 时间: 2012-12-26 19:45
值得学习ing!

作者: 黄林 时间: 2012-12-27 20:49
学习，拷贝ing

作者: HM刘磊 时间: 2012-12-29 23:38
我在加一个，复选框标签关联，

<input type="checkbox" id="che"/>
<label for="che">name</label>

复制代码

作者: 刘树斌 时间: 2012-12-30 14:00
我给加多一个
.nav div a { } 复合选择器
<div class="nav">
<div><a >http://www.itheima.com</a></div>
</div>

作者: 穆爱明 时间: 2013-7-10 09:06
学习一下，感谢分享！

作者: 穆爱明 时间: 2013-7-10 09:12
看帖必顶

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

黑马程序员IT技术论坛 X3.2