7

HTML5+CSS3那点事

 3 years ago
source link: https://upclinux.github.io/2015/10/26/what-is-html/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

十年前做网站是一个非常奢侈的活，那时候没有什么工具，也没有什么一键搭建环境，而且服务器很贵，上网的人不多，所以需求也不大。

但是现在不一样了，各种编网页的工具还有自动化的东西也都有了。而且鼓励创新创业，所以基本上人人都可以免费拥有一个网站。

这些真的很简单，主要就是

  1. HTML5标准的一个网页应该是什么样的
  2. 怎么用CSS
  3. 怎么查工具书网站
  4. 丢掉IE 6 7 8吧

一、HTML5是什么鬼

HTML是一种解析性的语言。我们用它不是因为它好看，而是因为它能让我们控制浏览器。如果你不使用HTML语言，那浏览器是不知道该拿你写的这些东西怎么办的。我在讲的时候就示范了一下，你在记事本写好几段文字，但是传上去就是一大坨文字。浏览器不知道哪儿该换行，所以他就把所有的东西都直接输出到正文部分了。

当然啦，和C语言相比他有着本质的不同——它简单得很。你也别指望用HTML去算哪怕是1+1这种东西。

你唯一能控制的，其实就是一堆零散的标签。HTML也就全是这些标签。

来写一个自我介绍吧

下面是一个简单地自我介绍的示范：

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8"></meta>
        <title>Cheney的自我介绍</title>
    </head>
    <body>
    	<h1>这是Cheney的自我介绍</h1>
    	<p>大家好，我是Cheney。这是一个自我介绍。</p>
    	<p>
    		下面是我的联系方式</br>
    		<address>QQ:1152668787</address>
    		<address>电话：加Q以后自己来问</address>
    	</p>
    	<footer>
    		<ul>
    			<li><a href="http://wangchenyu.net.cn">微晨风景</a><li>
    			<li><a href="http://www.itmanbu.com">IT漫步</a><li>
    			<li><a href="http://zuidi.me">最低么</a><li>
            </ul>
        </footer>
    </body>
</html>

下面解释一下这个网页：

  1. 首先是<!doctype html>声明和<html>标签，表明这是一个html文件(网页)。
  2. 然后是<head>标签，<head>标签的内容是不在浏览器主窗口显示的。
  3. <head>里面的<meta>标签的charset属性指定了这个网页的字符集是UTF-8，防止在一些愚蠢的的浏览器中显示乱码。
  4. <title>标签指定了浏览器的标题栏里面写些什么。比如“百度一下，你就知道”。
  5. <h1>~<h6>标签指定了多级标题。
  6. <p>标签里面放的是一个一个段落。
  7. <address>标签是为了指定这是一个联系方式。
  8. <footer>标签指定了页脚。
  9. <ul>、<li>、<a>标签是为了插入一组超链接。

当然了，这些标签你都可以丢掉，只留下你想要的内容在网页上。不过要是在生产环境中你这么干，很可能你就被炒鱿鱼了。我们之所以要用这些标签，是为了让我们的网页显得专业，不要让人家一眼就看出来“这是一个外行写的”。

二、CSS的作用

因为只用html写出来的网页很丑，所以我们需要给那些标签加一些样式才行。这就是CSS要干的事。

在<head>标签里面加上<style>标签然后写一些样式，我们还是先用例子说事：

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8"></meta>
        <title>Cheney的自我介绍</title>
        <style>
        .class1 {
                 background-color:black; 
               } 
        </style>
    </head>
    <body>
    	<h1 class="class1">这是Cheney的自我介绍</h1>
    	<p>大家好，我是Cheney。这是一个自我介绍。</p>
    	<p>
    		下面是我的联系方式</br>
    		<address>QQ:1152668787</address>
    		<address>电话：加Q以后自己来问</address>
    	</p>
    	<footer>
    		<ul>
    			<li><a href="http://wangchenyu.net.cn">微晨风景</a><li>
    			<li><a href="http://www.itmanbu.com">IT漫步</a><li>
    			<li><a href="http://zuidi.me">最低么</a><li>
            </ul>
        </footer>
    </body>
</html>

还是上面的自我介绍，只是我加了一个背景为黑的样式。我们可以在任意标签内指定class然后在style里面用.class { background-color:black; } 这种方式来引用。

#三、W3school.com.cn

打开w3school，然后点上面的HTML/CSS，再点左侧的工具书，然后你就可以看到所有的HTML标签，还有所有的CSS选择器、样式和属性。 需要什么的时候，尽管拿就行了。

#四、关于浏览器

如果在这种科技飞速进步的时代你还在固守着IE，这是一件非常悲哀的事——毕竟微软自己都放弃了。

从IE9开始才支持HTML5，而现在win10中微软不仅把新一代浏览器命名为Edge而且把IE藏到了一个难以找到的角落里。微软的大部分东西都挺好用的，比如Windows，Visual Studio，Office什么的，但是IE浏览器和执行PHP的IIS确实是一个败笔。当然了，我们也要感谢IE。毕竟，没有他我们用什么下载别的浏览器呢？也要感谢IIS，没有它nginx和apache的优势怎么显露呢？

如果你要从事web开发那么你就得在自己电脑上装很多浏览器才行，但是不要乱装。国产浏览器基本上都没有自己的内核，基本上都只是用一个谷歌的内核加一个IE内核套一个自己做的皮罢了。

目前这些浏览器是自己独特的内核：

  1. IE浏览器
  2. Chrome浏览器(谷歌浏览器)
  3. Safari浏览器(苹果浏览器)
  4. Firefox浏览器(火狐浏览器)
  5. Opera浏览器(欧朋浏览器)

目前这些浏览器没有自己的内核：

  1. 360安全/极速浏览器
  2. 猎豹浏览器
  3. 百度浏览器
  4. QQ浏览器
  5. 遨游浏览器
  6. uc浏览器
  7. 2345安全/极速浏览器
  8. 搜狗浏览器
  9. 桔子浏览器
  10. 其他国产浏览器

他们的“极速模式”就是用的Chrome内核，“兼容模式”就是用的IE内核。所以不用浪费时间用国产浏览器测试网页兼容性了。


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK