一、网页组成
  • HTML：网页的具体内容和结构，由N个标签（节点，元素，标记）组成
  • CSS：网页的样式，美化网页
  • JavaScript：网页的交互效果，比如用户鼠标的点击事件作出响应
 
二、常见的HTML标签
  • 标题：h1、h2、h3、h4........
  • 段落：p
          <p style = "color: red; background: #00f">你好！好你妹！</p>
  • 换行：br
  • 容器：div、span（用来容纳其他标签）
  • 表格：table、tr、td
  • 列表：ul、ol、li
  • 图片：img
          <img src="q1.jpg">
  • 表单：input
          <input typr="button" value="这是一个按钮">
  • 链接：a
          <a href="http://baidu.com" target="_blank" style="font-size: 20px;">
 
<html>
     <head>
         <meta charset="utf-8">                     /*使用utf-8编码，不然看到的是乱码*/
         <link rel="shortcut icon" href="zheshitubiao.ico">  /*网页标题旁边的图标*/
          <title>百度一下，你就知道</title>        /*网页的标题*/
     </head>
     <body>
     </body>
</html>
 
三、CSS（Cascading Style Sheets）: 层叠样式表，用来控制HTML标签的样式
1>CSS的三种书写形式：
  • 行内样式：（内联样式）直接在标签的style属性中书写
          <body style="color: red;">
  • 页内样式：在本网页的style标签中书写
          <style>
               body {       
                     color: red;  
                }
           </style>
  • 外部样式：在单独的CSS文件中书写，然后在网页中用link标签引用
          <link rel="stylesheet" href="index.css">
     
2>CSS两大核心：选择器+属性
     选择器：选择对应的标签，加样式
     选择器分类：
  • 标签选择器：根据标签名找到标签
          div {
               color: red;
           }      
  • 类选择器：. 类名
          .high {
               color: red;
           }
          <p class="high">第一行</p>
          <p>第二行</p>
  • id 选择器：#id    只能存在一个
          #first {
               color: red;
           }
          <p id="first">第一段文字</p>
  • 并列选择器
          div, .high {
               color: red;
          }
          <p class="high">第一段文字</p> /*红色*/
          <p>第二段文字</p>
 
          <div class="high">div1</div>      /*红色*/
          <div>div2</div>                           /*红色*/
  • 复合选择器
          div.high {
               color: red;
          }
          <p class="high">第一段文字</p>
          <div class="high">div1</div> /*只有这一行是红色的*/
          <div>div2</div>
  • 后代选择器
          div p {
               color: red;
          }
          <div>
               <p>div里面的p</p>                        /*红色*/
               <span>
                    <p>div里面的span里面的p</p>  /*红色*/
               </span>
          </div>
          <p>外面的p</p>                             
  • 直接后代选择器
          div > p {
               color: red;
          }
          <div>
               <p>div里面的p</p>                        /*红色*/
               <span>
                    <p>div里面的span里面的p</p> 
               </span>
          </div>
          <p>外面的p</p>                                
  • 相邻兄弟选择器
          div+ p {
               color: red;
          }
          <div>
               <p>div里面的p</p>                   
               <span>
                    <p>div里面的span里面的p</p>  
               </span>
          </div>
          <p>与div相邻的p</p>   /*红色*/
          <p>与p相邻的p</p>
 
 
 

重拾HTML（一）的更多相关文章

  1. CSS魔法堂：重拾Border之——更广阔的遐想

    前言  当CSS3推出border-radius属性时我们是那么欣喜若狂啊,一想到终于不用再添加额外元素来模拟圆角了,但发现border-radius还分水平半径和垂直半径,然后又发现border-t ...

  2. CSS魔法堂：重拾Border之——不仅仅是圆角

    前言  当CSS3推出border-radius属性时我们是那么欣喜若狂啊,一想到终于不用再添加额外元素来模拟圆角了,但发现border-radius还分水平半径和垂直半径,然后又发现border-t ...

  3. CSS魔法堂：重拾Border之——图片作边框

    前言  当CSS3推出border-radius属性时我们是那么欣喜若狂啊,一想到终于不用再添加额外元素来模拟圆角了,但发现border-radius还分水平半径和垂直半径,然后又发现border-t ...

  4. CSS魔法堂：重拾Border之——解构Border

    前言  当CSS3推出border-radius属性时我们是那么欣喜若狂啊,一想到终于不用再添加额外元素来模拟圆角了,但发现border-radius还分水平半径和垂直半径,然后又发现border-t ...

  5. 重拾Blog

    上个月是我入职现在的公司三周年的月份,所以又续订了五年的合同,最近有一些思考,也不知道这个五年能否还会一直在这个公司工作. 一切随缘吧. 闲适有毒,忙碌的时光总是过的很快,自从加入这个公司以来,日常的 ...

  6. [linux]重拾linux

    起因 因为想重拾起linux,同时需要用docker起几个镜像,用来学习网络知识.本来想直接去阿里云上买,后来一想自己机器上,起一个linux是个不错的选择,毕竟不花钱! 还可以用来做本地测试,学习使 ...

  7. 重拾qt

    最近公司又接了一个煤矿的项目,要写个小程序摘取数据,我是公司唯一c++程序员,本来搞ios搞好好的,现在又得重拾半年没摸得qt了.呵呵...呵呵呵. 这里只记录这次小程序的一些小的总结吧.. 1.中文 ...

  8. 重拾linux

    重拾linux 起因 因为想重拾起linux,同时需要用docker起几个镜像,用来学习网络知识.本来想直接去阿里云上买,后来一想自己机器上,起一个linux是个不错的选择,毕竟不花钱! 还可以用来做 ...

  9. 重拾C

    重拾C,一天一点点_10 来博客园今天刚好两年了,两年前开始学编程. 忙碌近两个月,项目昨天上线了,真心不容易,也不敢懈怠,接下来的问题会更多.这两天调试服务器,遇到不少麻烦. 刚出去溜达了一下,晚上 ...

  10. 【Java】 重拾Java入门

    [概论与基本语法] 取这个标题,还是感觉有些大言不惭.之前大三的时候自学过一些基本的java知识,大概到了能独立写一个GUI出来的水平把,不过后来随着有了其他目标,就把这块放下了.之后常年没有用,早就 ...

随机推荐

  1. Python 通过print_lol将数据保存到文件中

    1. 定义一个print_lol函数来控制列表的缩进和写入位置 import sys """this is a new fuction, which work for a ...

  2. [DHTML]什么是DHTML？

    DHTML 将 HTML.JavaScript.DOM 以及 CSS 组合在一起,用于创造动态性更强的网页. DHTML 总结 DHTML 只是一个术语,它描述了 HTML.JavaScript.DO ...

  3. pedagogical

    在线考试     // '+this+''; }); //alert(错了); $("#ans").html(html); } function clk(obj){ var inp ...

  4. 树莓派+qt+opencv

    树莓派:Qt开发套件和opencv安装sudo apt-get install qt4-dev-tools libqt4-dev 不用qt core 的话,其实只要按照 qt4-qmake就行了(只做 ...

  5. strace命令

    简介 strace常用来跟踪进程执行时的系统调用和所接收的信号. 在Linux世界,进程不能直接访问硬件设备,当进程需要访问硬件设备(比如读取磁盘文件,接收网络数据等等)时,必须由用户态模式切换至内核 ...

  6. Java中Filter、Servlet、Listener的学习

    1.Filter的功能filter功能,它使用户可以改变一个 request和修改一个response. Filter 不是一个servlet,它不能产生一个response,它能够在一个reques ...

  7. Java多线程之新类库中的构件PriorityBlockingQueue

    package concurrent2; import java.util.ArrayList; import java.util.List; import java.util.Queue; impo ...

  8. Spring中的ＡＯＰ应用

    AOP被称为面向切面编程,AOP中的几个重要概念是: 1.切面.切面就是要实现的功能.切面通常是在多数方法中会用到的相同功能,如写日志. 2.连接点.连接点就是应用程序执行过程中插入切面的地点.如:方 ...

  9. DEDE仿站经常用到的基本标签和变量

    一.针对于DEDE后台基本设置里面的使用到的数据标签. 主标题:{dede:global.cfg_webname/}  主要用于<title></title>里面 网 站描述: ...

  10. dedecms v5.7 sp1 给栏目添加缩略图功能

    一.给数据库添加字段typeimg 如图:   二 . 修改 dede/catalog_add.php 找到 $in_query = "INSERT INTO `#@__arctype`(r ...