HTML5-CSS3记录

作者: 藏雨 | 来源:发表于2019-08-29 10:57 被阅读0次

    HTML

    • 软件架构:

      ——C/S,客户端 /服务器
      ——B/S,浏览器 /服务器 (△)

    • 软件开发流程:

      PS:设计网页前端
      HTML:将设计做成静态网页后端
      JSP:将静态网页做成动态网页

    • 三部分结构:

      结构:HTML
      表现:CSS
      行为:JS

    • 标准格式:
          <html>
              <head>   不在页面显示,帮助浏览器解析页面
                      <title></title>  网页标题栏
              </head>
              <body>  设置网页主体内容
              </body>
          </html>
      
    • 小知识

      `` 注释方法
      <!DOCTYPE html> HTML5声明
      <meta 。。。/> 自结束标签,可设置网页元数据,如:字符集·关键字·简介
      使用HTML标签时,关系的是标签的语义。
      标题标签一般只用h1 h2 h3
      P标签表示一个段落。
      br标签表示换行 | 自结束
      hr标签生成一条水平线 | 标签
      小于< 用&lt; 大于> 用&gt;空格 &nbsp;版权符号&copy。
      <img src="" alt="" /> 自结束标签
      ../ 返回上一级目录。

    • 图片使用原则:

      效果不一致用好的;
      效果一致用小的。

    • 注意点:

      HTML不区分大小写
      注释不能嵌套,标签可以嵌套,但不能交叉嵌套
      属性必须有值,且值加双引号
      内联框架iframe:现实开发一般不用,因为不会被搜索引擎检索,name属性:链接在指定的内联框架打开
      超链接/a标签:-self 当前窗口打开·默认值;-blank 新建一个窗口打开
      center 让标签居中;# :当超链接不确定,可用来占位,还可回到当前页面顶部
      id :每一个元素都可以设置,该属性可以作为标签唯一标识;href:“mailto :邮件地址"


    CSS(叠层样式表)

    >   可将网页想象为一层一层的。  
    
    • 将样式直接编写到style属性中称为内联样式,只对当前元素内容起作用
      写head里为内部样式表<style type="text:css"></style>
      将css写在外部用<link rel="stylesheet" type="text/css" href="文件名.css"/>引用,使结构与表现分离,利用浏览器缓存提高访问速度
      /* */ 注释方法

    • css语法:

      选择器:选中页面指定元素
      声明块:{ } 里面都是一组一组的名值对,color:red,多个声明之间用;隔开

    • 块·行元素:

      独占一行 如:
      div标签(没有任何语义,不设置任何默认样式,用于页面布局)
      内联元素(行内元素):span标签(只占自身大小,没有任何语义,为文字设置样式)
      块元素可包含内联元素,a标签可以包含任意元素,但不包括自身

    • 选择器:

      id选择器:#id属性值{ }
      class选择器:.class属性值{ }
      class属性和id属性类似,但class属性可重复,可同时为一个元素设置多个class属性值,值之间用空格隔开

    • 选择器分组:

      语法:选择器1,2,3,···(并集选择器)
      *{ }(通配选择器,选中页面所有内容)
      选择器1选择器2选择器(复合选择器(交集选择器),可选中同时满足多个选择器的元素)

    • 元素关系:

      父元素:直接包含子元素
      子元素:直接被父元素包含
      祖先元素:直接或间接包含后代元素,父元素也是祖先元素
      后代元素:直接或间接被祖先元素包含,子元素也是后代元素
      兄弟元素:拥有相同的父元素

    • 未完

    相关文章

      网友评论

        本文标题:HTML5-CSS3记录

        本文链接:https://www.haomeiwen.com/subject/omnbectx.html