Web开发

在线web工具
html教程-w3
html教程-runoob
范仁义

《零基础入门学习Web开发》(HTML5&CSS3)-视频-小甲鱼    配套资料
html5速查宝典-小甲鱼

VScode及其他的Tips

  • 输入！+Tab键就会直接出现html模板，或者输入html:5回车也能达到相同的效果
  • 输入ul+Tab键就会直接写好"<ul> </ul>"
  • html注释 <!-- 记得在此处添加信息 --> 

HTML入门基础

标题的背景和居中、字体颜色尺寸修改

<!--这里是使用推荐的style属性来实现html样式-->
<body style="background-color:PowderBlue;text-align:center">

    <h1>Look! Styles and colors</h1>
    
    <p style="font-family:verdana;color:red">
    This text is in Verdana and red</p>
    
    <p style="font-family:times;color:green">
    This text is in Times and green</p>
    
    <p style="font-size:30px">This text is 30 pixels high</p>
    
</body>

<!--段落字体、颜色、尺寸、位置的控制-->
<body>
    <h1 style="font-family:verdana">A heading</h1>
    <p style="font-family:arial;color:red;font-size:20px;text-align:center">A paragraph.</p>
</body>


<!--XXXXXXXXXXXXXXXXXXXXXXXXXX下面的方法是不推荐的老用法XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX-->
<body bgcolor="yellow"; 
      align="center"
      color="orange">
    <h2>请看: 改变了颜色的背景。</h2>
</body>

附录：[不赞成使用的标签和属性]

插入无序列表、有序列表、定义列表

<!--无序列表-->
<ul>
    <li>coffee</li>
    <li>tea</li>
    <li>coakcola</li>
</ul>

<!--有序列表-->
<ol>
    <li>coffee</li>
    <li>tea</li>
    <li>coakcola</li>
</ol>

<!--定义列表--> 
<dl>
    <dt>Web前端简介</dt> 
    <dd>HTML（超文本标记语言）</dd>
    <dd>CSS（层叠样式表）</dd>
    <dd>JavaScript（脚本语言）</dd>
</dl>
   <dl>
    <dt>C语言中文网</dt>
    <dd>HTML教程</dd>
    <dd>CSS教程</dd>
    <dd>JavaScript教程</dd>
</dl>
<!--一(多)个术语对应一(多)条解释或定义, <dl> 是 definition list；<dt> 是 definition term；<dd> 是 definition description-->

插入图片

(src表示图片来源，可以是本地电脑，也可以是网络服务器；高度和宽度的单位默认是px，可以省略；title是鼠标放在图片上显示的文字；alt是图片无法显示的时候作为替代显示的文字)

（图片作为超链接的用法见“插入超链接”；另外还有<map>标签定义图像地图；<area>定义图像地图中的可点击区域，参考这里 )

<img src="http://c.biancheng.net/cpp/templets/new/images/logo.jpg?v=3.994" 
      width ="200"   
      height ="200" 
      title="这是C语言中文网的logo" 
      alt="这是C语言中文网的logo"   
/>

插入超链接 (用<a>标签创建)

1.通过使用 href 属性 - 创建指向另一个文档的链接
2.通过使用 name 属性 - 创建文档内的书签(类似wordpress中的锚/书签，文档内跳转)

<!--target="_blank"表示在点击之后在新的标签页打开/target="_top"当前页面跳转-->
<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>

<!--用图片作为超链接-->
<p>无边框的图片链接:
	<a href="//www.runoob.com/html/html-tutorial.html">
	  <img border="0" src="smiley.gif" alt="HTML 教程" width="32" height="32">
    </a>
</p>

<!--锚tips保证了二者的联系-->
<a href="#tips">有用的提示</a>
<a name="tips">基本的注意事项 - 有用的提示</a><!--似乎这里用id替换name也行-->

另外还有创建电子邮件链接，这里不介绍了。

插入表格

简单例子

<!--border展示的是边框，数值为零，就没有框；cellpadding是设置内容距离边框的远近，caption设定了表格的标题。tr中row,th中header,td中data，-->
<!--横排-->     
<table border="1"    
       cellpadding="10">
  <caption>Rich people information</caption>
    <tr>
      <th>Name</th>
      <th>Telephone</th>
      <th>Country</th>
    </tr>
    <tr>
      <td>Bill Gates</td>
      <td>555 77 854</td>
      <td>USA</td>
    </tr>
</table>

<!--竖排-->
<table border="1">
    <tr>
      <th>First Name:</th>
      <td>Bill Gates</td>
    </tr>
    <tr>
      <th>Telephone:</th>
      <td>555 77 854</td>
    </tr>
    <tr>
      <th>Telephone:</th>
      <td>555 77 855</td>
    </tr>
</table>

附加例子(利用菜鸟工具展示行/列的合并)

文本格式化

HTML 文本格式化标签

标签类型 作用 说明
<b> 定义粗体的文本 根据 HTML 5 的规范，<b> 标签应该做为最后的选择，<br />只有在没有其他标记比较合适时才使用它。
<em> 用来呈现为被强调的文本 建议使用CSS替代
<i> 斜体 在 HTML5 中没有必要这么做，可以使用样式表来格式化 <i> 元素中的文本
<small> 定义小型文本（和旁注）
<strong> 定义计算机程序的样本重要的文本 建议使用CSS替代
<sub> 定义下标文本
<sup> 定义上标文本
<ins> 定义插入字 下划线(文本修订)
<del> 定义删除字 删除线(文本修订)

其他还有HTML "计算机输出" 标签和HTML 引文, 引用, 及标签定义，感觉一般也没必要用，要用的时候看一下即可，比较简单。

头部<head>

  • <title> 元素: （用法<title>文档标题</title>）
<head>
    <link rel="shortcut icon" href="图片url">
    <title>这是一个带图片的标签</title>
</head>
    1. 定义了浏览器工具栏的标题
    2. 当网页添加到收藏夹时，显示在收藏夹中的标题
    3. 显示在搜索引擎结果页面的标题

  • <base> 元素：标签作为HTML文档中所有的链接标签的默认链接

    <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8"> 
        <title>菜鸟教程(runoob.com)</title> 
        <base href="//www.runoob.com/images/" target="_blank">
    </head>
        
    <body>
        <img src="logo.png"> - 注意这里我们设置了图片的相对地址。能正常显示是因为我们在 head 部分设置了 base 标签，该标签指定了页面上所有链接的默认 URL，所以该图片的访问地址为 "http://www.runoob.com/images/logo.png"
        <br><br>
        <a href="//www.runoob.com">菜鸟教程</a> - 注意这个链接会在新窗口打开，即便它没有 target="_blank" 属性。因为在 base 标签里我们已经设置了 target 属性的值为 "_blank"。
    </body>
</html>
  • <link> 元素：通常用于链接到样式表
<head>
	<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
  • <style> 元素：在 style 元素内规定 HTML 元素在浏览器中呈现的样式(渲染)
<style type="text/css">
    body {background-color:yellow}
    h1 {color: red}      
    p {color: blue}
    a {color: yellow;
       background: black;
      }
</style>
<!--注意h1后面有个空格;a对应的是body中的超链接-->

 

  • <meta> 元素：该标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。
<!--SEO搜索引擎优化，帮助网站被百度、谷歌等搜索到-->
<head>    
    <meta name = "keywords" content = "小甲鱼web开发，html5,CSS3编程教学">                   
	<meta name = "description" content = "《零基础入门Web学习》，案例实践，内容精彩，百度索引赶紧收了我吧">
    <meta name = "author" content = "小甲鱼">     
</head>

<!--固定编码格式，保证在网络服务器上也能正常解码-->
<head>    
    <meta charset="UTF-8">         
</head>

<!--等待30秒之后，自动跳转到百度的官网-->
<head>
	<meta http-equiv = "refresh" content = "30; http://baidu.com">   
</head>

<!--XXXXXXXXXXXXX以上三个功能可以整合到一个head里面XXXXXXXXXXXXXXXX-->
  • <script> 元素：用于加载脚本文件，如JavaScript，后面再讲。

CSS的引用

  • 外部样式表：当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。(参考实例)
  • 内部样式表：当单个文件需要特别样式时，就可以使用内部样式表。

内联样式表：当特殊的样式需要应用到个别元素时。

<!--外部样式表-->
<head>
	<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

<!--内部样式表-->
<head>
    <style type="text/css"> 
        body {background-color: red}
        p {margin-left: 20px}
    </style>
    <!--效果一样，去掉第一个style里面的type-->
</head>


<!--内联样式(优先级最高)-->
<body>
    <h1 style="text-align:center;font-family:verdana;">居中对齐的标题</h1>
    <p style="color: red; margin-left: 20px;">
       This is a paragraph
    </p>
</body>

区块元素和内联元素

  • 区块元素：在浏览器显示时，通常会以新行来开始（和结束）。
    实例: <h1>, <p>, <ul>, <table>
  • 内联元素：在显示时通常不会以新行开始，所以也叫行内元素。
    实例: <b>, <td>, <a>,<img>
  • 新学一个区块元素<div> 和内联元素<span> 
    <!--文档中的一个区域将显示为蓝色--> 
<body>
    <p>这是一些文本。</p>
    <div style="color:#0000FF">
      <h3>这是一个在 div 元素中的标题。</h3>
      <p>这是一个在 div 元素中的文本。</p>
    </div>
    <p>这是一些文本。</p>
</body>


<!--使用 <span> 元素对文本中的一部分进行着色--> 
<body>
    <p>我的母亲有 <span style="color:blue;font-weight:bold">蓝色</span> 的眼睛，我的父亲有 <span    style="color:darkolivegreen;font-weight:bold">碧绿色</span> 的眼睛。</p>
</body>

布局

Tips: 首先需要明白，创建高级布局是非常耗时，推荐使用网上免费的网站模板，然后根据自己的需求优化。另外推荐在布局中使用CSS，如果将其放在外部样式表，那么站点更易维护。 可以使用块级元素<div>或者<table>来实现多列布局，但是table标签是不建议作为布局工具使用的 - 表格不是布局工具。下面只展示如何使用<div>来实现布局。

<!DOCTYPE html>
<html>
<head> 
    <meta charset="utf-8"> 
    <title>菜鸟教程(runoob.com)</title> 
</head>
<body>

    <div id="container" style="width:500px">

    <div id="header" style="background-color:#FFA500;">
    <h1 style="margin-bottom:0;">主要的网页标题</h1></div>

    <div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
    <b>菜单</b><br>
    HTML<br>
    CSS<br>
    JavaScript</div>

    <div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
    内容在这里</div>

    <div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
    版权 © runoob.com</div>

    </div>
 
</body>
</html>

表单

表单用于收集不同类型的用户输入，这部分暂时用不上，具体可以参见这里。

框架结构

框架就是把整个页面分成几个独立的部分，可以通过拖动操作改变每个部分的大小，比如我们Typora左侧的导航栏的边距就是可以调节的，整个页面通过框架结构其实是分成了两个框。注意我们用的多的是<iframe>标签，而<frameset>和<frame>用得少，一般用<div>和CSS替代实现。

  • <iframe>标签：显示一个目标链接的页面(内联框架)。
    如果观察我们顶部的在线web工具(我之前写进markdown-typora)，可以发现，其代码如下
    <iframe width="100%" height="600" src="https://c.runoob.com/front-end/61" allowfullscreen="allowfullscreen" frameborder="0"></iframe>    另外再给一个例子(点击RUNOOB.COM超链接会在当前页面的一个独立框中显示内容，参见这里)
    <iframe src="demo_iframe.htm" name="iframe_a"></iframe>
    <p><a href="http://www.runoob.com" target="iframe_a">RUNOOB.COM</a></p>

颜色

这个比较简单，只需要知道两种表示方法，#FF0000对应rgb(255,0,0) 即标准红色。FF是十六进制，表示255。#FFFFFF和rgb(255,255,255)都表示标准白色。

脚本

<script> 标签：标签用于定义客户端脚本，比如 JavaScript。该标签元素既可包含脚本语句，也可通过 src 属性指向外部脚本文件。关于<noscript>就不介绍了，现在的浏览器很少有支持这个的。JavaScript 最常用于图片操作、表单验证以及内容动态更新，下面是其三个简单的应用展示。

<!--普通内容输出--> <!--<script type="text/javascript">,也就是说指定JS，不加也能运行？--> 
<script>
	document.write("Hello World!");
</script>


<!--鼠标点击触发事件--> 
<p id="demo">
	JavaScript 可以触发事件，就像按钮点击。</p>
<script>
    function myFunction()
    {
        document.getElementById("demo").innerHTML="Hello JavaScript!";
    }
</script>
<button type="button" onclick="myFunction()">点我</button>


<!--处理 HTML 样式--> 
<p id="demo">
	JavaScript 能改变 HTML 元素的样式。
</p>
<script>
    function myFunction()
    {
        x=document.getElementById("demo") // 找到元素
        x.style.color="#ff0000";          // 改变样式
    }
</script>
<button type="button" onclick="myFunction()">点击这里</button>

字符实体

这是为了解决两个问题：一是打出键盘上不存在的字符；二是避免将文本内容和代码之间混淆。具体例子如下：

  • html中，无论你空几格，文本输出的时候都只显示空一格。如果想多空格，那么直接使用来替代每一个空格。
  • 键盘上没有€符号，当然我们可能通过搜狗的强大功能输出，但是更一般的做法是用类似的字符实体来代替。
  • 大于号和小号，容易和标签元素的括号混淆，所以用 &lt;和 &gt;来替代，现在好像这个bug已经被解决了。

URL统一资源定位器

格式如下：scheme://host.domain:port/path/filename

例子http://www.runoob.com/html/html-tutorial.html ， 分解如下：

  • scheme - 定义因特网服务的类型。最常见的类型是 http，还有其他如https，ftp(文件传输协议)；
  • host - 定义域主机（http 的默认主机是 www）；
  • domain - 定义因特网域名，比如 runoob.com；
  • :port - 定义主机上的端口号（http 的默认端口号是 80）；
  • path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）；
  • filename - 定义文档/资源的名称。

速查列表

HTML 基本文档

<!DOCTYPE html>
<html>
<head>
<title>文档标题</title>
</head>
<body>
可见文本...
</body>
</html>

基本标签（Basic Tags）

<h1>最大的标题</h1>
<h2> . . . </h2>
<h3> . . . </h3>
<h4> . . . </h4>
<h5> . . . </h5>
<h6>最小的标题</h6>
 
<p>这是一个段落。</p>
<br> （换行）
<hr> （水平线）
<!-- 这是注释 -->

文本格式化（Formatting）

<b>粗体文本</b>
<code>计算机代码</code>
<em>强调文本</em>
<i>斜体文本</i>
<kbd>键盘输入</kbd> 
<pre>预格式化文本</pre>
<small>更小的文本</small>
<strong>重要的文本</strong>
 
<abbr> （缩写）
<address> （联系信息）
<bdo> （文字方向）
<blockquote> （从另一个源引用的部分）
<cite> （工作的名称）
<del> （删除的文本）
<ins> （插入的文本）
<sub> （下标文本）
<sup> （上标文本）

链接（Links）

普通的链接：<a href="http://www.example.com/">链接文本</a>
图像链接： <a href="http://www.example.com/"><img src="URL" alt="替换文本"></a>
邮件链接： <a href="mailto:webmaster@example.com">发送e-mail</a>
书签：
<a id="tips">提示部分</a>
<a href="#tips">跳到提示部分</a>

图片（Images）

<img src="URL" alt="替换文本" height="42" width="42">

样式/区块（Styles/Sections）

<style type="text/css">
h1 {color:red;}
p {color:blue;}
</style>
<div>文档中的块级元素</div>
<span>文档中的内联元素</span>

列表

<ul>
    <li>项目</li>
    <li>项目</li>
</ul>


<ol>
    <li>第一项</li>
    <li>第二项</li>
</ol>


<dl>
  <dt>项目 1</dt>
    <dd>描述项目 1</dd>
  <dt>项目 2</dt>
    <dd>描述项目 2</dd>
</dl>

表格（Tables）

<table border="1">
  <tr>
    <th>表格标题</th>
    <th>表格标题</th>
  </tr>
  <tr>
    <td>表格数据</td>
    <td>表格数据</td>
  </tr>
</table>

框架

<iframe src="demo_iframe.htm"></iframe>

表单（Forms）

<form action="demo_form.php" method="post/get">
<input type="text" name="email" size="40" maxlength="50">
<input type="password">
<input type="checkbox" checked="checked">
<input type="radio" checked="checked">
<input type="submit" value="Send">
<input type="reset">
<input type="hidden">
<select>
<option>苹果</option>
<option selected="selected">香蕉</option>
<option>樱桃</option>
</select>
<textarea name="comment" rows="60" cols="20"></textarea>
 
</form>

实体（Entities）

&lt; 等同于 <
&gt; 等同于 >
&#169; 等同于 ©

小的tips

  • 本文编辑的时候，文本中可能需要\符号来转义某些小内容，以避免转成html后出现错误。
  • <hr />表示的是画横线(分割线)。
  • <br />表示换行
  • 浏览器忽略了源代码中的排版（省略了多余的空格和换行）
  • html5中用id，不用name属性?
  • <br>有啥用？

CSS的学习

基本选择器：通用/元素/类/id选择器；
复合选择器：交集/并集/后代选择器。

背景

<!-- 简单示例 -->
<style>
    body
    {
        background-image:url('img_tree.png');
        background-repeat:no-repeat;
	    /*background-repeat:x;*/	
        background-position:right top;
        margin-right:200px;
        /*background-attachment:fixed;固定图片，滚动显示*/
    }
</style>
/*     */



<!-- 简化写法，将这些属性合并在同一个属性中，background其实代表背景颜色 -->
<style>
    body
    {
        background:#ffffff url('img_tree.png') no-repeat right top;
        margin-right:200px;
    }
</style>

<!-- 
当使用简写属性时，属性值的顺序为：:
background-color
background-image
background-repeat
background-attachment
background-position-->

文本

<!-- 简单示例，文本居中/右对齐/两侧对齐/文本缩进text-indent -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>菜鸟教程(runoob.com)</title> 
    <style>
        p {text-indent:50px;}
        h1 {text-align:center;}
        p.date {text-align:right;}
        p.main {text-align:justify;}
    </style>
</head>

<body>
    <h1>CSS text-align 实例</h1>
    <p class="date">2015 年 3 月 14 号</p>
    <p class="main">“当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。”</p>
    <p><b>注意：</b> 重置浏览器窗口大小查看 &quot;justify&quot; 是如何工作的。</p>
</body>

</html>

关于文本还有，大小写转化、文本修饰、颜色等等，具体参考这里。

字体

serif和sans-serif字体之间的区别
二者的区别在于字体在末端没有额外的装饰。Arial就没有装饰，新罗马有，对于计算机屏幕来说，没有额外装饰的更容易阅读。

<!-- 斜体 -->
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title>
<style>
    p.normal {font-style:normal;}
    p.italic {font-style:italic;}
</style>
</head>

<body>
    <p class="normal">这是一个段落,正常。</p>
    <p class="italic">这是一个段落,斜体。</p>
</body>

<!-- 加粗 -->
<style>
    p.normal {font-weight:normal;}
    p.light {font-weight:lighter;}
    p.thick {font-weight:bold;}
    p.thicker {font-weight:900;}
</style>

链接

<!-- 超链接的四种状态分别显示四种颜色 -->  <!-- 下面的用法其实也是展示了后续要讲的伪类选择器 -->

<style>
    a:link {color:#000000;}      /* 未访问链接*/
    a:visited {color:#00FF00;}  /* 已访问链接 */
    a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */
    a:active {color:#0000FF;}  /* 鼠标点击时 */
</style>

<!-- 文本修饰,选择什么时候有下划线 -->
<style>
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}
</style>

还有其超链接四种状态的显示变化，都很重要，在网页设计中。

选择器

派生选择器

从原有的标签派生而来，无需为 strong (随便命名)元素定义特别的 class 或 id，代码更加简洁，如下：

<head>
    <style> 
        li strong {
    font-style: italic;
    font-weight: normal;
  	}
    </style>
</head>
  
<body>  
    <p><strong>我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用</strong></p>
    <ol>
    <li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li>
    <li>我是正常的字体。</li>
    </ol>
</body>

id选择器

id选择器和class选择器的区别是，class的属性定义好之后，可以在多种元素(h1、h2、p等等)中重复使用，而id 属性只能在每个 HTML 文档中出现一次，就是说是一次性的，用了一次就不能用第二次。另一角度看，id的唯一性，也决定了id的这种特点。

以 "#" 来定义， 例子如下：

#red {color:red;}
#green {color:green;}

<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>

类class选择器

在 CSS 中，类选择器以一个点号显示：

<!-- h1 和 p 元素都有 center 类。这意味着两者都将遵守 ".center" 选择器中的规则 -->

.center {text-align: center}


<h1 class="center">
    This heading will be center-aligned
</h1>

<p class="center">
    This paragraph will also be center-aligned.
</p>

属性选择器

可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。参考这里。

选择器的混合

  • 元素基于类(ul.a中a就是类，ul是元素)而被选择

    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
ul.a {list-style-type:circle;}
ul.b {list-style-type:square;}
ol.c {list-style-type:upper-roman;}
ol.d {list-style-type:lower-alpha;}
</style>
</head>

<body>
<p>无序列表实例:</p>

<ul class="a">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

<ul class="b">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

<p>有序列表实例:</p>

<ol class="c">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

<ol class="d">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

</body>
</html>

    参考这里

    伪类选择器

阅读这里的内容。

列表

<!-- 指定列表项标记的图像，使用列表样式图像属性 -->
<style>
    ul 
    {
        list-style-image:url('sqpurple.gif');
    }
</style>

<ul>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Coca Cola</li>
</ul>


<!-- 指定列表项标记的类型 -->
ul.a {list-style-type:circle;}
ul.b {list-style-type:square;}

<ul class="a">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

<ul class="b">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

表格

盒子模型

小Tips

  • <style>和<style type="text/css">的区别是什么，二者功能其实一样，一般写＜style></style>就行，参考原因。

  • 子类的继承：body {font-family: Verdana, sans-serif;}其实是规定了父类的显示方式，那么从父类衍生出的子类(包括 p, td, ul, ol, ul, li, dl, dt,和 dd等等)都将继承这个属性。为了照顾不支持继承的Netscape 4浏览器，必须将子类的属性都定义一下p, td, ul, ol, li, dl, dt, dd { font-family: Verdana, sans-serif; }

  • !important标记：CSS 中的 !important 规则用于增加样式的权重。 !important 与优先级无关，但它与最终的结果直接相关，使用一个 !important 规则时，此声明将覆盖任何其他声明。具体利弊参考这里，我在我的wordpress的额外的CSS设置的时候使用了这个tag。

HTML5入门基础

MathML

MathML 是数学标记语言，是一种基于XML（标准通用标记语言的子集）的标准，用来在互联网上书写数学符号和公式的置标语言。不过语法麻烦，不推荐使用。

另外介绍一下MathJax，它是一款运行在浏览器中的开源数学符号渲染引擎，使用MathJax可以方便的在浏览器中显示数学公式，不需要使用图片。目前，MathJax可以解析Latex、MathML和ASCIIMathML的标记语言。LaTeX算起来应该算是排版语言，只是排版数学公式的功能比较强大，在网页上无法直接使用，通常都会由第三方工具(比如MathJax)来解析，然后在生成对应的html。

Leave a Reply