HTML与CSS基础知识中易被忽略的知识点

HTML与CSS中易被忽略的基础知识点

在前端开发中，HTML和CSS是每一个梦想成为前端开发工程师的同学必学的入门功夫，很多人认为HTML和CSS很简单，说到底，主要还是因为HTML和CSS没有像java、c语言那样难以理清的逻辑语法，如果深入学习了HTML与CSS之后，就会发现，这种看似简单的前端语言并不是那么容易就能熟练的拿捏。

很多人就是因为自信对HTML以及CSS这种“简单”语言无所不知，然而却忽略了它其中很多人不求甚解的知识点，导致在走向实际工作时，或是在面试官的考核时，屡现尴尬。接下来，我将结合我自身经验来向各位有兴趣的朋友讲一讲那些不被关注的HTML与CSS冷知识。

HTML易忽略的知识点

DOCTYPE:即为Document Type（文档类型）的简写，声明页面所使用的XHTML（HTML）的版本，一个页面只有声明了正确的DOCTYPE，XHTML与CSS中的标识等才能正常生效。它包含三种类型：Strict、Transitional 、Frameset。（我的另外一篇博客“细说DOCTYPE”有详细说明，在此不多研究）。

  code标签，写在html中来声明代码段，文本中的代码不做翻译运行，直接显示原始代码；

  address标签，用于加在文本中地址中，标签包含的文本字体为斜体；

  strong和em标签用于凸显一段文本中的字体；

  q标签用于短文本引用；

  blockquote标签用于长文本的引用；

  pre标签用于按照原格式显示在页面上（预格式化文本标签），例如我们在写HTML时页面会自动忽略我们从键盘进行的空格换行之类的操作，这时如果加上pre标签，网页就会按照我们输入的样式进行显示；

  table标签中的summary标签用于添加表格的摘要（不显示），而caption标签为表格设置标题（显示）；

  a标签后的target标签设置为“_blank”表示链接在新窗口打开；

 href="mailto:收件地址?cc=抄送地址&bcc=密件抄送地址&subject=主题&body="邮件内容"；（这是邮件的发送格式）；

  radio类型的选择按钮的name值要相同才是单选效果；

  label标签for=“控件id名称”要与关联的控件id一致，点击label时可触发控件事件；

  元素分类：

  常用的块状元素有：
div,p,h,ol,ul,dl,table,address,blockquote,form

  常用的内联元素有：
a,span,br,i,em,strong,label,q,var,cite,code

  常用的内联块状元素有：
img,input

CSS易忽略基础知识点

  CSS的引入方式除了我们常用的内嵌外联，还有在css中include方式（虽然一般不会使用，但需要知道）；

  缩写“font”样式时，“font-size”和“line-height”要用“/”隔开；

  chrome、firefox及IE8以上可以设置display：table-cell为表格单元，vertical-align：middle；设置垂直居中；

  <input type="text" name="username"autofocus="autofocus"/>;页面加载后，浏览器自动聚焦username字段；

  当margin-top、padding-top的值是百分比时，计算方式都是相对于最近父级块级元素的width值；

  Safari、chrome、搜狗浏览器都有webkit内核，而firefox使用Gecko内核，IE系列使用Trident内核，使用较新的css时，浏览器要添加前缀firefox:-moz; IE:-ms; 带webkit内核的浏览器:-webkit。

  以上为个人总结的内容，在后续过程中会继续添补缺漏。