认识HTML_html/css_WEB-ITnose-html tutorial-php.cn

认识HTML_html/css_WEB-ITnose

WBOY

Lepaskan： 2016-06-24 11:34:33

asal

1279 orang telah melayarinya

基本框架：

 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>

Salin selepas log masuk

注释：

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

Salin selepas log masuk

注释：

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>

Salin selepas log masuk

注释：

使用从一个页面链接到另一个页面

的属性指定了链接的目标文件

元素的内容是链接的标签。默认的，这个标签有下划线，指示可以单击的

文字和图像都可以用作链接的标签

使用“..”可以链接到源文件的上一层文件夹的一个文件，".."代表父文件夹。

“/”用来分隔路径的图像

示图：

,

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>

Salin selepas log masuk

注释：

：双引号，短引号，作为现有段落的一部分

：较长引用，单独显示，为块元素

：换行符

，
，

 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>

Salin selepas log masuk

注释：

：ordered list 有序