系统讲解CSS应用

一、HTML基础强化

0x1 理解HTML

HTML是一个“文档”,描述文档的结构,有区块和大纲。 点此查看相关开源项目

0x2 表单

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

1234

<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>

12345

<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>

1234567

<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>

1234

<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://geekmubai.com/programming/710.html

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Java技术分享圈

杨老师课堂之JavaScript案例全选、全不选、及反选

        3.2当第一个按钮--全选--被单击 会 触发一个函数,此函数涉及到复选框全部选中功能,但是复选框一共有多少个是未知的,所以我们要去做一个循环,...

662
来自专栏hightopo

原 快速创建 HTML5 Canvas 电

2322
来自专栏hightopo

基于 HTML5 Canvas 的属性值点击出现多选项的制作

1392
来自专栏小古哥的博客园

Vue入门

一、引入vue 方法一:下载vue.js,然后像引用jquery一样,在HTML中使用script标签引入 <script src="https://unpkg...

3978
来自专栏武军超python专栏

2018年9月9日用HTML开发网页的总结

今天学到的新单词: relationship n关系 inherit v继承 rel:relationship的英文缩写·REL属性用于定义链接的文件...

1826
来自专栏前端知识分享

第153天:关于HTML标签嵌套的问题详解

div、h1~h6、address、blockquote、center、dir、dl、dt、dd、fieldset、form、hr、isindex、menu、...

1192
来自专栏Coco的专栏

谈谈一些有趣的CSS题目(八)-- 纯CSS的导航栏Tab切换方案

1722
来自专栏向治洪

Markdown对应Yelee主题语法

概述 这里说的是Yelee主题的语法和原生语法是有些区别的;更多的基础语法可以到Cmd Markdown上面去查看;但是我觉得都会各有不同吧 注意这里说的不是真...

2006
来自专栏偏前端工程师的驿站

CSS魔法堂:选择器及其优先级

一、前言                               首先看看一道阿里这期网申的题目吧! 1.找出下面优先级相同的选择器   A. im...

2336
来自专栏有趣的django

20.DOM

定义 文档对象模型(Document Object Model)是一种用于HTML和XML文档的编程接口。 查找元素 1.直接查找 document.getEl...

3495

扫码关注云+社区

领取腾讯云代金券