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规定的相应缩写:

&: &amp;

<: &lt;

>:  &gt;

" " : &nbsp; 空格

版权符号:&copy;

...

 

 

 

属性:

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

src:

href:<a>内使用

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

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

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

width:图片显示,其实一般都在css中调制

height:

 

charset:<meta>元素内使用,用来表示编码

 

特殊的元素和<!doctype html>

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

<meta charset="utf-8">  放在<head>告诉浏览器使用utf-8编码

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>

 

                                                                        

你可能感兴趣的:(Head FIRST HTML & CSS 16/3/11)