在线web工具
html教程-w3
html教程-runoob

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

VScode及其他的Tips

  • 输入!+Tab键就会直接出现html模板,或者输入html:5回车也能达到相同的效果
  • 输入ul+Tab键就会直接写好"<ul> </ul>"

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。