【HTMLl】html 基础（结构-元素-emmet语法） - PHP前端

首页 > 博客列表 > 【HTMLl】html 基础（结构-元素-emmet语法）

博主信息

博文 94

粉丝 0

访问量 118004

专题推荐

更多>

1. html 文档结构

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

2.html 渲染方式

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

3. html 页面三宝

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

4. html 渲染

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

5. Emmet语法

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

批改老师：

PHPz

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

【HTML】文档结构与元素，标签，属性的类型

2022-11-27 20:51:59