• 标签默认样式值重置 (css reset)

<body></body>内默认有8px的外边距

<p></p>段落有上下默认36px外边距

<hx></hx>标题也有默认外边距

body,p,h1,h2,h3,h4,h5,h6,dl,dd{margin:0;}利用群组清掉默认外边距

<ol></ol> <ul></ul>  有默认的列表样式

ol,ul { list-style:none; margin: 0 ; padding: 0 ; } 清掉列表的默认项

a{text-decoration:none;}清掉a标签的文本默认样式

/* font-fanmily:XX ;*/

img 标签不是所有浏览器都有

img { border: none ; } 清掉img标签的默认样式

*{}通配符,包含所有的标签(不经常使用)


  • 标签基本特性和转换
<body><a href="#">a标签(链接,下载,锚点)</a><img src="img/pp.jpg" alt="flower"><span>区分样式</span><strong>强调(粗体)</strong><em>强调(斜体)</em><!--内联,内嵌,行内属性标签:1.默认同行可以继续跟同类型标签。2.内容撑开宽度。3.不支持宽高。4.不支持上下的margin和padding。5.代码换行被解析。

块属性标签:1.默认独占一行显示。2.没有宽度时,默认撑满一排。3.支持所有css命令 -->       <p>段落</p><div>块</div><h1>标题一</h1><h6>标题六</h6><ol><li>列表项</li><li>列表项</li><li>列表项</li></ol><ul><li>列表项2</li><li>列表项2</li><li>列表项2</li></ul><dl><dt>定义列表标题</dt><dd>定义列表项</dd><dd>定义列表项</dd><dd>定义列表项</dd></dt></body>

display:block 显示为块

display:inline 显示为内嵌


 

  • inline-block特性和应用

inline-block 一行内的块

特性:

1.块在一行显示;

2.行内属性标签支持宽高;

3.没有宽度的时候内容撑开宽度

(<img>)

存在问题:
1.代码换行被解析

2.ie6 ie7不支持块属性标签的inline-block


  • 前端书写规范

1、所有书写均在英文半角状态下的小写;

2、id,class必须以字母开头;

3、所有标签必须闭合;

4、html标签用tab键缩进;

5、属性值必须带引号;

6、<!-- html注释 -->(--后一定要有空格

7、/* css注释 */ (*后必须加空格

8、ul,li/ ol,li/ dl,dt,dd拥有父子级关系的标签;

9、p,dt,h标签 里面不能嵌套块属性标签;(标题内只有标题

10、a标签不能嵌套a;

11、内联元素不能嵌套块;


转载于:https://www.cnblogs.com/BBeyes/p/6525223.html

HTMLCSS学习笔记(三)----标签类型转换、样式重置相关推荐

  1. amazeui学习笔记--css(基本样式3)--文字排版Typography

    amazeui学习笔记--css(基本样式3)--文字排版Typography 一.总结 1.字体:amaze默认非 衬线字体(sans-serif) 2.引用块blockquote和定义列表:引用块 ...

  2. iView学习笔记(三):表格搜索,过滤及隐藏列操作

    iView学习笔记(三):表格搜索,过滤及隐藏某列操作 1.后端准备工作 环境说明 python版本:3.6.6 Django版本:1.11.8 数据库:MariaDB 5.5.60 新建Django ...

  3. OpenCasCade学习笔记(三):加载显示STEP格式图片,并实现平移、缩放和旋转操作

    OpenCasCade学习笔记(三):加载显示STEP格式图片,并实现平移.缩放和旋转操作 C3DWidget.h #pragma once#include <QtWidgets/QApplic ...

  4. 【AngularJs学习笔记三】Grunt任务管理器

    为什么80%的码农都做不了架构师?>>>    #0 系列目录# AngularJs学习笔记 [AngularJs学习笔记一]Bower解决js的依赖管理 [AngularJs学习笔 ...

  5. java学习笔记(三):前端miniUI控件库入门

    java学习笔记(三):前端miniUI控件库入门 最近在一家公司实习学习,一上来就需要学习了解相关的前端内容--miniUI.而这个内容自己本身并没有了解学习过,上手也是遇到了不少的问题,于是想把自 ...

  6. 数组存储与指针学习笔记(三)指针与数组

    嵌入式C语言学习进阶系列文章 GUN C编译器拓展语法学习笔记(一)GNU C特殊语法部分详解 GUN C编译器拓展语法学习笔记(二)属性声明 GUN C编译器拓展语法学习笔记(三)内联函数.内建函数 ...

  7. J2EE学习笔记三:EJB基础概念和知识 收藏

    J2EE学习笔记三:EJB基础概念和知识 收藏 EJB正是J2EE的旗舰技术,因此俺直接跳到这一章来了,前面的几章都是讲Servlet和JSP以及JDBC的,俺都懂一些.那么EJB和通常我们所说的Ja ...

  8. amazeui学习笔记--css(基本样式)--样式统一Normalize

    amazeui学习笔记--css(基本样式)--样式统一Normalize 一.总结 1.统一浏览器默认样式: Amaze UI 也使用了 normalize.css,就是让不同浏览器显示相同的样式 ...

  9. tensorflow学习笔记(三十二):conv2d_transpose (解卷积)

    tensorflow学习笔记(三十二):conv2d_transpose ("解卷积") deconv解卷积,实际是叫做conv_transpose, conv_transpose ...

  10. Ethernet/IP 学习笔记三

    Ethernet/IP 学习笔记三 原文为硕士论文: 工业以太网Ethernet/IP扫描器的研发 知网网址: http://kns.cnki.net/KCMS/detail/detail.aspx? ...

最新文章

  1. cuda cudnn pytorch版本对应关系
  2. linux 系统权限 数字含义
  3. scala 定义空list_Scala的存在类型
  4. Hihocoder 小Hi小Ho扫雷作死一二三
  5. 设计师更高效_如何丢掉我的工作使我成为一名更好的设计师
  6. 【二分】防具布置/秦腾与教学评估(ybtoj 二分-1-2/jzoj 1253/luogu 4403)
  7. 集合对偶律:分别用图文证明
  8. 南师大632c语言程序设计,单片机c语言学习心得632.docx
  9. 原神抽卡记录分析工具源码全开源
  10. 检测php常量是否存在,php判断变量常量是否存在_PHP教程
  11. Express 常用中间件 body-parser 实现解析
  12. Android 屏幕防偷窥,Android 8.1将发布:启用TLS加密防偷窥
  13. Security+ 学习笔记50 取证技术
  14. linux php zend load,在Linux系统中为PHP5.3安装Zend Guard Loader
  15. 图像处理中的直方图与均衡化
  16. CTF常见的php函数
  17. 开源免费的录屏gif工具
  18. Processing绘制随风飘扬的名画
  19. 阿里MNN推理框架相关介绍
  20. NOIp初赛模拟题及标准答案(提高组)

热门文章

  1. python源码中的学习笔记_第1章_print 函数与数据类型
  2. 百度课程——基于深度学习的自然语言处理
  3. 深度学习TF—14.WGAN原理及实战
  4. ​每一页都是知识点,这本Flutter企业级实践指南太绝了
  5. 线程与进程最通俗易懂的解释(附面试题与答案)
  6. python类:magic魔术方法
  7. firefox浏览器和IE
  8. html ul li 的高度,ul与li高度不一致
  9. mysql从一个表查询插入另一个表存在时更新_漫谈MySQL的锁机制
  10. c语言~符号_条件编译指令(符号),C语言条件编译指令完全攻略