一、网页组成
  • 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. js获取网页的各种高度和宽度

    document.body.clientWidth ==> BODY对象宽度document.body.clientHeight ==> BODY对象高度document.document ...

  2. SVN学习之参数定义及设置

    http://jackyrong.iteye.com/blog/238835 conf目录中打开svnserve.conf ,去掉注释,搞成如下这样 [general] anon-access = r ...

  3. Haroopad 写 markdown文本

    很好用,推荐大家都来用. http://www.csdn.net/article/2014-05-05/2819623

  4. python 读取sqlite3 数据库

    import sqlite3 name = "tom" age = 30 con = sqlite3.connect("d:\\test.db") cur = ...

  5. 调试压缩后的Javascript文件：在 Chrome 和 Safari ，选择“脚本”标签，找到相应的文件，然后点击“{}”图标（pretty print，在面板底部）

  6. [Android-2A] -仿IOS微信滑动删除_SwipeListview左滑删除例子

    https://yunpan.cn/cueUIQkRafQrH (提取码:7ec1) 关于这样类似的例子网上的代码很多,最近发现这个例子里的代码在开发中会遇到一系列的问题.比如ListView的OnI ...

  7. catalan---卡特兰数（小结）

    (关于卡特兰数的详细介绍)http://baike.baidu.com/view/2499752.htm 下面有练习的题目: 经过测试,_int64/long long 最大只能表示到33位,超过这个 ...

  8. 0814JavaScript简介、基本语法、运算符、转换

    一.JavaScript简介 1.JavaScript是个什么东西? 它是个脚本语言,需要有宿主文件,它的宿主文件是HTML文件. 2.它与Java什么关系? 没有什么直接的联系,Java是Sun公司 ...

  9. PHP 时区设置

    有时候使用date("Y-m-d h:i:s")时发现时间相差8小时,修改“/etc/php5/apache2/php.ini”: date.timezone = "As ...

  10. 【转】oracle数据库中varchar2陷阱

    源地址:http://www.cnblogs.com/iyangyuan/p/3491215.html oracle数据库相信大家都比较熟悉,数据库中有一种非常常用的数据类型:字符串型. 对应该类型, ...