一、网页组成
  • 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. 把docker当做绿色打包工具

    如题,我只是把docker当成绿色版的各种环境的集成打包工具了 用到了docker的--net=host模式,这个暂时在mac下是有问题的,linux下正常使用,具体docker的网络模式参考这里,此 ...

  2. svn merge 回滚

    聊一聊 svn merge 命令. svn 是啥就不用介绍了吧,谁用谁知道.有了 svn,开发者只要把代码提交上去,无论山崩地裂.电脑进水.硬盘格式化,哪怕换了一台电脑,都能随时把代码找回来.不过从自 ...

  3. Android优秀资源整理合集(论菜鸟到高级攻城狮)

    转载请注明转自:http://blog.csdn.net/u011176685/article/details/51434702 csdn文章:Android优秀资源整理合集(论菜鸟到高级攻城狮) 时 ...

  4. [OpenGL ES 03]3D变换：模型，视图，投影与Viewport

    [OpenGL ES 03]3D变换:模型,视图,投影与Viewport 罗朝辉 (http://blog.csdn.net/kesalin) 本文遵循“署名-非商业用途-保持一致”创作公用协议 系列 ...

  5. Java中的String与常量池

    string是java中的字符串.String类是不可变的,对String类的任何改变,都是返回一个新的String类对象.下面介绍java中的String与常量池. 1. 首先String不属于8种 ...

  6. ajax提交后完全不进入action直接返回错误

    今天遇到个问题就是jQuery提交ajax请求,居然没有进入action的断点而直接返回错误信息. 仔细排查后才发现原来是因为客户端提交的某字段是100w的值,而后台对应的字段是个Short类型,根本 ...

  7. Python标准库——走马观花

    作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! Python有一套很有用的标准库(standard library).标准库会随着 ...

  8. plsql如果表和函数等显示不出来

    就把用户设为所有用户,所有的东西就会都显示出来了,然后再把用户切换为当前用户和My objects,你想看的东西就全部显示出来了.

  9. Varnish 4.0 实战(转)

    简介 Varnish 是一款高性能且开源的反向代理服务器和 HTTP 加速器,其采用全新的软件体系机构,和现在的硬件体系紧密配合,与传统的 squid 相比,varnish 具有性能更高.速度更快.管 ...

  10. spring注解注入

    @Autowired public void setUserDAO(UserDAO userDAO) { this.userDAO = userDAO; } @Test public void tes ...