重拾HTML

Posted 怡情_老二

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了重拾HTML相关的知识,希望对你有一定的参考价值。

一、网页组成
  • 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的主要内容,如果未能解决你的问题,请参考以下文章

重拾安卓_00_资源帖

重拾HTML

浏览器重启会话重拾

重拾jQuery

改进风格迁移,重拾《星空》梦!

12月活动|重拾写作的力量,挑战7/14/21日连更!