网页课程内容回顾（HTML）

最新推荐文章于 2024-05-31 12:53:32 发布

置顶 HERO0607

最新推荐文章于 2024-05-31 12:53:32 发布

阅读量1.5k

点赞数 2

分类专栏： html 文章标签： html 学习总结

本文链接：https://blog.csdn.net/HERO0607/article/details/44687657

版权

html 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

今天和大家分享我这段时间以来学习html的总结，以此来巩固，也希望对初学者能有所帮助。

开发工具：Sublime Text2或HBuilder

首先学习的当然是html的标签语言，其实w3cschool中都有。

<meta> 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词
       <meta charset="UIF-8">
       <meta name="keyword" content="html5,css3">
       <meta name="author" content="whqet">
       <meta name="generater" content="sublime taxt2">

<title> 网页标题
       <title>Document</title>

<pre class="html" name="code">使用css的几种方式
        1.行内方式，使用标签的style属性      
        2.页内方式，使用style标签的方式      
        3.页外方式，使用link标签链接外部css        
  一般不建议使用行内方式，不利用后期的维护（优先级比较高）                                                                                 尽量少使用页内方式，不利于后期的整站维护（比较直观很多实验的时候会用）

<style> 指定标签的行内样式，页面内部的css
       <style>
            p{
             font-size: 12px; 字体大小
             font-weight:bold; 字体变粗
             font-style:italic; 字体变斜
             color:red; 字体颜色
             text-indent: 2em; 首行缩进
             line-height: 1.5em; 行高
            }
       </style>

<link> 链接外部的css
       <link rel="stylesheet" herf="css.css">

<script>脚本，页内的脚本，链接外部的js
        <script>
              var a="hello world";
              alert(a);
        </script>
        <script src="1.js"></script>
        <script type="text/javascript"></script>
        document.write("<h1>Hello World!</h1>")
        </script>

<body> 显示网页里面的内容
    <body>
       网页内容
    </body>

ol, ordered List (数字) 定义有序列表
ul, unordered List (小圆点) 定义无序列表                                                                                           li, list item
   <ol style="list-style-type:lower-alpha"> a,b,c
   <ul style="list-style-type:square"> 小方块
     ol:
        decimal 1阿拉伯数字(默认)
        lower-alpha a英文小写
        upper-alpha A英文大写
        lower-roman i罗马小写数字
        upper-roman I罗马大写数字
     ul:
        disc 实心圆(默认)
        circle 空心圆
        square 实心正方形
        none 不显示任何标记

普通链接
        普通链接最重要的两个属性，href指定链接地址，target指定方式打开
        <a href="<a target=_blank href="http://www.baidu.com">http://www.baidu.com</a>" target="-blank">百度一下</a>
        <a href="<a target=_blank href="http://www.w3cschool.com.cn/">http://www.w3cschool.com.cn/</a>" target="-blank">使用w3cschool学习网页</a>
        邮件链接
        邮件链接可以调用本地的邮件客户端发送邮件，用的不多(现在一般用网页方式发送邮件)
        <a href="<a target=_blank href="mailto:whqet@qq.com?subject=Hello%20again">mailto:whqet@qq.com?subject=Hello%20again</a>">给庆哥发个邮件</a>
        页内链接，创建一个在网页内部的导航
        步骤：1、创建目标     <a name="abc"> </a>
              2、跳转到该页   <a href="#abc"> </a>
        菜单架构
        我们经常使用ul、li、a的方式事件菜单
        <ul>
          <li><a href="#abc">ASP</a></li>
          <li><a href="#abc">PHP</a></li>
          <li><a href="#abc">JSP</a></li>
          <li><a href="#abc">DELPHI</a></li>
          <li><a href="#abc">VS</a></li>
          <li><a href="#abc">AJAX</a></li>
          <li><a href="#abc">JQUERY</a></li>
        </ul>

<figure> 标签规定独立的流内容（图像、图表、照片、代码等等）。
       <figure>
        <figcaption>图像标题</figcaption>
        <img src="abcd.jpg" width="350" height="234" alt="" usemap="#abc">
       </figure>
   使用<map>标签定义地图，<map里>面使用<area>标签定义热区
        area里面的shape
        shape="circle" coords="x,y,r"区域为圆形 圆心坐标和半径
        shape="polygon" coords="x1,y1,x2,y2,x3,y3,..."区域为多边形  多边形所有顶点的坐标
        shape="rectangle" coords="x1,y1,x2,y2"区域为矩形  矩形的左上右下两点的坐标

热区链接
在<img>标签里面使用<usemap>属性调用<map>
      <map name="#abc">
       <area shape="circle" coords="95,115,80" href="<a target=_blank href="http://www.baidu.com">http://www.baidu.com</a>" alt="">
       <area shape="polygon" coords="183,110,200,110,200,90,213,90,217,110,237,110" href="<a target=_blank href="http://www.csdn.net">http://www.csdn.net</a>" alt="">
       <area shape="rectangle" coords="502,48,613,185" href="<a target=_blank href="http://www.sohu.com">http://www.sohu.com</a>" alt="">
      </map>

<table>标签定义HTML表格
        简单的HTML表格由table元素以及一个或多个tr、th或td元素组成。
        tr元素定义表格行，th元素定义表头，td元素定义表格单元。
        更复杂的HTML表格也可能包括caption、col、colgroup、thead、tfoot以及tbody元素。
        col，  column     列，栏目，通常表示一个列
        row，  row        行，通常表示一个行
        span              跨度
               span       标签，行内的容器
               colspan    td的属性，该td跨列数
        cell              细胞，单间，单元格
        space             空格
        spacing           空间，间隔
               cellspacing 单元格间隔
        padding           填充
               cellpadding 单元格的内填充
        <table border="1">
        <caption>信息表</caption>
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>男</td>
            <td>30</td>
        </tr> 
        <tr>
            <td>李四</td>
            <td>男</td>
            <td>45</td>
        </tr>
        <tr>
            <td>李倩</td>
            <td>女</td>
            <td>18</td>
        </tr>
        <tr>
            <td colspan="3">有些属实，有些瞎编</td>
        </tr>
        </table>

设置表格的背景颜色                                                                                                                  <style>
      tr:nth-child(1){
           background-color: rgba(200,0,0,.1)
      }
      tr:nth-child(2){
           background-color: rgba(200,0,0,.2)
      }
      tr:nth-child(3){
           background-color: rgba(200,0,0,.3)
      }
      tr:nth-child(4){
           background-color: rgba(200,0,0,.4)
      }
      tr:nth-child(5){
           background-color: rgba(200,0,0,.5)
      }                                                                                                                                   /*tr:nth-child(3n){
             background-color: rgba(200,0,0,.1)
          }
          tr:nth-child(3n+1){
             background-color: rgba(200,0,0,.2)
          }
          tr:nth-child(3n+2){
             background-color: rgba(200,0,0,.3)
          }*/
 </style>