系统讲解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 条评论
登录 后参与评论

相关文章

  • 在Mac下配置PHP开发环境:Apache+php+MySql

    <span class="pln">sudo apachectl start</span>

    慕白
  • Java的算数运算符、关系运算符、逻辑运算符、位运算符

    b=5,a=5 c=-5,a=5 d=3,l=3 f=3,m=4 g=3,n=3 h=6,o=5

    慕白
  • Web前端开发推荐阅读书籍、学习课程下载

    学校里没有前端的课程,那如何学习JavaScript,又如何使自己成为一个合格的前端工程师呢?

    慕白
  • 如何学会傅里叶变换?

    作者:张苏 链接:https://www.zhihu.com/question/22202980/answer/20973635 来源:知乎 著作权归作者...

    bear_fish
  • 使用MongoDB构建数据库集群

    MongoDB是一个领先的非关系型数据库管理系统,也是NoSQL运动的重要成员。MongoDB不是使用关系数据库管理系统(RDBMS)的表和固定模式,而是在文档...

    ★忆先★
  • 【前端统计图】echarts多条折线图和横柱状图实现

    王小婷
  • WebSocket

    HTTP协议是一种无状态协议,服务器端本身不具有识别客户端的能力,必须借助外部机制,比如session和cookie,才能与特定客户端保持对话。

    奋飛
  • 51job成功登陆美国纳斯达克 融资7350万美元

    新浪科技讯 美国东部时间2004年9月29日早上10:58分(北京时间2004年9月29日晚10时58分),前程无忧网(www.51job.com)正式在美国纳...

    数据和云01
  • 一步一步搭建前端监控系统:接口请求异常监控篇

    背景:市面上的监控系统有很多,大多收费,对于小型前端项目来说,必然是痛点。另一点主要原因是,功能虽然通用,却未必能够满足我们自己的需求, 所以我们自给自足也许是...

    Fundebug
  • 网易NEC水平垂直居中

    HTML5学堂:水平垂直居中在项目开发中可以算是比较常见的吧,所以之前也给大家分享了HTML+CSS水平垂直居中的实现方法。今天主要给大家分享网易NEC里面是如...

    HTML5学堂

扫码关注云+社区

领取腾讯云代金券