首页 > web前端 > html教程 > 认识HTML_html/css_WEB-ITnose

认识HTML_html/css_WEB-ITnose

WBOY
发布: 2016-06-24 11:34:33
原创
1276 人浏览过

基本框架:

 1 <html>  2 <head>  3 <title>This Is Title</title> 4 </head> 5  6 <body> 7 <h1><!--一级标题--></h1> 8 <h2><!--二级标题--></h2> 9 <p>10 <!--段落-->11 </p>12 </body>13 </html>
登录后复制

注释:

  • 和告诉浏览器文件的内容是HTML
  • 被和包围的首部(head)告诉浏览器关于web页面的信息
  • head标记中放入title标记,title出现在浏览器窗口
  • 页面的主体包括和标记以及他们之间的所有内容,是浏览器中看到的部分
  • 元素 = 开始标记 + 内容 + 结束标记
  • style,CSS

     1 <head>                     2     <title>This Is Title</title> 3          4     <style type="text/css"> 5                 body{ 6                     background-color: #eaf;     7                     margin-left: 20%; 8                     margin-right: 20%; 9                     border: 2px dotted black;10                     padding: 10px 10px 10px 10px;11                     font-family: sans-serif;12                 }13     </style>14 </head>
    登录后复制

    注释:

  • style指定样式为CSS
  • background-color :背景色
  • margin-left,margin-right:左右外边距分别占页面的20%
  • border:页面周围边框为虚线,颜色为黑色
  • padding:在页面主体周围创建一些内边距
  • font-family:定义文本使用的字体
  • HT(hypertext)

    1 <a href = "beverages/elixir.html" > elixirs </a>2 <a href = "http://www.cnblogs.com/JJ-kelion/" title = "Read His blogs" > cnblogs jj-kelion </a>3 <a href = "../index.html" > RETURN </a>4 <a target = "_blank" href="beverages/elixir.html"> <img  src="images/j.png" alt="认识HTML_html/css_WEB-ITnose" > </a>
    登录后复制

    注释:

  • 使用从一个页面链接到另一个页面
  • 的属性指定了链接的目标文件
  • 元素的内容是链接的标签。默认的,这个标签有下划线,指示可以单击的
  • 文字和图像都可以用作链接的标签
  • 使用“..”可以链接到源文件的上一层文件夹的一个文件,".."代表父文件夹。
  • “/”用来分隔路径的图像
  • 示图:

    ,

    1 <blockquote>2     Passing cars, <br>3     when you can't see, <br>4     A glimpse, <br>5 </blockquote>6 7 <p>8     <q> passing car </q>,when you can't see.9 </p>
    登录后复制

    注释:

  • :双引号,短引号,作为现有段落的一部分
  • :较长引用,单独显示,为块元素

  • :换行符

     1 <ol> 2     <li> one </li> 3     <li> two </li> 4     <li> three </li> 5     <li> four thing  6         <ul> 7             <li> one </li> 8             <li> two </li> 9             <li> three </li>10         </ul>11     </li>12 </ol>
    登录后复制

    注释:

    1. :ordered list 有序
  • 来源:php.cn
    本站声明
    本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
    热门教程
    更多>
    最新下载
    更多>
    网站特效
    网站源码
    网站素材
    前端模板