• HTML学习-----HTML开发代码构成


    HTML开发代码构成

    h5 开发,本质上就是编写一个 .html 格式的文档,最终通过浏览器执行该文档,那么一个 html 文档中都包含哪些代码
    • 标签不区分大小写 <标签名 属性="">标签名>
    • 元素可以省略结束标签
    • 元素的属性可以省略属性值,例如disabledreadonly
    • 允许属性值不使用引号

    浏览器验证

    1. <canvas id="ca1" width="200" height="100" style="border:2px solid #ccc;
    2. background-color:#eee">当前浏览器不支持全新的画布标记canvas>
    可以判定当前浏览器是否支持 Html5 的新特性,如果执行后显示一个矩形效果,则是支持;否则在页面 显示对应不支持的提示信息

    HTML部分

    • HTMLhyper text markup language
    • hyper text:超文本,是指写在html文档中,并在网络上传输的 文字、图片、视频、音频
    • markup language:标记语言
    1. 所谓标记:就是指由一对尖括号扩起来,当中具有特定英文单词的标识
                 abc 给文字加粗显示
    1. 标记的其他叫法:标签 元素 element
    h5 开发,本质上就是编写一个 .html 格式的文档,最终通过浏览器执行该文档,那么一个 html 文档中都包含哪些代码。在线验证网址 validator.w3.org
    html 文档中只有两种类型的标记
    • 单标记 :例如 不能存放内容,多是一些功能性的标记
    • 双标记 :例如
      超文本
      有开始有结束,主要功能是存放内容,可以是超文本,也可以是其他标记
    1. <font color="red">实际开发中,我是通过这些标记符号,在文档中表示图片、视频、音频、文字,
    2. 只有通过标记,才能帮助浏览器识别font>

     代码示例

    1. <div>超文本div>
    2. <img>

     

    CSS部分

    CSS cascading style sheet 层叠样式表,用来对文档中的标签设置样式,从而改变超文本在浏览器上的渲染效果
    代码示例
    1. <style>
    2. /* css代码部分 */
    3. div{
    4. color : red
    5. }
    6. style>
    7. <div>大佬div>

    JS部分

    JS javaScript ,运行在浏览器端的脚本语言。平时我们看到网页,除了可以看以外,还可以处理一些用户的交互行为,例如:鼠标的点击,键盘的控制等等。这些功能需要通过 JS 来完成
    代码示例
    1. <style>
    2. /* css代码部分 */
    3. div{
    4. color : red
    5. }
    6. style>
    7. <div onclick="fun()">学习(超文本)div>
    8. <script>
    9. // js代码
    10. function fun(){
    11. alert("学习");
    12. }
    13. script>

    小结

    html5 开发就是,就是通过 HTML“ 标签 超文本 写入文档,再通过 CSS 给标签设置样式,完成超文本在 浏览器上的 排版 ,通过 JS 代码来为标签编写交互脚本,完成 超文本 在浏览器上的人机交互功能。
    • HTML5 将成为 HTMLXHTML 以及 HTML DOM 的新标准
    • HTML5 仍处于完善之中。然而,大部分现代浏览器已经具备了某些 HTML5 支持。
    HTML5 中的一些有趣的新特性:
    • 用于绘画的 canvas 元素
    • 用于媒体播放的videoaudio元素
    • 对本地离线存储的更好的支持
    • 新的特殊内容元素,比如 articlefooterheadernavsection
    • 新的表单控件,比如 calendardatetimeemailurlsearch
  • 相关阅读:
    spring5.0 源码解析(day04)registerBeanPostProcessors(beanFactory);
    [山东科技大学OJ]2300 Problem F: 短信计费
    技术分享 | 黑盒测试方法论—因果图
    Pandas数据清洗
    模块化编程
    java毕业设计春之梦理发店管理Mybatis+系统+数据库+调试部署
    umich cv-6-2 注意力机制
    Java智慧工地SaaS管理平台源码:AI/云计算/物联网
    2021 XV6 3:页表
    day16-测试自动化之selenium的PO模式
  • 原文地址:https://blog.csdn.net/weixin_64771061/article/details/127989666