HTML CSS 基础
2017-05-02 23:48
316 查看
<meta -> 编码,跳转,刷新,关键字,描述,IE兼容 <meta charset='utf-8'> # 编码 <meta http-equiv='Refresh" Content='3' url='http://www.baidu.com'> #自动跳转 <meta name='keywords' content='关键字1,关键字2'> 被搜索的关键字 <meta name='description'> <meta http-equiv='X-UA-Compatible" content='IE=IE9;IE=IE8;'/> icon 小图标 <link rel='shortcut icon' href='path/icon'> 块级标签<div> 内联标签<span> input type -> file text password button... <form enctype="multipart/form-data"> #与file 一起用 tip: 当使用多个radio 时,把name设为一样,则可以做单选框。 <textarea>default_str</textarea> #多行文本框 <select name = 'xx' multiple='multiple' ,size="2"> <optgroup label="xx"></optgroup> #分组标签 <option value='1'>xx </option> <option value='2' selected='selected' multiple='multiple'>yy </option> </select> #《a》不能提交到数据库 <a href='www.baidu.com' target='_blank'>xx</a>#新页跳转 <a href='#id_3></a> #锚 <ul> <li>list_1</li> </ul> <ol> <li>有序标签</li> </ol> <dl> <dt>title</dt> #有标题列表 <dd>content</dd> </dl> 表格: <table border="1"> <thead> <tr> <th rowspan='2'>表头1</th> <th>表头2</th> <th>表头3</th> </tr> </thead> <tbody> <tr> <td rowspan="2">内容1</td> <td colspan='2'>内容2</td> </tr> <tr> <td colspan='2'>内容2</td> </tr> </tbody> </table> #for:与id关联(点击) <label for='username'> 用户名:</label> <input id='username' type=text> <fieldset> <legend> 登录 </legend> </fieldset> css调用 #id{xx} id选择器 .class,.class{xx} 类选择器 .class #id{xx} 引入css <link rel='stylesheet' href='commons.css' /> CSS样式 边框:border 阔度,样式,颜色(border 4px dotted red) text-align:center; 字体居中 font-weight:bold 字体加粗 float:left DIV float后则不占一整行,往左飘 line-height:xxpx 行高,行高和div一样高时,字体居中 clear:both 将浮动的DIV拉回父元素内,但大体不会改变 display:inline 将块标签转为内联标签 display:block display:inline-block 默认inline,但是也可以修改 none 消失 margin-top xx 与父标签的边距 padding-top xx 自身内部增加边距(看起来好像变高了) tip:行内标签无法设置高、款、padding、margin tip:块级标签如果按百分比来占位,则以父标签为基准
关于DIV定位的补充:
当使用DIV作为定位时很容易发生标签互相重叠的情况,以下是我遇到的一些“bug”
<div id='lay1'> <div id='lay2'></div> </div> <div id='new'></div> #lay1{ height:100px; background-color: yellow; width:100% } #new{ height:50px; width:40%; background-color: blue; }
上面这个HTML是没办法把2个div都显示的,因为position!
position属性:
static :根据当前所分配到的位置进行移动
relative :父标签使用,让子标签可以在父亲肚子内定位
fixed :根据浏览器空间定位
absolute :根据父标签定位
相关文章推荐
- DIV+CSS布局基础:HTML标记(三)
- “阿一web标准学堂”第5课:HTML和CSS基础知识(2)(附视频、课件、代码下载)
- html&css基础框架
- HTML基础(一):实用的CSS标签和属性值
- HTML基础(四):CSS中关于背景图的应用技巧,把很多图片聚合的一张图片中
- DIV+CSS布局基础:HTML标记(一)
- 【HTML XHTML CSS基础教程(第6版)】笔记之HTML XHTML笔记(1~6章)
- 黑马程序员--html和css基础
- HTML和CSS总结(基础版)
- CSS 基础:HTML 标记与文档结构(1)<思维导图>
- HTML的DIV+CSS基础排版方式
- 网页编程基础第二章知识点总结——HTML&CSS快速入门
- HTML与CSS教学-第二章 HTML基础
- HTML&&CSS基础框架
- 《CSS设计彻底研究》读书笔记 第01章 (X)HTML和CSS核心基础
- “阿一web标准学堂”第4课:HTML和CSS基础知识(1)(附视频、课件、代码下载)
- 学习网站开发必备推荐!30天学会HTML和CSS基础入门视频教程 (免费精品课程)
- HTML & CSS 基础知识
- HTML基础(二):css postion 的详细解释
- html和css基础