HTML初识
来源:互联网 发布:淘宝网生产许可证编号 编辑:程序博客网 时间:2024/05/17 12:25
开发环境:一般使用火狐,IE,谷歌浏览器,编辑可以使用任何文本编辑器。 一般以.html为后缀名的文件为网页文件三大块: 1、<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 规定文本的规范,dtd为规定。 2、head 头文件,一般为网页展开的标签规定显示文字。 3、body 网页主体。div布局 将div标签和CSS结合,实现网页的分布排列,盒子模型: 1、盒子与盒子之间有外 边距 2、盒子与里面有内边距HTML笔记: <span>:内联标记, 只在行内包裹几个行内元素,在行内使用包含,标记某些元素,可以设置左右边距,但无法设置山下边距。 其中内联标签和div标签可相互转化,只需要在CSS中设置display就行了,值有block 块状 inline 内联 display :block; CSS控制文本段落: <p>为一段文字的标签 CSS中的控制段落文本的属性: text-indent:20px; 段落缩进,设置像素。 text-align:center;段落居中。 text-decoration: line-through; 可以设置文本字体有穿过线。 设置文本属性的有: letter-spacing: 20px; 设置每个字之间的距离。 设置文本的字体和颜色: color:blue; 设置字体的颜色; font-style: 设置字体的显示形式。 font-weight: 设置字体的粗细 foont-size: 设置字体的大小。 line-height: 设置每一行的高度,继而设置每行间距, 设置文本字体的有衬线和无衬线。 有衬线 宋体 serif 无衬线 sans-serif CSS 选择器,引用CSS, 有ID, class 和标签 ID要用 #ID class .class 标签 标签 修饰有冲突,既有ID又有class 这个要一个一个级别确定,那个控制的越精细,就显示那 CSS的四种引入方式: 1、外部链接一个CSS文件,我们在HTML头部分标明:<link href="css/my.css" rel="stylesheet" type="text/css"/> 2、头部直接写入CSS: <style type="text/css"> div{margin:0;padding:0;border:1px solid red;}</style> 3、外接多个CSS文件时:<style type="text/css"> @import url(my.css); </style> 4、直接在html标签里写入对这个标签的CSS控制,如:<div style="border:1px solid red;">测试信息</div> CSS初始化: 相同的元素,如li ,在不同的浏览器下,显示的效果稍有不 同,是因为浏览器对各元素的margin,border,font-size等 略有不同,为杜绝这种情况,我们通过CSS强制让所有元素的属性值都一样,这样浏览器就一致了,减少了不兼容,这个过程就叫CSS的初始化。本帖最后由 mishi001 于 2013-11-20 02:10 编辑先用div布局 用CSS控制显示 根据需要用有语义标签或无语义标签先用div布局 用CSS控制显示 根据需要用有语义标签或无语义标签编码与charset 不一致 则会导致乱码如果id取名字用 数字命名 则会导致css文件无效如果不声明DOCTYPE 低版本IE 显示效果不一样盒子长 width+border-left+border-right+margin-left+margin-right+padding-left+padding-right盒子高 height+border-top+border-bottom+margin-top+margin-bottom+padding-top+padding-bottom盒子里面 文本占地的大小 等于width和height的大小 与padding margin border无关padding会导致 所占空间发生变化 可以破坏布局解决方法 为了不破坏布局 在增加padding后 要减少原来width和height的值父子div 竖直方向margin会重叠 父DIV 与外界的margin值为子DIV的margin 子DIV与父DIV之间的margin 无效普通元素 margin会重叠 值为重叠margin 的最大值块元素(block element) address - 地址 blockquote - 块引用 center - 举中对齐块 dir - 目录列表 div - 常用块级容易,也是CSS layout的主要标签 dl - 定义列表 fieldset - form控制组 form - 交互表单 h1 - 大标题 h2 - 副标题 h3 - 3级标题 h4 - 4级标题 h5 - 5级标题 h6 - 6级标题 hr - 水平分隔线 isindex - input prompt menu - 菜单列表 noframes - frames可选内容,(对于不支持frame的浏览器显示此区块内容 noscript - 可选脚本内容(对于不支持script的浏览器显示此内容) ol - 排序表单 p - 段落 pre - 格式化文本 table - 表格 ul - 非排序列表 内联元素(inline element) a - 锚点 abbr - 缩写 acronym - 首字 b - 粗体(不推荐) bdo - bidi override big - 大字体 br - 换行 cite - 引用 code - 计算机代码(在引用源码的时候需要) dfn - 定义字段 em - 强调 font - 字体设定(不推荐) i - 斜体 img - 图片 input - 输入框 kbd - 定义键盘文本 label - 表格标签 q - 短引用 s - 中划线(不推荐) samp - 定义范例计算机代码 select - 项目选择 small - 小字体文本 span - 常用内联容器,定义文本内区块 strike - 中划线 strong - 粗体强调 sub - 下标 sup - 上标 textarea - 多行文本输入框 tt - 电传文本 u - 下划线 var - 定义变量text-decoration none 默认。定义标准的文本。的一条线。 text-decoration overline 定义文本上的一条线。text-decoration line-through 定义穿过文本下的一条线。text-decoration blink 定义闪烁的文本。 //IE不支持 火狐下可以使用text-decoration inherit 规定应该从父元素继承 text-decoration 属性的值。text-decoration underline 定义文本下的一条线。background-color文本背景颜色color 文本字体的颜色text-indent 首行文本的缩进text-align 文本对齐 方式 left center rightletter-spacing 字体间的距离text-transform none 默认值 不变text-transform uppercase 文本全大写text-transform lowercase 文本全小写text-transform 每个单词首字母大写word-spacing 属性可以改变字(单词)之间的标准间隔。其默认值 normal 与设置值为 0 是一样的。word-spacing 属性接受一个正长度值或负长度值。如果提供一个正长度值,那么字之间的间隔就会增加。为 word-spacing 设置一个负值,会把它拉近:white-space 值为normal时 去除空白字符white-space 属性设置为 pre 时,浏览器不会合并空白符,也不会忽略换行符 ,与之相对的值是 nowrap,它会防止元素中的文本换行,除非使用了一个 br 元素。在 CSS 中使用 nowrap 非常类似于 HTML 4 中用 <td nowrap> 将一个表单元格设置为不能换行,不过 white-space 值可以应用到任何元素。当 white-space 属性设置为 pre-wrap 时,浏览器不仅会保留空白符并保留换行符,还允许自动换行。衬线字体及无衬线字体的区别是 字体是否大小整齐 无衬线字体 在字体拐弯处明显大小不一样有衬线字体 一般都用左标题 无衬线字体一般用于正文程序员一般常用宋体 Courier New Courier New 9pt, Verdana, Lucida Consbackground-attachment : scroll默认值 滚动 fiixed背景固定background-color : transparent 默认值 背景透明background-color:颜色 背景颜色background-image:none默认值 无背景 url(背景路径)背景图片background-position:left top center right 可以选择背景所在的位置background-repeat:repeat-x X轴平铺 repeat-y Y轴平铺 no-repeat 背景图片不重复background-position:X值 Y值以左上角为原点 分别 向右 和向下 X Y值为正 反之像素则为负background-position:100px 200px;background-position:-100px -200px;background-position:100px -200px;background-position:-100px 200px;id选择器 class 选择器 标签选择器 派生选择器(必须有家谱关系)通用选择器 *{} 相邻同胞选择器(相邻的标签) 群组选择器 div,p{}属性选择器 abbr[title]{color:#FF0000;}p[title='app']{ color:#FF0000;}子代选择器 后代的第一个子元素#links > a {color:blue;}伪类选择器定位范围越精确的优先级 越大直接写在标签里的的style优先级最高,然后是id > class >taghtml中 <style>间的CSS优先级</style> 大于 link引入过来的优先级@import 优先级 大于link的优先级
0 0
- 初识html
- 初识HTML
- 初识html
- 初识HTML
- HTML初识
- 初识HTML
- 初识HTML
- 初识html
- 初识html
- 初识HTML
- HTML初识
- 初识HTML
- 初识html
- HTML 初识
- 初识HTML
- 初识HTML
- 初识HTML
- 初识html
- 动画--飘雪效果
- 算法导论(build the heap iteratively 迭代建堆)
- Spring — IoC详解
- 【DayDayUp】【算法_图_最短路_之二_SPFA最劣、Dij堆优化&Johnson(结点对最短路)】(待续)
- Python基础学习笔记之一
- HTML初识
- httpInvoker提供远程服务调用总结(一)
- Ubuntu14.04下安装mongodb 3.X
- 一些网络方面的试题
- android 字符串 转换成Bitmap 设置文本的字体: 宋体,隶书啥的,获取字体的 行高, 文字生成图片
- Java NIO(1)概述
- java的构造方法链
- Git的Patch功能
- 扩展grep(grep -E 或者 egrep)