|
与大家一起分享一下HTML5与CSS3中一些标签的用法。 首先我们来说一下浏览器的小知识，浏览器的区别就在于内核不同，内核不同则渲染引擎就不同，那么不同的浏览器看同一个网页的效果就不一样了。那么渲染引擎也可以说是html的解析器了。主要渲染html+css，把这两者的代码渲染成用户看到的酷炫页面了。 常见的浏览器内核： IE（Trident） Firefox（Gecko） safari（webkiit） chrome（chromium/Blink） Opera（blink） 所以说渲染引擎不同就会导致存在相应的兼容性问题。 HTML他的中文意思为超文本标记语言，但是它不是编程语言，所有的html标记（标签）都要放在尖括号<>里面。 Web标准的组成 Web标准不是一个标准是一系列的标准： 结构标准（html） ---- 搭建页面的结构 表现标准/样式标准（css）---- 页面样式的美化 行为标准（javascript）--- 实现页面的交互效果 html标签小知识 H1标签只能用一次，一般用于logo <p>标签会在上下自动生成空白行，块元素。 粗体：<strong>和<b>=>文本倾斜标签：<em>和 <i> 删除线： <del> 和 <s>=>下划线：<ing>和<u> 优化a标签的小技巧：在head中添加 <basetarget="_blank">，决定了当前页面所有的a标签打开方式。空链接有两种：一种 # 二种 javascript: 锚链接：设置标签id属性后，href="#id值"即可 表格：bgColor是表格背景颜色，align属性则是水平对齐方式 表格结构： <table> <caption>标题</caption> <thead> <tr> <th></th> </tr> </thead> <tbody> <tr> <td></td> </tr> </tbody> </table> 特殊字符标记： <：< >：> 空格： 人民币：¥ &：& 版权符号：© 注册商标：® 摄氏度：° 正负号：± 乘号：× 除号：÷ 平方：² 立方：³ 在实际工作中我们要注意标签语义化，让代码更易解读。 标签语义化注意事项： 1.尽可能少的使用无语义的标签，如：div、span 2.在语义不明显时，既可以使用div或者 p时，尽量用p，因为p在默认情况下有上下间距，对兼容性特殊终端有利 3.不要使用纯样式标签，如：b、font、u等，改用css设置。 4.需要强调的文本，可以包含在strong或者em标签中strong默认样式是加粗（不要用b），em是斜体（不用 i） HTML的结构 一对html标签里面嵌套一对head标签（给浏览器解析用的）和body标签（用户看的），head标签里面还嵌套了一对titlie标签（用户可以看见的） <html> <head> <title>标题</tilte> </head> <body> 网页主体内容 </body> </html> CSS样式小知识 Css的作用 Cascading StyleSheets，简称层叠样式表，主要是用来进行页面的版面布局和外观样式的美化； 文字控制属性 文字颜色 color Color取值 a、直接写英文单词yellow，red等等 b、16进制表示#aabbcc或者#abc c、rgb（）如rgb（0，0，0） d、rgb（）如rgba（0,0,0,0.5）a为透明度 常用测试颜色16进制： 黑色系列：#000； #333； #666； #999； 灰色系列：#ccc； #eee； #ddd； #dedede； 红色：#f00； 文字大小 font-size 文字字体 font-family 取值可以取一个或者多个，如果取多个值要用英文的逗号隔开，表示先找第一个字体如果没有就往后面查找，依次类推； Unicode字体 字体加粗 font-weight 如果要用数字来表示加粗或者不加粗，千万不能书写单位px； 字体样式(风格) font-style 实际开发中我们很少让文字倾斜，但是我们会让倾斜的i和em不倾斜； 文本水平居中 text-align:center; text-align文本居中控制，取值：left、right、center； text-align让文字在父级盒子里面居中显示； 文本的行高 line-height line-height取值为数字+px单位， 文本首行缩进 text-indent text-indent首航缩进，取值为具体的像素值或者直接em，1em等于一个字的大小； text-indent:2em; 首行缩进2个字； 文本线条装饰 text-decoration text-decoration:none;没有线 text-decoration：underline；下划线 text-decoration:line-through;中 划线/删除线 text-decoration:overline; 上划线 text-align:center; 详解 实际的意思是让文本在父级盒子里居中显示，实际工作中text-align: center;不紧可以让文字居中，也可以让行内元素（a、span、b、strong、u、i、s、em、ins），行内块元素（img、input、button）在父级盒子中居中； 注意：想要元素利用text-align:center;居中显示，必须要有一个父级盒子； a链接的伪类四种状态： a:link 未访问的链接（访问前） a:visited 已访问的链接（访问后） a:hover 鼠标移动到连接上（鼠标经过） a:active 选定的链接（按下鼠标的时候） 三种显示模式相互转换 将元素转化为块级元素：display:block; 将元素转化为行内元素：display:inline; 将元素转化为行内块元素：display:inline-block; background属性 背景颜色background-color： background-color取值是具体的色值 background-color:#0ff; 背景图片background-image： background-image取值是url(图片路径) background-image:url(img/03.jpeg); 背景平铺background-repeat： background-repeat 取值： 平铺：repeat 不平铺：no-repeat X轴平铺：repeat-x Y轴平铺：repeat-y 图片定位background-position： background-position:X坐标（水平方向） Y坐标（垂直方向）； 方位名词取值： 可以是纯数字+px也可以是方向英文（top/bottom/left/right）; 方位名词left和right只能控制水平方向（X轴） 方位名词top个bottom只能控制垂直方向（Y轴） 方位名词center可以同时控制水平和垂直的方向 注意：如果使用方向英文只写一个值另外一个值就默认居中，所以两个值建议都写； 精确取值 background-position:X坐标（水平方向） Y坐标（垂直方向）取值如果去精确单位，第一个是X轴的值，第二个是Y轴的值，如果只写了一个值就表示X轴，Y轴默认为center； 背景图片固定： background-attachment:fixed; 背景图片定位是没有父级的； 盒子模型组成 内容： 实体化宽高和里面的文字图片等等 边框： border 内边距： padding 拉开内容到盒子边缘的距离； 外边距： margin 拉开盒子与盒子之间的距离； 浮动：float：left/right 浮动布局的注意事项 01、利用浮动布局的时候，建议给浮动的元素嵌套一个父级元素，然后给父级最好设置固定的高度，就减少出现兼容问题； 02、如果要用浮动布局做修改，所有的父级盒子都必须浮动，不然不符合规范； 下图问题：新闻列表用的是h3标签，是块级元素，默认的宽度是100%，尽管下面的更多a右浮动了也上去 定位： 静态定位：position:static; 相对定位：position:relative;自己本身原来的位置，进行位置的偏移； 绝对定位：position:absolute;默认情况下是自己的父级盒子，但是如果绝对定位的父级盒子没有任何定位属性，参照物就以浏览器为参照去进行定位； 固定定位：position:fixed;绝对定位的参照物默认以父级为主，如果父级没有定位一层一层往上找，如果找不到定位的祖先盒子就以浏览器为参照物； 一般在实际过程中我们采用子绝父相的方法进行定位 H5+C3还可运用HBuilder的Mui框架进行app的混合原生开发。
| 
收藏
淘帖
踩
