Heim > Web-Frontend > HTML-Tutorial > 认识HTML_html/css_WEB-ITnose

认识HTML_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:34:33
Original
1276 Leute haben es durchsucht

基本框架:

 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>
Nach dem Login kopieren

注释:

  • 和告诉浏览器文件的内容是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>
    Nach dem Login kopieren

    注释:

  • 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>
    Nach dem Login kopieren

    注释:

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

    ,

    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>
    Nach dem Login kopieren

    注释:

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

  • :换行符

     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>
    Nach dem Login kopieren

    注释:

    1. :ordered list 有序
  • Quelle:php.cn
    Erklärung dieser Website
    Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
    Beliebte Tutorials
    Mehr>
    Neueste Downloads
    Mehr>
    Web-Effekte
    Quellcode der Website
    Website-Materialien
    Frontend-Vorlage