HTML、 CSS、 JavaScript三者的关系
    网页主要由三部分组成： 结构（ Structure） 、 表现（ Presentation） 和行为（ Behavior）
    HTML —— 结构， 决定网页的结构和内容（ “是什么”）
    CSS —— 表现（ 样式） ， 设定网页的表现样式（ “什么样子”）
    JavaScript（ JS） —— 行为， 控制网页的行为（ “做什么”）
    一、 HTML语言
    1.1什么是HTML语言（ HTML概述）
    英文全称： Hyper Text Markup Language
    中文全称： 超文本标记语言
    HTML 语言是制作网页的最基本语言， 并且只能通过web浏览器显示出来。
    Hyper（ 超） ：
    用HTML制作的网页可以通过其中的链接从一个网页“跳转”至另一个网页。
    Text（ 文本） ：
    HTML是一种文本解释性的程序语言， 即它的源代码将不经过编译而直接在浏览器中运行时被“翻译”。
    Markup（ 标记） ：
    HTML的基本规则就是用“标记语言” ---- 成对尖括号组成的标签元素来描述网页内容是如何在浏览器中显示的。
    1.2 HTML文档结构
    HTML文档一般由两部分组成：
    1. 文档所要表达的内容信息（ 文字、 图片等） ；
    2. 一系列的HTML标签；
    1.3 HTML标签
    1.3.1 什么是HTML标签
    1. HTML标签是用 <> 所括住的指令， 主要分为：
        单标签： <起始标签/>
        双标签： <起始标签></结束标签>
    例如：
        <br/>
        <div></div>
        2. 通常使用的是双标签。 有一个起始标签就对应有一个结束标签。 标签内容写在起始标签和结束标签之间。
        <div>标签内容</div>
        3. 在元素的起始标签中， 还可以包含“属性”来设置元素的其他特性。 一个标签可以有多个属性,每个属性之间用空格隔开。
        <div 属性名="属性值"></div>
        例如：
        <div class="wrap" id="wrap"></div>
    4. 每一对双标签之间可以嵌套， 但不能交叉。
    正确示例：
        <div>
        <p></p>
        </div>
        错误示例：
        <div>
        <p>
        </div>
        </p>
    1.4 编码器
    1.4.1 WebStorm源码主体标签含义
        <!DOCTYPE> ：
        是一个声明不是 HTML 标签； 它是用来告诉 web 浏览器要使用哪个 HTML 版本来对页面进行编写。
        <html>：
        <html>是文档标识符， 它是成对出现的， 首标签<html>和尾标签</html>分别位于 HTML 文档的最前面和最后面， 明确地表示文档是以超文本标识语
        言（ html)编写的。 该标签不带有任何的属性。
        <head>：
        <head>标签用于定义文档的头部， 它是所有头部元素的容器。 <head> 中的元素可以引用脚本、 指示浏览器在哪里找到样式表、 提供元信息等等。
        <meta>：
        <meta>标签位于文档的头部， 用于定义文件信息， 对网页文件进行说明。 其中name属性主要用于描述网页， 与之对应的属性值为content， content中
        的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
        <body>：
        <body>标签用于定义文档的主体， 即在浏览器上看到的网页内容。
    1.5 HTML标签的使用
    1. HTML注释
    注释内容可插入文本中任何位置， 其内容不在网页中显示， 只在源码文档中供开发者备注使用。
        <!--注释内容--> 方法适用于文档主体部分
        //注释内容
        /*注释内容*/ 方法适用于文档引用标签部分
        2. 特殊字符
        在 HTML 代码中直接输入一些特殊字符是没有效果的， 需要用专有的代码标记。
        &nbsp; <!-- 空格 -->
        &lt; <!-- 左尖括号<或小于号 -->
        &gt; <!-- 右尖括号>或大于号 -->
        &copy; <!-- 版权符号© -->
        &reg; <!-- 已注册符号® -->
        &amp; <!-- 表示and符号& -->
        — <!-- 长破折号 -->
    3. div块标签
    <div>这是一个div块， 通常用于布局</div>
    4. 正文标题标签
        <h1>heading</h1>
        <h2>heading</h2>
        <h3>heading</h3>
        <h4>heading</h4>
        <h5>heading</h5>
        <h6>heading</h6>
    注意： 只有h1~h6 六个标签， 没有h7...
    5. 文本节标签
    <span>这是一个文本节</span>
    6. 强调标签
    <strong>加强语气</strong>
    7. 图片标签
    <img src="图片地址"/>
    8. 段落标签
    <p>这是一个段落</p>
    9. 超级链接标签
    <a href="链接地址">超链接， 打开新窗口</a>
    10. 文本域
    <textarea>文本内容</textarea>
    11. 无序列表标签
    <ul>
    <li>第一个</li>
    <li>第二个</li>
    <li>第三个</li>
    </ul>
    12. 有序列表标签
    <ol>
    <li>第一个</li>
    <li>第二个</li>
    <li>第三个</li>
    </ol>
    13. 自定义列表
    <dl>
    <dt>自定义列表项</dt>
    <dd>自定义列表项的定义</dd>
    </dl>
    14. table表格
    <table>
    <tr>
    <td>娱乐项目</td>
    <td>项目支出</td>
    </tr>
    <tr>
    <td>聚餐</td>
    <td>200元</td>
    </tr>
    </table>
    15. form表单
    <form>
    表单输入控件
    </form>
    16. 控制标签
    <label>控制标签， 平时无效果， 用作标记使用</label>
    17. 表单输入控件
    <input type="text"> <!-- 文本 -->
    <input type="password"> <!-- 密码 -->
    <input type="radio"> <!-- 单选框 -->
    <input type="button" value="点击"> <!-- 普通按钮 -->
    <input type="checkbox"> <!-- 复选框 -->
    <input type="submit"> <!-- 提交按钮 -->
    <input type="reset"> <!-- 重置按钮 -->
    <input type="file"> <!-- 文件上传 -->
    button和submit的区别：
    button 就是一个普通按钮， 没有任何功能。 而 submit 在用户点击后会自动提交 form 表单。
    18. 下拉列表
    <select>
    <option>川菜</option>
    <option>粤菜</option>
    <option>北方菜</option>
    <option>上海菜</option>
    <option>西餐</option>
    <option>泰国菜</option>
    </select>
    19. 内联框架
    <iframe src="需要显示的网页链接地址"></iframe>

HTML、 CSS、 JavaScript三者的关系的更多相关文章

  1. HTML、 CSS、 JavaScript三者的关系 1

    HTML. CSS. JavaScript三者的关系 网页主要由三部分组成: 结构( Structure) . 表现( Presentation) 和行为( Behavior)    HTML —— ...

  2. HTML,Css,JavaScript之间的关系

    简述HTML,Css,JavaScript 网页设计思路是把网页分成三个层次,即:结构层(HTML).表示层(CSS).行为层(Javascript). 1.HTML(超文本标记语言 Hyper Te ...

  3. html+css+javascript之间的关系与作用

    三者间的关系 一个基本的网站包含很多个网页,一个网页由html, css和javascript组成. html是主体,装载各种dom元素:css用来装饰dom元素:javascript控制dom元素. ...

  4. 浅析html+css+javascript之间的关系与作用

    三者间的关系 一个基本的网站包含很多个网页,一个网页由html, css和javascript组成. html是主体,装载各种dom元素:css用来装饰dom元素:javascript控制dom元素. ...

  5. 新手理解HTML、CSS、javascript之间的关系-修订

    几年前写过一篇博文 <新手理解HTML.CSS.javascript之间的关系>,没想到网上出现了不少转载,当时没有太用心,里面的很多内容有待商榷,这里发布重新发布一篇. 网页主要有三部分 ...

  6. Javascript Prototype __proto__ constructor 三者的关系

    JavaScript三大毒瘤 --- this,原型链,作用域 在我等菜鸟一步一步升级中的过程中,这三个概念总是困扰这我们(可能只有我吧,我比较蠢).这三个东西往往都很绕,今天我就来分享一下我对原型. ...

  7. html css javascript 加载的顺序

    html /css /javascript 这三者的加载顺序影响整个页面的加载速度.而加载速度的快慢直接影响pv(访问量),而且会影响经济收入.在大网站中,可能打开速度快一秒,一年能多带来上亿的收入. ...

  8. 原创的基于HTML/CSS/JavaScript的层级目录树

    之前参加过一些基于HTML/CSS/JavaScript的项目,当在页面中需要生成一颗目录树时,总是首先想着网上有没有现成的生成树的源代码,比如dtree.zthee,或者使用一些javascript ...

  9. 20170305深圳Meetup Rails中CSS，JS引用关系分析

    新手上路,若有错误请及时提醒 Rails中CSS,JS引用关系分析 一.Rails静态文件存放位置 二.Rails中CSS引用方式 三.Rails中JS引用方式与CSS类似 四.上面都是默认引用app ...

随机推荐

  1. impala 中SQL的优化方法

    1.取流水表的数据时,如果是使用全部分区数据,不能从SA层数据取数,需要改从SH层取数,因为SH层为parquet存储,查询性能较好. 2.对于脚本中使用的临时表,如果存在以下情况需要进行统计表信息  ...

  2. 后台向前台响应的json数据格式的一些问题

    最近在写后台向前台easyUI页面发送数据时遇到的一些报错. 首先easyUI内部封装了许多的方法和对象,以至于很多参数都不清楚,需要查询,其次easyUI也是有内置ajax所以从后台响应回来的数据一 ...

  3. Grassfire算法- 运动规划（Motion planning）

     Grassfire算法: 一.概念 这个算法是做图像处理的抽骨架处理,目的是求出图像的骨架,可以想象一片与物体形状相同的草,沿其外围各点同时点火.当火势向内蔓延,向前推进的火线相遇处各点的轨迹就是中 ...

  4. http服务详解（2）——httpd的配置文件常见设置

    HTTP服务器应用 http服务器程序 httpd apache nginx lighttpd 应用程序服务器 IIS .asp tomcat .jsp jetty 开源的servlet容器,基于Ja ...

  5. contos7下安装redis&redis的主从复制的配置&redis 哨兵（sentinel）

    一.centos7下安装redis 1.解压 redis-5.0.5.tar.gz 压缩文件 解压命令为: .tar.gz -C redis 解压后进入 redis 工作目录,进入 redis-5.0 ...

  6. PAT Advanced 1073 Scientific Notation (20 分)

    Scientific notation is the way that scientists easily handle very large numbers or very small number ...

  7. python学习之文件读写,序列化(json,pickle,shelve)

    python基础 文件读写 凡是读写文件,所有格式类型都是字符串形式传输 只读模式(默认) r  f=open('a.txt','r')#文件不存在会报错 print(f.read())#获取到文件所 ...

  8. 算法设计与分析 - 李春葆 - 第二版 - pdf->word v3

    1.1 第1章─概论 练习题 . 下列关于算法的说法中正确的有( ). Ⅰ.求解某一类问题的算法是唯一的 Ⅱ.算法必须在有限步操作之后停止 Ⅲ.算法的每一步操作必须是明确的,不能有歧义或含义模糊 Ⅳ. ...

  9. 201871010111-刘佳华《面向对象程序设计（java）》课程学习总结

    201871010111-刘佳华<面向对象程序设计(java)>课程学习总结 课程学习总结(45分) 经历了一个学期的<面向对象程序设计>课程学习,请每位同学完成以下任务: 点 ...

  10. 2019EC-Final参赛总结

    本来想发知乎上的,后来发现太长就放这好了23333 没写过这种东西,所以写得比较混乱&流水账 以下内容均为我的个人视角XD   赛前 在车上的时候,红太阳跟我们说他头晕(虽然他好像每场比赛都头 ...