系统讲解CSS应用

​

一、HTML基础强化

0x1 理解HTML

HTML是一个“文档”，描述文档的结构，有区块和大纲。

点此查看相关开源项目

0x2 表单

<input type="radio" name="radio1" id="radio1-2" /> <label for="radio1-2">选项二</label> //关联的关键是ID

这里的选项二可以点击文字达到点击单选框的效果。

<button type="button">普通按钮</button> <button type="submit">提交按钮一</button> <input type="submit" value="提交按钮二"/> <button type="reset">重置按钮</button>

submit/reset必须要有form才有效果。

0x3 HTML版本

HTML4/4.01 (SGML)

XHTML(XML)

HTML5

在XHTML中要求很严格,下面的都有错误：

<div class="test">合法</div> <DIV class="test">标签名大写</DIV> <div ID="test">属性名大写</div> <input type="checkbox" checked /> <p>标签不结束1 <div style=color:red>属性不带引号</div>

0x4 HTML5新增语义

• header/footer 头尾
• section/article 区域
• nav 导航
• aside 不重要内容
• em/strong 强调
• i icon

0x5 HTML元素分类

• 按默认样式分
  • 块级 block
  • 行内 inline
  • inline-block 表单、下拉框、输入框

<div>DIV元素</div> //块级 <p><span>内联元素</span><em>内联元素</em><strong>好巧，我也是内联元素</strong></p> //行内 <p><select><option>下拉框</option></select> //inline-block <span>你猜左边是什么元素</span></p>

* 按内容分

查看官方文档

0x6 HTML元素嵌套

块级元素可以包含行内元素

块级元素不一定能包含块级元素

“行内元素一般不能包含块级元素”

0x7 HTML默认样式

除特别注明外，本站所有文章均为慕白博客原创，转载请注明出处来自https://cloud.tencent.com/developer/article/1176188

​