zoukankan      html  css  js  c++  java
  • 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部分

    图片显示,其实一般都在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>

                                                                            

    在一个谎言的国度,沉默就是英雄
  • 相关阅读:
    EasyUI中datagrid的行编辑模式中,找到特定的Editor,并为其添加事件
    easyui datagrid plunges 扩展 插件
    jQuery EasyUI DataGrid Checkbox 数据设定与取值
    Easyui Tree方法扩展
    记账凭证
    部分扩展功能总结
    凭证
    voucer
    Box2D 一、学习资料(库、pdf)
    EUI EXML内部类Skin和ItemRenderer
  • 原文地址:https://www.cnblogs.com/EdsonLin/p/5267493.html
Copyright © 2011-2022 走看看