Head FIRST HTML & CSS 16/3/11

最近一次更新 2016-03-15 20:46:30

感想：

看了几天html了，总结下来就是上手极快，真的很简单，简单到就跟做ppt一样，代码像信一样优美。可能因为现在学的很浅的原因吧。不过这几天学习的热情真的很高呀0.-

还是总结一下这几天的收获：

　html ：　超文本标记文本

　　　　ML: markup language 标记语言

　　　　html通过<html>、<head>、<head>、<body>等标签元素将代码结构化

　　　　HT: hyper text 超文本

　　　　html通过<a>将文本链接到其他网页.html

可以看出html将web页面根据上下逻辑结构，通过标签元素建立代码结构，css提供样式

创建web页面前，应该建立网页逻辑树，源文件通过文件夹形式逻辑实体化

root->root.html->{

　　　　　　　　　　　　← image

　　　　　　　　　　　　　　　↓

　　　　　　　　　　　　　　sub1->sub1.html

　　　　　　　　　　　　　　sub2->sub2.html

　　　　　　　　　　　　　　...

　　　　　　　　　　　　}

代码很结构化，偷懒直接贴代码好了，重点主要谈论一下主要的标签元素类别

内联元素 <x>...</x>	块元素 <x>...</x>	void元素 <x>
<q>引用	<h1>、<h2>、<h3> 标题	<br> 回车
<time> 时间	<p>段落	<img src=“../(.jag .png .gif)”> 图片插入
<a href=“../(.html)”> 网页链接	<blockquote> 长引用会缩进
	<ol>、<ul>、<li> 列表
	<code>

有些内容不能表示如<,>,&...或者有些特殊符号难打出，可以用hmtl规定的相应缩写：

&: &

<: <

>: >

" " :   空格

版权符号:©

...

属性：

title: 鼠标停留会产生提示符

src:

href:<a>内使用

alt:<img>内使用，图形破坏不同浏览器将会显示不同提示符工业级别一定需要

target: <a>内使用，浏览器窗口打开方式 _blank 指新窗口打开如果换成其他，比如blank，相同链接将在同一窗口打开，不会分别创建一个窗口，如果没有target属性，系统默认在原窗口打开

id:标示属性元素和href搭配使用，<a href="utf#(id)">，新窗口直接跳到特定id部分

图片显示，其实一般都在css中调制

height：

charset：<meta>元素内使用，用来表示编码

特殊的元素和<!doctype html>

<!doctypde html> 其实不是元素标签置顶放置告诉浏览器用的是html5标准

sytle：<head>内使用 <style type="text/css"> 内置css

link:<head>内使用复杂网页通过link元素外置css <link type="text/css" rel="stylesheet" href="../(.css)"> 此时没有内置style

给一个代码模型吧，以后也方便：

<html>
    <head>
        <title>EdsonLin</title>
   　　 <style type="text/css">
        　　body{
           　　 background-color:#d2b48c;
            　　margin-left: 20%;   
            　　margin-right: 20%;
            　　border: 2px dotted black;
            　　padding: 10px 10px 10px 10px;
            　　font-family:sans-serif; 
        　　}
   　　 </style>
    </head>
    <body>
        <img src="image/curry.jpg">
        <h1>EdsonLin's first html file.</h1>
        
        <h2>天气</h2>
        <p id="天气">有点冷<a href="weather/weather.html">Weather</a></p>
        <h2>时间</h2>
        <p><time>19:39</time></p>
        <img src="image/cool.jpg">
        <p>
            <q><strong>千里之行始于足下</strong></q>
        </p>
        <strong>
            书单:
        </strong>
        <ul>
            <li>C primer</li>
            <li>C primer plus</li>
            <li>Head first python></li>
            <li>Head first html &css></li>
            <li>算法导论</li>
        </ul>
        <code>
            #include &lt;iostream&gt<br><br>
            using namespace std;<br>
            int main(){<br>
            &nbsp;&nbsp;&nbsp;&nbsp;cout&lt;&lt;"HelloWorld";<br>
            &nbsp;&nbsp;&nbsp;&nbsp;return 0;<br>
            }<br>
                            

        </code>
        <p>
            &copy;2016 EdsonLin
        </p>
    </body>
</html>

在一个谎言的国度，沉默就是英雄