HTML5学习(一)

文章目录

第一个html文件

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>html学习</title>
</head>

<body>
    <h1>html</h1>
    <p>hello html</p>
</body>

</html>

HTML5学习(一)

HTML 标题

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>html学习</title>
</head>

<body>
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
</body>

</html>

HTML5学习(一)

HTML 段落

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>html学习</title>
</head>

<body>
    <p>这是一个段落</p>
    <p>这是另一个段落</p>
</body>

</html>

HTML5学习(一)

HTML 链接

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>html学习</title>
</head>

<body>
    <a href="http://www.baidu.com/">百度搜索</a>
</body>

</html>

HTML5学习(一)

HTML 图像

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>html学习</title>
</head>

<body>
    <img src="img1.jpg" alt="代码截图" width="250px" height="250px">
</body>

</html>

HTML5学习(一)

水平线、换行

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>html学习</title>
</head>

<body>
    <h1>第一个标题</h1>
    <hr><!--水平线-->
    <p>
        第一行
        <br><!--换行-->
        第二行
    </p>
</body>

</html>

HTML5学习(一)

文本格式化

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>html学习</title>
</head>

<body>
    <b>定义粗体文本</b><br>
    <em>定义着重文字</em><br>
    <i>定义斜体字</i><br>
    <small>定义小号字</small><br>
    <strong>定义加重语气</strong><br>
    定义下标字2<sub>3</sub><br>
    定义上标字2<sup>3</sup><br>
    <ins>定义插入字</ins><br>
    <del>定义删除字</del>
</body>

</html>

HTML5学习(一)

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>html学习</title>
</head>

<body>
    <code>
        定义计算机代码
    </code><br>
    <kbd>
        定义键盘码
    </kbd><br>
    <samp>
        定义计算机代码样本
    </samp><br>
    <var>
        定义变量
    </var><br>
    <pre>
        定义预格式文本
    </pre><br>
</body>

</html>

HTML5学习(一)

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>html学习</title>
</head>

<body>
    <abbr>定义缩写</abbr><br>
    <address>定义地址</address><br>
    <bdo>定义文字方向</bdo><br>
    <blockquote>定义长的引用</blockquote><br>
    <q>定义短的引用语</q><br>
    <cite>定义引用、引证</cite><br>
    <dfn>定义一个定义项目</dfn><br>
</body>

</html>

HTML5学习(一)

链接

<a href="url">链接文本</a>
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>html学习</title>
</head>

<body>
    <a href="https://www.baidu.com/">访问百度搜索首页</a>
</body>

</html>

HTML5学习(一)

<a href="url" target="_blank">访问xxx</a>
 target 属性:
_blank	在新窗口中打开被链接文档。
_self	默认。在相同的框架中打开被链接文档。
_parent	在父框架集中打开被链接文档。
_top	在整个窗口中打开被链接文档。
framename	在指定的框架中打开被链接文档。

HTML 头部

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <!--meta标签描述了一些基本的元数据。
        <meta> 标签提供了元数据.元数据也不显示在页面上,但会被浏览器解析。
        META 元素通常用于指定网页的描述,关键词,文件的最后修改时间,作者,和其他元数据。
        元数据可以使用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他Web服务。
        <meta> 一般放置于 <head> 区域-->
    <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
    <!--为搜索引擎定义关键词-->
    <meta name="description" content="html学习">
    <!--为网页定义描述内容-->
    <meta name="author" content="xingweikun">
    <!--定义网页作者-->
    <meta http-equiv="refresh" content="30">
    <!--每30秒钟刷新当前页面-->
    
    <title>文档标题</title>
    <!--定义了浏览器工具栏的标题
    当网页添加到收藏夹时,显示在收藏夹中的标题
    显示在搜索引擎结果页面的标题-->
    <base href="url" target="_blank">
    <!--<base> 标签描述了基本的链接地址/链接目标,
    该标签作为HTML文档中所有的链接标签的默认链接-->
    <link rel="stylesheet" type="text/css" href="xxx.css">
    <!--<link> 标签定义了文档与外部资源之间的关系
        <link> 标签通常用于链接到样式表-->
    <style type="text/css">
        body {
            background-color: yellow
        }

        p {
            color: blue
        }
    </style>
    <!--<style> 标签定义了HTML文档的样式文件引用地址
        在<style> 元素中你也可以直接添加样式来渲染 HTML 文档-->

</head>

<body>
    文档内容......
</body>

</html>

HTML5学习(一)

HTML CSS

背景颜色

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>html学习</title>
</head>

<body>
    <h1 style="background-color: blue;">标题</h1>
    <p style="background-color: yellow;">段落</p>
</body>

</html>

HTML5学习(一)
字体,字体颜色,字体大小

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>html学习</title>
</head>

<body>
    <p style="font-family: Arial;color: red;font-size: 20px;">这是一个段落</p>
</body>

</html>

HTML5学习(一)
文本对齐方式

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>html学习</title>
</head>

<body>
    <p style="text-align: center;">这是一个段落</p>
</body>

</html>

HTML5学习(一)

内部样式表

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>html学习</title>
    <style type="text/css">
        h1 {
            background-color: red;
            text-align: center;
        }

        p {
            background-color: green;
            font-size: 30px;
            text-align: center;
        }
    </style>
</head>

<body>
    <h1>这是一个标题</h1>
    <p>这是一个段落</p>
</body>

</html>

HTML5学习(一)
外部样式表

<head>
<link rel="stylesheet" type="text/css" href="xxx.css">
</head>

表格

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>html学习</title>
</head>

<body>
    <table border="1">
        <tr>
            <th>表头1</th>
            <th>表头2</th>
            <th>表头3</th>
        </tr>
        <tr>
            <td>第一行第一列</td>
            <td>第一行第二列</td>
            <td>第一行第三列</td>
        </tr>
        <tr>
            <td>第二行第一列</td>
            <td>第二行第二列</td>
            <td>第二行第三列</td>
        </tr>
    </table>
</body>

</html>

HTML5学习(一)

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>html学习</title>
    <style>
        thead{color: red;}
        tbody{color:black}
        tfoot{color: blue;}
    </style>
</head>

<body>
    <caption>收益表</caption>
    <table border="1">
        <colgroup>
            <col span="1" style="background-color:green">
            <col style="background-color: yellow;">
        </colgroup>
        <thead>
            <tr>
                <th>月份</th>
                <th>金额</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <td>总计</td>
                <td>350</td>
            </tr>
        </tfoot>

        <tbody>
            <tr>
                <td>一月</td>
                <td>150</td>
            </tr>
            <tr>
                <td>二月</td>
                <td>200</td>
            </tr>
        </tbody>

    </table>
</body>

</html>

HTML5学习(一)

HTML 列表

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>html学习</title>
</head>

<body>
    <!--无序列表-->
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JS</li>
    </ul>
    <!--有序列表-->
    <ol>
        <li>HTML</li>
        <li>CSS</li>
        <li>JS</li>
    </ol>
    <!--自定义列表-->
    <dl>
        <dt>HTML</dt>
        <dd>描述</dd>
        <dt>CSSL</dt>
        <dd>描述</dd>
        <dt>JS</dt>
        <dd>描述</dd>
    </dl>

    <ol type="a">
        <li>HTML</li>
        <li>CSS</li>
        <li>JS</li>
    </ol>
    <ol type="A">
        <li>HTML</li>
        <li>CSS</li>
        <li>JS</li>
    </ol>
    <ol type="I">
        <li>HTML</li>
        <li>CSS</li>
        <li>JS</li>
    </ol>
    <ol type="i">
        <li>HTML</li>
        <li>CSS</li>
        <li>JS</li>
    </ol>
</body>

</html>

HTML5学习(一)

HTML 区块

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>html学习</title>
    <style>
        .div1{
            float: left;
            width: 25%;
            height: 500px;
            background-color: red;
        }
        .div2{
            float: left;
            width: 25%;
            height: 750px;
            background-color: yellow;
        }
        #div3{
            float: left;
            width: 25%;
            height: 500px;
            background-color: black;
        }
        #div4{
            float: left;
            width: 25%;
            height: 750px;
            background-color: green;
        }
    </style>
</head>

<body>
   <div class="div1"></div>
   <div class="div2"></div>
   <div id="div3"></div>
   <div id="div4"></div>
</body>

</html>

HTML5学习(一)

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>html学习</title>
    <style>
        #span1 {
            color: red;
        }

        #span2 {
            color: blue;
        }

        #span3 {
            color: black
        }

        #span4 {
            color: green
        }
    </style>
</head>

<body>
    <p><span id="span1">红色</span><span id="span2">蓝色</span><span id="span3">黑色</span><span id="span4">绿色</span></p>
</body>

</html>

HTML5学习(一)

HTML 布局

使用<div> 元素

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>html学习</title>
</head>

<body>
    <div style="width: 500px;">
        <div style="background-color: yellow;width: 100%;">
            <h1 style="margin-bottom: 0;text-align: center;">网页标题</h1>
        </div>

        <div style="background-color: red;height: 200px;width: 100px;float: left;">
            <h1>菜单</h1>
            <a href="">链接1</a><br><a href="">链接2</a><br><a href="">链接3</a><br><a href="">链接4</a><br><a href="">链接5</a>
        </div>
        <div style="background-color: green;height: 200px; width: 400px;text-align: center;float: right;">
            网页内容
        </div>

        <div style="background-color: pink;width: 100%;height: 100px;text-align: center;float: left;">
            版权 © xingweikun
        </div>
    </div>
</body>

</html>

HTML5学习(一)
使用表格

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>html学习</title>
</head>

<body>
    <table style="width: 500px;">
        <tr>
            <td colspan="2" style="background-color: pink;">
                <h1>网页标题</h1>
            </td>
        </tr>
        <tr>
            <td style="background-color: yellow; width: 100px;">
                <h1>菜单</h1>
                <a href="">链接1</a><br><a href="">链接2</a><br><a href="">链接3</a><br><a href="">链接4</a><br><a
                    href="">链接5</a>
            </td>
            <td style="background-color: green;width: 400px;text-align: center;">网页内容</td>
        </tr>
        <tr>
            <td colspan="2" style="background-color: grey;text-align: center;">版权 © xingweikun</td>
        </tr>
    </table>
</body>

</html>

HTML5学习(一)

上一篇:HTML5-表格table


下一篇:零基础必看的Html5+Css3+移动端前端视频教程(三)