一、网页组成
  • 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. HTML网页调用本地QQ

    打开聊天窗口代码: tencent://message/?uin=QQ号码&Site=有事Q我&Menu=yes 使用方法: <a href="tencent://me ...

  2. Linux 2.6 内核实时性分析 (完善中...)

      经过一个月的学习,目前对linux 下驱动程序的编写有了入门的认识,现在需要着手实践,编写相关的驱动程序. 因为飞控系统对实时性有一定的要求,所以先打算学习linux 2.6 内核的实时性与任务调 ...

  3. 不用配置tnsnames.ora,直接通过PL/SQL访问远程数据库

  4. Chrome安装FlashPlayer Debug

    首先: 在谷歌浏览器上打开chrome://plugins 找到 Adobe Flash Player 然后将谷歌自带的版本停用,如果已经安装了for Netscape版,则会显示另外一个版本.(建议 ...

  5. communication ports in DOS systems:

    : CON, PRN, AUX, NUL, COM1, COM2, COM3, COM4, COM5, COM6, COM7,COM8, COM9, LPT1, LPT2, LPT3, LPT4, L ...

  6. storm系统架构学习

    Storm架构如下图所示: 1.主控节点(Master Node) 运行Storm nimbus后台服务的节点(Nimbus),它是storm系统的中心,负责接收用户提交的作业(如同spark sub ...

  7. Hadoop系统架构

    一.Hadoop系统架构图 Hadoop1.0与hadoop2.0架构对比图 YARN架构: ResourceManager –处理客户端请求 –启动/监控ApplicationMaster –监控N ...

  8. linux命令（10）使用kill杀死含有指定关键字的进程

    命令:ps -ef|grep keyword|grep -v grep|cut -c 9-15|xargs kill -9 批量杀死包含关键字“keyword”的进程. "ps -ef&qu ...

  9. mysql server has gone away 与max_allowed_packed

    今天在本地测试测试给所有店铺批量发信息的功能,大约2万条记录,在本地和备用linux服务器上测试都没有问题,但上windows时一直报mysql server has gone away的错误,搜索一 ...

  10. 查看iis错误日志时提示找不到 freb.xsl的解决方法

    http://stackoverflow.com/questions/786638/how-can-i-get-gzip-compression-in-iis7-working/787251 Look ...