html基础

来源：互联网发布：linux 查看命令行历史编辑：程序博客网时间：2024/06/05 07:10

基本结构：

<!DOCTYPE html><html><head>    <title></title></head><body></body></html>

段落：

<p>内容<p>

注释：

<!--注释内容-->

文字处理：

1、文字的大小：

<p style="font size:像素px;">内容</p>

2、文字的颜色：

<p style="color:颜色;">内容</p>

3、字体：

<p style="font-family:字体;">内容</p>

4、文字的位置（right / left / center）

<p style="text-align:位置;">内容</p>

5、文字加粗：

<strong>内容</strong>

6、文字斜体：

<em>内容</em>

背景颜色

<body style="background-color:颜色">

（对于颜色的使用，可以参照这个颜色对应表点击打开链接）

list 的使用

（有序与无序可以相互嵌套使用）

1、有序列表：

<body>    <ol>        <li>内容</li>        <li>内容</li>    </ol></body>

2、无序列表：

<body>    <ul>        <li>内容</li>        <li>内容</li>    </ul></body>

图片的处理

1、添加图片：

<body>    <img src="图片的地址" /></body>

2、改变图片大小：

<img src="图片的地址" width="像素px" height="像素px" />

3、改变图片的位置：

<img style="width:数字%"><img src="图片地址" />

表格

1、标题、表格的纵横

<body>    <table>        <thead><!--表格也可以有自己的标题-->            <tr>                <th>表格标题</th>                <!--<th>的用法和下面的<td>用法一样，意为table head-->            </tr>        </thead>            <tr>                <td>data</td>                <!--<td>表示表格的数据table data，一般一对<tr></tr>只能表示一行，                    而且这一行只有一个单元，即只有一列。所以要想让一个表格一行有                    几列，就在<tr></tr>标签中加几对<td></td>-->            </tr>            <!--<tr>表示表格的行table row-->    </table></body>

2、合并单元格

<body>    <table>        <tr>            <td colspan="2">data</td>            <!--colspan的用法为合并单元格。如果这一行原本有两格，但是我现在想            合并为一个的话，就可以直接写colspan="2"-->        </tr>    </table></body>

div与span

1、div

<body><div style="width:50px; height:50px; background-color:red"></div><div style="width:50px; height:50px; background-color:blue"></div><div style="width:50px; height:50px; background-color:green"></div><div style="width:50px; height:50px; background-color:yellow"></div><!--这四个<div>标签是可以把页面分为四个部分，并且分别进行操作，意为divide--></body>

2、span

<body><p>This text is black, except for the word <span style="color:red">red</span>!</p>        <!--<span>是比div更小的分割单元，也可以方便的对分割的单元进行各种操作--></body>

超链接

1、文字链接：

<a href="链接地址">内容</a>

2、图片链接：

<a href="链接地址"><img src="图片地址" /></a>

添加音乐播放器

1、第一种方法（加了autoplay="autoplay"之后可以让音乐自动播放，没有加的话，音乐需要手动点击播放）

<body><audio id="audio" controls="controls" autoplay="autoplay">  <source src="歌曲地址"></audio></body

2、第二种方法(代码中的数字是调整播放器的控制窗口的大小，这个也是自动播放的)

<embed height="数字" width="数字" src="歌曲地址"></embed>

（目前只学了这么点，先做个总结，以后再慢慢加上其他的）