思诚New学堂是思诚科技旗下高端IT实训品牌,是老学员一致推荐的Java企业级开发、Web全栈开发、UI设计、大数据开发实训机构。
思诚New学堂 LOGO
 您现在的位置:首页 > Web资料库

前端之HTML元素

来源:思诚科技    更新时间:2018-5-10

HTML元素

元素分类

思诚科技-前端HTML元素

  • 学什么之前端HTML元素
  • 块级元素: divh1-h6hrmenuolullidldtddtablepform
    • 自身属性为display: block;的元素,通常使用块级元素进行布局(结构)的搭建。
  • 块级元素的特点
    • 独占一行
    • 从上到下依次排列
    • 直接控制宽度、高度以及盒子模型的相关CSS属性
    • 不设置宽度,块级元素的宽度是它的父元素内容的宽度,高度是自身内容的高度
    • 可以嵌套行内元素
    • ul/ol下面只能是lidl下面只能是dt ddp不能包含其他块级元素包括自身
  • 行内元素spanastrongiemsutextareainputselectlabelimgsupsub
    • 自身属性为display: inline;的元素,通常使用行内元素进行文字、小图标(小结构)的搭建。
  • 块级元素的特点
    • 不独占一行,和其他内联元素从左到右在一行显示
    • 不能直接控制宽度、高度以及盒子模型的相关CSS属性,可以直接设置内外边距的左右值
    • 宽高由自身内容的大小决定(文字、图片等)
    • 只能容纳文本或其他内联元素(不能在内联元素中嵌套块级元素)

CSS外链引入方式

  • linkhtml标签,@importcss提供的方式,写在css文件或style标签中。
  • 加载顺序有区别,当一个页面被加载时,link引用的css文件会被同时加载,而@import引入的css文件会等页面全部下载完成后再加载。
  • 使用js控制DOM改变CSS样式,只能使用link标签,因为import不能被DOM控制。

CSS命名规范

  • 头部:header
  • 内容:content/container
  • 尾部:footer
  • 导航:nav
  • 侧栏:sidebar
  • 栏目:column
  • 页面外围控制整体布局宽度:wrapper
  • 左右中:left right center
  • 登陆条:loginbar
  • 标志:logo
  • 广告:banner
  • 页面主体:main
  • 热点:hot
  • 新闻:news
  • 下载:download
  • 子导航:subnav
  • 菜单:menu
  • 子菜单:submenu
  • 搜索:search
  • 友情链接:friendlink
  • 页脚:footer
  • 版权:copyright
  • 投票:vote
  • 合作伙伴:partner
  • 滚动:scroll
  • 内容:content
  • 标签页:tab
  • 文章列表:list
  • 提示信息:msg
  • 小技巧:tips
  • 栏目标题:title
  • 加入:joinus
  • 指南:guild
  • 服务:service
  • 注册:register
  • 状态:status

  • 上一篇文章:

  • 下一篇文章: 没有了
  •  

    0791-87557233

    重视每个来电 珍惜您的时间
    思诚开发者沙龙

    江西思诚科技有限公司  赣ICP备17006097号  CopyRight©2014 - 2018    移动版

    Top