简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首页 > web前端 > html教程 > 正文

HTML学习笔记二

不言
发布： 2018-04-19 14:32:03
原创
1446 人浏览过


这篇文章介绍的内容是关于HTML学习笔记二 ，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下

1、表格

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
登录后复制

......定义行，定义列

表头表示：

<tr>
<th>heading</th>
</tr>
登录后复制

如果要表示一个空行，可以用 空格占位符填充。


2、列表



第一种：无序列表——

    ，使用粗体圆点标记

    <ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
    登录后复制


    或者使用

      ……使用的是空心圆点。


      第二种：有序列表——

        ，使用数字标记

        <ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
        登录后复制


        或者使用

          ……表示数字从50开始标记。




          第三种：自定义列表——

          <dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
          登录后复制


          说明：

          表示列表开始



          表示列表项

          表示列表项的定义



          注意，列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。




          3、HTML类

          对HTML进行分类，能为元素的类定义CSS样式。



          对相同的类设置相同的样式。

          <!DOCTYPE html>
<html>
<head>
<style>
.cities {
    background-color:black;
    color:white;
    margin:20px;
    padding:20px;
} 
</style>
</head>

<body>

<p class="cities">
<h2>London</h2>
<p>
London is the capital city of England. 
It is the most populous city in the United Kingdom, 
with a metropolitan area of over 13 million inhabitants.
</p>
</p> 

</body>
</html>
          登录后复制



          是块级元素，用于设置相同类。

          是行内元素。

          <html>
<head>
<style>
  span.red {color:red;}
</style>
</head>
<body>

<h1>My <span class="red">Important</span> Heading</h1>

</body>
</html>
          登录后复制



          4、HTML网站布局

          （1）使用

          进行布局

          <head>
<style>
#header {
    background-color:black;
    color:white;
    text-align:center;
    padding:5px;
}
#nav {
    line-height:30px;
    background-color:#eeeeee;
    height:300px;
    width:100px;
    float:left;
    padding:5px;	      
}
#section {
    width:350px;
    float:left;
    padding:10px;	 	 
}
#footer {
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
   padding:5px;	 	 
}
</style>
</head>
          登录后复制


          使用

          （2）HTML5提供的新语义元素



          定义文档或节的页眉

......