欢迎光临
我的个人博客网站

网页概述(html/css)


网页概述

优点

  • 不需要安装
  • 无需更新
  • 跨平台

使用的语言

  • HTML、CSS、JavaScript

网页简史

  • 历史

    • 蒂姆·伯纳斯-李爵士万维网发明人
    • 从1990年代初的基本文本编辑的网页开始,1990年代中期的在线网页建设,到上世纪90年代末崛起的flash,再到后来的CSS和Javasvript的崛起,直到现在web 2.0时代鼎盛时期,网页设计经历了多次变革。
  • 浏览器和网页

    • 浏览器将编写的网页源代码渲染成我们想要的样子

    • 浏览器问题:

      存在很多不同的浏览器

      万维网的初期,网页编写没有标准

  • W3C的建立

    • 伯纳斯1994年建立万维网联盟(W3C)
    • 制定了网页开发标准,使同一个网页在不同的浏览器中有相同的效果

网页结构

  • 根据W3C标准,一个网页主要由三部分组成:结构、表现、行为。
    • 结构 html用于描述页面的结构
    • 表现 CSS用于控制页面中元素的样式,美化页面
    • 行为 JavaScript用于响应用户操作

HTML

  • HTML(Hypertext Markup Language) 超文本标记语言
  • HTML使用标签的形式来标识网页中不同的组成部分
  • 超文本指的是超链接,使用超链接可以从一个页面,跳转到另一个页面

基本语法

  • 注释:HTML中的注释是

    <!-- 注释内容 --> 
  • 标签:

    在HTML中用<标签名> </标签名>来标识特定的内容

    • 标签的属性

      • 属性是一个名值对(x=y)

      • 属性和标签名或其他属性使用空格隔开

      • 属性根据文档来编写,有些属性有属性值,有些没有,有属性值的要用引号引起来

        代码示例

        <h1>     这是我的<font color="red"  size="3">第一个</font>网页 </h1> 
  • 文档声明(doctype)

    • 文档声明用来告知浏览器当前网页的版本

    • html5的文档声明

      <!doctype html> 或 <!DOCTYPE HTML> 
  • 网页基本结构

    <!--文档声明,声明当前网页的版本HTML5版本--> <!doctype html> <!--html的根标签(元素),网页中的所有内容都要写在根元素的里边--> <html>    <!-- head是网页的头部,head中的内容不会在网页中直接出现,主要用来帮助浏览器或搜索引擎来解析网页-->    <head>       <!--meta标签用来设置网页的元数据,这里meta用来 设置网页的字符集,避免乱码问题-->       <meta charset="utf-8">       <!--title 中的内容会显示在浏览器的标题栏,搜索引擎会主要根据title中的内容来判断网页的主要内容-->       <title>网页的标题</title>   </head>     <!--body是html的子元素,表示网页的主体,网页中所有可见的内容都写在body中-->     <body>              </body> </html> 
  • 实体

    • 在网页中编写多个空格默认情况会自动被浏览器解析为一个空格

    • 在HTML中,有些特殊符号不能直接书写。例:多个连续空格,大于号/小于号

    • 使用实体(转义字符)来书写这些特殊符号

      实体语法:

      &nbsp; 空格 &gt; 大于号 &lt; 小于号 &copy;版权符号 

CSS概述

  • 本身含义:层叠样式表
    • 网页实际上是一个多层结构,通过css可以分别为网页的每一层来设置样式,最终我们所看到的是网页的最上边一层
    • 总之,CSS用来设置网页中的元素样式
赞(0) 打赏
未经允许不得转载:张拓的天空 » 网页概述(html/css)
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏