ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

笔记

2022-06-06 08:01:13  阅读:108  来源: 互联网

标签:标签 元素 笔记 设置 div 选择器 block


HTML:   seo    sem

          Meta里边有keyword关键字

链接标签:

(1)a标签:图片路径、文件路径、网址、锚点

(2)Target: self、blank、parent、top、name

图片标签:

(1)src图片路径

(2)Alt无效替代  图片无法展示显示里边的属性(名字)

列表:

    (1)无序列表 <ul> <li></li> </ul>

(2)有序列表 <ol> <li></li> </ol>

(3)自定义列表<dl> <dt></dt><dd></dd> </dl>

表格:

    (1)colspan跨列   rowspan跨行

表单:

(1)form标签;action后端地址; method提交方式(get、post(比get安全,不暴露信息))

(2)表单提交以name为准

(3)type决定了类型

(4)提醒默认值:placeholder属性 

Iframe:

(1)Frameset

(2)iframe中的name属性配合a标签中的target属性使用

(3)iframe的src属性-加载新页面

 

盒子div:

(1)div块级容器

(2)Sapn行级容器

(3)div标签和span标签

(4)div:没有具体语义,是一个盒子一样的容器 里面可以放置任何标签  是块级元素 独占一行 可以设置宽高

(5)span:没有具体的语义 是一个容器 是行级元素 里面只能放置 行级元素 大小由内容决定 不能设置宽高

CSS

css选择器

基本选择器:

(1)id选择器  #

(2)类选择器  .

(3)标签选择器 

其他选择器:

(1)空格div,当前元素的所有后代元素-子子孙孙

(2)>div,当前元素下一级所有元素-只有子代

伪类选择器:

(1):hover鼠标经过是设置其样式

(2):active鼠标按下时设置的其样式

(3):visited选择已访问的链接,并设置其样式-针对a标签

css优先级

(1)style属性>ID选择器>class选择器>标签  id  classname  p

(2)就行原则,同级别选择器则取最新属性生效

 

样式

文本样式-font

(1)font-size、font-weight、font-family

(2)line-height  行高

(3)首行缩近   text-indent:50px;

(4)Text-decoration:none 删除下划线

(5)Text-decoration:line-through 从内容中画一条线

背景样式

(1)背景色:mso-char-indent-count:2.0">(2)路径:background-image:url(图片路径)  //精灵图

(3)不重复 background-repeat:no-repeat;

(4)平铺/竖铺 background-repeat:repeat-x/repeat-y;

(5)background-position

①top-left(第一个值代表上中下,第二个值代表左中右)

②x% y%(第一个水平位置,第二个垂直位置)左上角为0%,0%,右下角为100%,如果只有一个值则另外一个值为50%

③Xpx  Ypx

(6)background-size

①length:长度,如果只设置一个值则第二个值会被设置成auto

②percentage:百分比,如果只设置一个值则第二个值会被设置成auto

③cover:覆盖背景,保持横纵比

④contain:图片不超出标签范围的情况下变成最大,且保持横纵比

布局样式

文档流:即文档的排列方式,在同一个平面中从左到右,从上到下

    浮动  float

    清除浮动: clear:both

定位-position

(1) position与top、bottom、left、right联用

(2)Absolute:绝对定位,相对于静态定位(static)以外的第一个父元素进行定位,若在非静态内则以该非静态元素为定位

(3) Fixed:绝对定位,是相对于浏览器窗口为进行定位,即有滚动条时页面效果相对静止类似登录弹框

(4)Relative:相对定位,相对于其原本自身正常位置进行定位,即left: 20px会向元素的left位置添加2o像素,以其本身原本的位置

(5) static: 默认值

(6)lnherit:规定应该从父元素继承position属性的值

(6)sticky: h5-粘性定位,left,top不设置值时不脱离文档流,设置后类似fixed效果盒子层次z-index属性,数值越高越在顶层

呈现形式

(1)0 block:块级标签-可设置宽高,元素独占一行

(2)inline:行级标签-不可设置宽高,元素自适应内部内容

(3) inline-block:介于前两个之间,可设置宽高,但不独占一行

 

块级元素:p h div block 独占据一行 有宽高 
内联元素:span a 挨个放 没宽高 有东西占据空间 没东西 不占据inline-block; 有东西占据空间 独占据一行 可以设置宽高 

居中设置方法:text-align: center;或者父框的padding 自身的margin
想要设置边框和内容之间的距离:padding
想要a标签有边框效果:设置display  inline-block
想要div不单独占据一行:设置float或者设置display inline-block

标签:标签,元素,笔记,设置,div,选择器,block
来源: https://www.cnblogs.com/bugshaonv/p/16345896.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有