HTML快速复习手册

一、一个html实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>这是网页名称</title>
</head>
<body>
 
<h1>这是一个h1标题</h1>
 
<p>这是一个段落。</p>
 
</body>
</html>

点击查看效果

后缀可以是.html,或者 .htm

二、HTML标签

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>这是网页名称</title>
</head>
<body>
 
<h1>这是一个h1标题</h1>
<h2>这是一个h2标题</h2>
<h3>这是一个h3标题</h3>
<h4>这是一个h4标题</h4>
<h5>这是一个h5标题</h5>
<h6>这是一个h6标题，一共就六个</h6>

<p>这是一个段落。</p>
<p>这是另外一个段落</p>

<a href="http://www.forcoldplay.com">这是一个链接</a>

<p>这是个html空元素,用来换行</p>

<br/>
<br/>
<br/>

<p>这是一个图片</p>
<img src="http://www.forcoldplay.com/myhead.png" width="258" height="258"/>

<p>这是一个水平线</p>
<hr/>

<p>在不产生<br/>新段落的<br/>情况下换行</p>

<b>这个文本是加粗的</b> <br/>

<strong>这个文本是加粗的</strong><br/>

<big>这个文本字体放大</big><br/>

<em>这个文本是斜体的</em> <br/>

<i>这个文本是斜体的</i><br/>

<small>这个文本是缩小的</small><br/>

<p>H<sub>2</sub>O</p>
<p>2<sup>2</sup>=4</p>

<a href="http://www.forcoldplay.com/myhead.png" target="_blank">因为_blank属性值，这个图片链接将在一个新的网页打开</a>


</body>
</html>

点击查看效果

三、html属性

大多数html的属性

属性描述
class为html定义一个或者多个类名
id定义元素唯一Id
style规定元素的行内样式
title描述元素的额外信息

四、html头部

1.<base>

定义了所有链接的URL

<!DOCTYPE html>
<html>
    <head>
        <title>测试base</title>
        <meta charset="utf-8"/>
        <base href="http://www.forcoldplay.com/" target="_blank">
    </head>
    <body>
        <img src="myhead.png" /> 
        <p>这里虽然使用了图片的相对地址，但是< base>指定了该页面的所有默认URL，所以实际访问路径为http://www.forcoldplay.com/myhead.png</p>
        <a href="">这个链接会在新的窗口打开，因为< base>里设置了target属性</a>
    </body>
</html>

点击查看效果

2.<meta>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>测试<meta></title> 
<meta name="description" content="关于meta的一些东西">
<meta name="keywords" content="HTML">
<meta name="author" content="forcoldplay,com">
<meta http-equiv="refresh" content="10">
</head>
<body>

<p>所有 meta 标签显示在 head 部分...</p>
<p>

    name="description"，为网页定义描述内容<br/>
    name="keywords"，为搜索引擎提供关键词
    name="author" ，定义网页坐着
    http-equiv="refresh"，网页定时刷新
    
</p>

</body>
</html>

点击查看效果

五、HTML_CSS

1. 内联样式

<!DOCTYPE html>
<html>
    <head>
        <title>内联样式实例</title>
        <meta charset="utf-8">
    </head>
    <body style="background-color:yellow;">
        <h1 style="background-color:blue;">这是一个标题</h1>
        <p style="background-color: red;">这是一个段落</p>
        <h1 style="font-family: Verdana, Geneva, Tahoma, sans-serif;">这是一个标题</h1>
        <p style="color: blue;font-size: 100px;">这是一个段落</p>
    </body>
</html>

点击查看效果

2.内联样式表

<!DOCTYPE html>
<html>
    <head>
        <title>内联样式表</title>
        <meta charset="utf-8">
        <style type="text/css">
            body{background-color: yellow;}
            h1{color: blue;}
            p{color: red;}
        </style>
    </head>
    <body>
        <h1>这是一个标题</h1>
        <p>这是一个段落</p>
    </body>
</html>

点击查看效果

3.外部引用

<!DOCTYPE html>
<html>
    <head>
        <title>外部样式</title>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="mystyle.css">
    </head>
    <body>
        <h1>这是一个标题</h1>
        <p>这是一个段落</p>
    </body>

</html>
body{
    background-color: yellow;
}
h1{
    color: blue;
}
p{  
    color: red;
}

点击查看效果

六、图像

来自文件夹或者服务器的图片

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>这是网页名称</title>
</head>
<body>
    <p>一个来自文件夹的图片</p>
    <img src="/Wallpaper/100.jpg" alt="蓝天的手机壁纸" width="255" height="255">
    <p>一个来自服务器的图片</p>
    <img src="http://www.forcoldplay.com/myhead.png" alt="博客头像" width="255" height="255">
    <p>这是一个图片链接</p>
    <a href="http://www.forcoldplay.com"><img src="http://www.forcoldplay.com/myhead.png" alt="我的博客" width="255" height="255"></a>
</body>
</html>

点击查看效果

alt 属性用来为图像定义一串预备的可替换的文本。

指定图像的高度和宽度是一个很好的习惯。如果图像指定了高度宽度，页面加载时就会保留指定的尺寸。如果没有指定图片的大小，加载页面时有可能会破坏HTML页面的整体布局。

七、表格

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>这是网页名称</title>
</head>
<body>
 
    <table border="12" cellpadding="20">
        <caption>表格的标题</caption>
        <tr>
            <th>标签</th>
            <th>描述</th>
        </tr>
        <tr>
            <td>table标签</td>
            <td>表格由table来定义</td>
        </tr>
        <tr>
            <td>tr标签</td>
            <td>表示行</td>
        </tr>
        <tr>
            <td>td标签</td>
            <td>表示列</td>
        </tr>
        <tr>
            <td>th标签</td>
            <td>表示表头</td>
        </tr> 
        <tr>
            <td>border属性</td>
            <td>0表示没有边框，其中数值代表边框的大小</td>
        </tr>     
        <tr>
            <td>cellpadding属性</td>
            <td>单元格的边距</td>
        </tr>      
        <tr>
            <td>cellspacing属性</td>
            <td>单元格的边距</td>
        </tr>      
    </table>
</body>
</html>

点击查看效果

八、列表

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>这是网页名称</title>
</head>
<body>
 
<!--无序列表-->
<ul>
    <li>milk</li>
    <li>coffee</li>
</ul>

<!--有序列表-->
<ol>
    <li>cat</li>
    <li>dog</li>
    <li>bird</li>
</ol>

</body>
</html>

点击查看效果

九、布局

1.div

HTML <div> 元素是块级元素，它可用于组合其他 HTML 元素的容器。

<div>没有特殊含义，常见的用途是文档布局。可以为大块的内容块设置属性。

2.span

HTML <span> 元素是内联元素，可用作文本的容器。

也没有什么含义，可以为部分文本设置样式属性。

点击查看div布局效果

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>一个页面</title> 
</head>
<body>
 
<div id="container" style="width:1000px">
 
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">我的博客</h1>
<h2 style="margin-bottom: 0;">友谊天长地久</h2>
</div>
 
<div id="menu" style="background-color:#FFD700;  height:500px;width:300px;float:left;">
<b>首页</b><br>
关于我<br>
独立页面<br>
分类<br/>
友联<br>
</div>
 
<div id="content" style="background-color:#EEEEEE; height:500px; width:700px;float:left;">
博客内容在这里</div>
 
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
版权 © forcoldplay.com</div>
 
</div>
 
</body>
</html>
十、表单和输入

十、表单和输入

点击查看效果

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单和输入</title>
</head>
<body>
 
<p>forcoldplay.com网站注册</p>
<form>
    账号：<input type="text" name="account"> <br> 
    密码：<input type="password" name="psd">
</form>
<br>

<p>你的性别</p> 
<form>
    <input type="radio" name="sex" value="male">Male<br>
    <input type="radio" name="sex" value="female">Female
</form>
<br>

<p>你养了什么宠物？</p>
<form>
    <input type="checkbox" name="animal" value="cat">一只猫<br>
    <input type="checkbox" name="animal" value="dog">一只狗<br>

    <input type="submit" value="提交">
</form>

</body>
</html>

十一、html框架

其语法为:

<iframe src="URL"></iframe>

点击查看效果

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head> 
<body>

<iframe src="http://www.forcoldplay.com" width="600" height="2200"></iframe>
<iframe src="http://www.forcoldplay.com/index.php/cross.html" width="600" height="2200"></iframe>
<p>一些旧的浏览器不支持 iframe。</p>
<p>如果浏览器不支持 iframes 则不会显示。</p>

</body>
</html>

十二、html速查手册

runoob.com链接

Last modification：January 2nd, 2020 at 03:32 am
© 允许规范转载
如果觉得我的文章对你有用，请随意赞赏