登录  /  注册
首页 > 博客列表 > 【HTMLl】html 基础（结构-元素-emmet语法）
博主信息
博文 94
粉丝 0
评论 0
访问量 111210
专题推荐
更多>
相关推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
【HTMLl】html 基础（结构-元素-emmet语法）
可乐随笔
原创
634人浏览过

1. html 文档结构

  1. element = tag + attribute
  2. 元素 = 标签 + 属性
  3. html文档 = <!DOCTYPE> + <html>
  4. html文档根元素 = <head> + <body>

2.html 渲染方式

  1. 自动修复: 校正语法,缺失元素
  2. 显示顺序: 书写顺序一致,左->右,上->下,同步/异步.

3. html 页面三宝

  1. element: DOM元素
  2. css: 层叠样式表
  3. JavaScript: 前端脚本

4. html 渲染

  1. 排列顺序: 可以自定义
  2. 元素类型:
    • 块 block: h1,p,div,ul,table,footer,nav等等;
    • 行内 inline: a,li等;
    • 行内块 inline-block: 通常用来描述外部资源,图像,视频,表单控件等;
  3. 行内元素,默认”水平排列”, 自动换行,默认从左到右显示;
  4. 可以通过自定义布局和JS调整显示位置;

5. Emmet语法

  1. <!-- 1. 标签与内容 `{text}` -->
  2. <!-- 2. 属性与语法糖 [键值对]{内容} -->
  3. <!-- [id=app]{app} -->
  4. <!-- [class="title"]{title} -->
  5. <!-- #app{app1} -->
  6. <!-- .title{title} -->
  7. <!-- 3. 重复: '*' -->
  8. <!-- .container{box}*3 -->
  9. <!-- 4. 父与子: `*` -->
  10. <!-- ul>li{item}*3 -->
  11. <!-- 5. 兄弟关系: `+` -->
  12. <!-- h3{标题}+p{内容} -->
  13. <!-- 6. 父级: '^' -->
  14. <!-- .box>span{text}^h3{小标题} -->
  15. <!-- 7. 分组: '(...)' -->
  16. <!-- nav>h3{导航}+ul>li*3>a{link} -->
  17. <!-- 8. 序号: '$','$@3' -->
  18. <!-- ul>li{item-$@3}*3 -->
批改老师：PHPzPHPz

批改状态：合格

老师批语：
本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！
全部评论 文明上网理性发言，请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
app下载
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部
    • 登录PHP中文网，和优秀的人一起学习！
    全站2000+教程免费学
    微信扫码登录