![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
HTML与CSS
幼儿园中的小小白
以梦为马,诗酒趁年华!!!
展开
-
网站标题上logo
网站标题上logo<head> <meta charset="UTF-8"> <title>百度一下,你就知道</title> 网站标题上log支持图片格式为.ico link:链接 rel:指当前文档与被链接文档的关系 stylesheet:外部样式表 type:类型 <li...原创 2019-07-15 14:06:02 · 600 阅读 · 0 评论 -
CSS边距与定位
1.上外边距:margin-top2.右外边距:margin-right3.下外边距:margin-bottom4. 左外边距:margin-left5.定位的概念:常见的定位:相对定位,绝对定位,固定定位。 相对定位: position:relative 让元素相对于自己原来的位置进行调整。 作用:1.微调自身时使用 ...原创 2019-07-12 09:14:41 · 267 阅读 · 0 评论 -
HTML表格
1.表格: <table>:表格开始或结束 <tr>:表格里面的行 <td>:表格里的每一个单元格 <th>:表头单元格 <caption>:表格的大标题 <thead>:表头 <tbody>:表格主题 <tfoot>:表脚 cel...原创 2019-07-12 09:17:29 · 110 阅读 · 0 评论 -
常见的文本属性
CSS文本属性1.text-align:用于设置文本水平对齐方式 left、right、center、justify(两端对齐方式)2.vertical-align:用于设置文本的垂直对齐方式。 top:把元素的顶端与同一行当中最高的元素顶端对齐; middle:将元素放在父元素的中间位置; bottom:...原创 2019-07-12 09:23:30 · 1196 阅读 · 0 评论 -
CSS浮动
1.浮动: (float) left|right(左浮动/右浮动) 浮动元素会脱标2.浮动(脱标特点): 1) 不在占用标准文档流的位置; 2) 浮动元素会互相贴靠;但是父元素的宽度不足以放子元素的时候,子元素就会折行。 (给父元加一个足够的高度就能避免折行) 3)字围现象3.浮动会导致元素崩塌...原创 2019-07-12 09:28:48 · 97 阅读 · 0 评论 -
CSS光标属性
光标: 1)cursor:pointer 小手 2)crosshair 十字架 3)move 拖拽十字架 4)text 光标 5)wait 等待 6)help 帮助 7)向东 cursor: e-resize; 8)向西 cursor: w-resize; 9)向南 cursor: s-resize; 10)向北 ...原创 2019-07-12 09:32:09 · 186 阅读 · 0 评论 -
HTML盒子模型
盒子模型(框模型):1.可以HTML元素看做一个盒子,这个盒子会有宽,高,边框,内边距,外边距 组成。2.盒子模型组成:内容(content),内边距(padding),边框(border),外边距(margin)。9 margin:控制自身元素与其他元素之间的位置关系。 padding:控制自身内容与自身边框之间的距离关系。<head> <meta c...原创 2019-07-12 09:33:57 · 454 阅读 · 3 评论 -
常见的浏览器兼容性问题
第一类 块状元素float后,又添加了横向的margin,在IE6下比设置的值要大: 解决方案:给float标签添加display: inline 将其转换为行内元素第二类 表单元素行高不一致 解决方案: 给表单元素添加float:left 或 vertical-align:middle第三类 设置较小高度的容器,在IE6下不识别小于10px的高度 解决方案:给容器...原创 2019-07-12 09:35:22 · 94 阅读 · 0 评论 -
常见的兼容性骇客
一、浏览器兼容性骇客: 使用目的: 保证书写的网页在不同的浏览器上都能兼容 定义: 针对不同的浏览器书写不同的HTML结构, CSS样式, 从而使浏览器达到一定的渲染效果。常见的hack: HTML hark和CSS hack。 二、HTML hack: 常见的HTML hack手段之一: 条件注释; 普通的HTML注释: <!-- 注释内容 -->...原创 2019-07-12 09:39:46 · 170 阅读 · 0 评论 -
HTML中的块元素和行内元素
块元素: 1)address:地址 2)div:常用标签 3)dl:自定义列表 4)h1~h6:标题标签 5)ul:无序列表 6) ol:有序列表 7)p:段落 8)hr:水平分割线 9)table:表格 10)form:表单 11)pre:格式化标签行内元素: 1)a:超链接 2...原创 2019-07-12 09:43:29 · 522 阅读 · 0 评论 -
HTML框架
一、为何不推荐使用frameset框架:1.对搜索引擎不友善 (当搜索页面时只会搜索到frameset这个框架,底层的都搜索不到);2.用户体验不好,各个浏览器有差别。二、iframe优缺点:优点: 1.程序插入静态页面比较方便; 2.页面跟程序分离。缺点: 1.由于需要外链接文件(脚本样式),所以会增加请求; 2.会阻塞页面加载。三...原创 2019-07-12 09:45:23 · 77 阅读 · 0 评论 -
链接CSS
链接外部的CSS文件有两种方式: 1.link标签; 2.@import属性。共同点: 都可以链接外部的CSS文件。不同点: 1.link: 是标签, @import: 属性。 2.link标签只能在HTML文件中的head标签中利用href属性引入外部CSS文件, 而@import可以在HTML文件的style标签中当作style的属性, ...原创 2019-07-12 09:46:41 · 322 阅读 · 0 评论 -
HTML中的meta标签
1.meta:元 (表示网页的基本配置)2.charset:用于设置字符集3.常见的字符集有两个:1)UTF-8:国际通用的字符,包含地球上所有的文字2)gb2312 3)gbk:国标,是中国的字库字体规模:UTF-8 > gbk/gb2312保存大小:UTF-8 > gbk/gb2312速度:UTF-8 < gbk/gb23124.meta标签中...原创 2019-07-11 09:45:58 · 144 阅读 · 0 评论 -
HTML中的img标签
1.img标签中的属性:<body> <img src="ll.jpg" alt="加载失败" title="提示字"> img:imge 图片的缩写 src=source资源(里面为图片路径) 图片格式:能用的图片格式:jpg(jpeg)png gif bnp 不能用的图片给格式:psd ai alt:当图...原创 2019-07-11 09:42:38 · 215 阅读 · 0 评论 -
CSS介绍
CSS:全称(Cascading Styleshteet) 层叠样式表。 作用: 用于HTML文档中元素的样式定义; 实现将网页内容与样式表分离; 提升代码的可重用性和可维护性。CSS和HTML之间的关系: HTML:网页的基本结构 CSS:用于美化HTML元素 HTML是页面的内容;CSS是页面的表现使用原则:1...原创 2019-07-11 09:40:05 · 99 阅读 · 0 评论 -
CSS选择器与动态伪类选择器
一、动态伪类选择器(多用于用户和网站交互的时候):1.link:链接没有被访问时候的状态2.visited:链接被访问后的状态3.hover:鼠标放到连接上时的状态4.active:鼠标激活链接时的状态二、语法:选择器名:+动态伪类{} a:link{ color:red; } a:visited{ color:blue; ...原创 2019-07-15 14:08:26 · 433 阅读 · 0 评论 -
CSS伪元素
一、伪元素或者伪选择器有两个:before(在什么之前), after(在什么之后)二、作用: before:在某个元素前或后面插入一个元素可以使用content属性来指定添加的元素的内容。 after:会在内容之后添加一个元素再添加的元素中我们可以使用content属性来指定添加的元素的内容。...原创 2019-07-15 14:11:15 · 72 阅读 · 0 评论 -
HTML元素的隐藏方式
一、元素的隐藏方式:1.display:none; 特点: 真正的隐藏元素。 (1) 将元素的display属性设置为none能够确保元素不可见; (2) 使用这个属性,被隐藏元素不占用任何空间; (3) 使用display:none隐藏元素,不能直接跟用户进行交互操作 (另外,使用读屏软件也不能读取到元素的内容,这...原创 2019-07-15 14:16:06 · 26655 阅读 · 0 评论 -
CSS自定义字体
一、定义字体 css: 允许自定义字体库的一个属性 @font-face: 自定义字体信息 format: 指定自定义的字体的格式 指定字体的路径和字体格式: src:url("fonts/icomoon.eot");二、常见的字体格式:format括号里要写的东西 eot: 兼容IE4以上的字体格式 turetype: (.ttf)格式 IE9以...原创 2019-07-15 14:17:26 · 399 阅读 · 0 评论 -
HTML中的a标签(超链接标签)与锚点
**target属性:**target:目标<a href=“http://www.baidu.com”target="_blank" (在新窗口打开网页)title=“我是提示字”>百度1)进入超链接后不等按退回按钮;2)光标放到超链接上会显示提示字。发邮件:电脑要支持发邮件 <a href="mailto:1602931932@qq.com"&...原创 2019-07-11 09:19:14 · 1703 阅读 · 0 评论 -
DTD详解
DTD: Document(文档) Type(类型) Definition(定义) 译为文档类型定义HTML5的DTD声明: 只有一种 <!DOCTYPE html>HTML4的DTD声明:有三种 第一种: Transitional:过渡 <!DOCTYPE HTML PUBL...原创 2019-07-11 09:21:42 · 289 阅读 · 0 评论 -
HTML介绍
1.HTML是什么? 1)全称:HyperText Markup Language 2)超文本标记语言 3)纯文本:1.只会保留文本的内容,不会保留文本的样式; 2. .doc和text保存相同的内容,.doc比text大; 3.HTML,CSS,JS都是纯文本2.html: 1)网页格式。 2)就是用...原创 2019-07-11 09:25:01 · 105 阅读 · 0 评论 -
HTML旧版本
;第一行:网页的声明,Doctype Defintion 文档类型的定义,简称DTDw3c是指定web的规范组织HTML,CSS,JS都是w3c定义发布的网页声明的主要作用:就是用来告诉浏览器,这是一个什么标准的网页 第二行:最大的HTML标签所有的网页内容,都包裹在这个标签当中所有的HTML标签都不区分大小写 第三行:head:头部文件配置用于描述文件字符集配置...原创 2019-07-11 09:29:31 · 307 阅读 · 0 评论 -
CSS中的background属性
1. 属性值: red,yellow,green,blue,white,gray,skyblue,purple,gold,brown,pink,yellowgreen,orange, rgb取值范围:0~255; background-color: rgb(); rgba:前三个值代表色值,第四值个是透明度(作用于背景颜色) b...原创 2019-07-11 09:31:59 · 330 阅读 · 0 评论 -
CSS中的border属性
合着写: border: 1px solid blue; 第一个值:border-width:边框的宽度; 第二个值:border-style:边框的样式; 第三个值:border-color:边框颜色;(transparent:透明色)分开写: border-width: 1px; border-color : blue; ...原创 2019-07-11 09:32:54 · 1662 阅读 · 0 评论 -
CSS单位
CSS单位1.px:像素。 特点:比较稳定和精确2.em:根据基准来缩放字体大小(相对值) 参考大小:1)父元素参考body(浏览器默认字体大小) 2)子元素参考父元素 em的值不是固定的会继承父元素的字体大小 在浏览器默认的字体中:1em=16px; 使用em的步骤: (1) ...原创 2019-07-11 09:34:18 · 97 阅读 · 0 评论 -
常见的浏览器内核
浏览器内核: 分为两部分1.渲染引擎;2.JS引擎。按照内核分类可以主要分为5大类:1)Trident内核 (IE内核): 代表IE,因为IE是捆绑在Windows中, 所以有很高的市场占有率 (不开源);2)Gecko内核: 代表是Firefox (开源); 优势: 跨平台。3)Mozilla: ( 网景公司跟微软竞争推出 (第一次浏览器大战) );...原创 2019-07-12 09:47:48 · 100 阅读 · 0 评论