微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

首页 > 博客列表 > 《HTML基础》2019-12-19作业笔记

博主信息

博文 26

粉丝 1

访问量 25601

专题推荐

更多>

页面的基本结构

<!-- 文档说明 -->
<!DOCTYPE html>
<!-- 跟节点 -->
<html lang="en">
<!-- 头部，主要用于给浏览器，搜索引擎解析 -->
<head>
    <meta charset="UTF-8">
    <title>我的第一个网页</title>
</head>
<!-- 主体部分：给客户用户看到的界面，平时的网页内容存放区域 -->
<body>
    <h2 height="40" width="100" style="color: red;">Hello Word!</h2>
</body>
</html>

总结

1.需要声明文档类型
2.页面根节点需要有
3.页面分头部和主体两部分，头部用于浏览器搜索引擎解析，主体部分用于展示内容
4.标签都可以有自己的属性，大小，颜色，字体等
5.标签都是用尖括号括起来，大多数成对出现，双标签形式，也有单标签

语义化标签

标签	说明
<h1>~<h6>	标题标签：用于划分或内容中的文本段落
<header>	页眉：一般由导航，logo等元素组成
<footer>	页脚：一般由友情链接，联系方式，备案号，版权等信息组成
<nav>	导航：导航通常是有一个或多个链接标签<a>标签组成
<main>	主体：作为页面的主要内容容器使用，建议一个页面只出现一次
<article>	文档：本义是文档，实际可以充当其他内容的容器
<aside>	边栏：与主体信息无关，例如广告位、相关推荐、阅读排行等
<section>	片段：与主体无关的信息，例如广告位、相关推荐、阅读排行等
<div>	区块：也叫通用容器，本身无任何语义，功能主要是用过他的属性来描述

应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>语义化标签应用</title>
</head>
<body>
    <header>页眉</header>
    <main>
        <article>
               <h2>标题</h2>
               <p>段落</p>
        </article>
        <aside>广告位</aside>
    </main>
    <footer>页脚</footer>
</body>
</html>

图像与链接

图像元素

单标签，没有结束标记

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>语义化标签应用</title>
</head>
<body>
    <img src="images/1.jpg" alt="美女" width="300" title="赵丽颖">
</body>
</html>

1.src图片路径
2.alt图片失效后的文字说明
3.width图片宽度，如果不写heigh那么图片默认等比缩放
4.title鼠标悬停的时候文字提示

链接元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接</title>
</head>
<body>
    <!-- 打开跳转页面 -->
    <a href="https://www.php.cn" target="_blank">php.cn</a>
    <!-- 下载文件 -->
    <a href="demo.zip" target="_blank">demo.zip下载</a>
    <!-- 发送邮件 -->
    <a href="mailto:183332818@qq.com">发邮件</a>
    <!-- 打电话 -->
    <a href="tel:18951835487">打电话</a>
    <!-- 锚点 -->
    <a href="#test">锚点</a>
    <h1 id="test" style="margin-top:1200px;">锚点使用案例</h1>
</body>
</html>

1.a标签链接标签
2.href是跳转地址，如果放入其他文件名如zip，也可以用作下载、发邮件、打电话等使用
3.target是页面打开方式，默认当前页面跳转，_blank打开一个新窗口
4.a标签中间是标签名称
5.a标签也可做为页面的锚点使用，进行页面节点之间跳转

列表与表格

列表元素

标签	说明
<ul>,<li>	无序列表标签
<ol>,<li>	有序列表标签
<dl>,<dt>,<dd>	自定义列表标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表</title>
</head>
<body>
    <h3>购物车：</h3>
    <!-- 无序 -->
    <ul>
        <li>1.苹果，3斤，10，30</li>
        <li>2.西瓜，10，8，80</li>
        <li>3.手机，1，5000，5000</li>
    </ul>
    <!-- 有序 -->
    <ol>
        <li>苹果，3斤，10，30</li>
        <li>西瓜，10，8，80</li>
        <li>手机，1，5000，5000</li>
    </ol>
    <!-- 自定义列表 -->
    <dl>
        <dt>第十期培训班</dt>
        <dd>前端基础</dd>
        <dd>PHP编程</dd>
        <dd>laravel框架开发</dd>
    </dl>
</body>
</html>

表格元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
    <table border="" width="500" height="150" cellpadding="10" cellspacing="0"> 
        <!-- 表格的名称 -->
        <caption><h2>购物车</h2></caption>
        <thead>
            <tr bgcolor="#add8e6">
                <th>ID</th>
                <th>品名</th>
                <th>数量</th>
                <th>单价</th>
                <th>金额</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>苹果</td>
                <td>3斤</td>
                <td>10</td>
                <td>30</td>
            </tr>
            <tr>
                <td>2</td>
                <td>西瓜</td>
                <td>10</td>
                <td>8</td>
                <td>80</td>
            </tr>
            <tr>
                <td>3</td>
                <td>手机</td>
                <td>1</td>
                <td>5000</td>
                <td>5000</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="2" align="center">合计：</td>
                <td>14</td>
                <td></td>
                <td>5110</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

总结

1.table表格标签声明，双标签
2.caption表格标题
3.thead、tbody、tfoot表格表头、主体、表格结尾标签，双标签
4.tr，th表头；tr，td表体元素
5.border表格线、width宽度、height高度、cellpadding表格内间距、cellspacing表格线宽度、bgcolor背景颜色、colspan合并表格数量、align居中

内联框架与多媒体

属性	说明
src	被嵌套页面的URL地址

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>iframe</title>
</head>
<body>
    <iframe src="www.php.cn" frameborder="0" width="500" height="300"></iframe>
</body>
</html>