简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 《HTML基础》2019-12-19作业笔记
Blogger Information
Blog 26
fans 1
comment 1
visits 19650
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
《HTML基础》2019-12-19作业笔记
杨凡的博客
Original
807 people have browsed it

页面的基本结构

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

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

语义化标签

标签 说明
<h1>~<h6> 标题标签：用于划分或内容中的文本段落
<header> 页眉：一般由导航，logo等元素组成
<footer> 页脚：一般由友情链接，联系方式，备案号，版权等信息组成
<nav> 导航：导航通常是有一个或多个链接标签<a>标签组成
<main> 主体：作为页面的主要内容容器使用，建议一个页面只出现一次
<article> 文档：本义是文档，实际可以充当其他内容的容器
<aside> 边栏：与主体信息无关，例如广告位、相关推荐、阅读排行等
<section> 片段：与主体无关的信息，例如广告位、相关推荐、阅读排行等
<div> 区块：也叫通用容器，本身无任何语义，功能主要是用过他的属性来描述
应用
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>语义化标签应用</title>
  6. </head>
  7. <body>
  8.     <header>页眉</header>
  9.     <main>
  10.         <article>
  11.                <h2>标题</h2>
  12.                <p>段落</p>
  13.         </article>
  14.         <aside>广告位</aside>
  15.     </main>
  16.     <footer>页脚</footer>
  17. </body>
  18. </html>

图像与链接

图像元素

单标签，没有结束标记

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

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

链接元素

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>链接</title>
  6. </head>
  7. <body>
  8.     <!-- 打开跳转页面 -->
  9.     <a href="https://www.php.cn" target="_blank">php.cn</a>
  10.     <!-- 下载文件 -->
  11.     <a href="demo.zip" target="_blank">demo.zip下载</a>
  12.     <!-- 发送邮件 -->
  13.     <a href="mailto:183332818@qq.com">发邮件</a>
  14.     <!-- 打电话 -->
  15.     <a href="tel:18951835487">打电话</a>
  16.     <!-- 锚点 -->
  17.     <a href="#test">锚点</a>
  18.     <h1 id="test" style="margin-top:1200px;">锚点使用案例</h1>
  19. </body>
  20. </html>

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

列表与表格

列表元素

标签 说明
<ul>,<li> 无序列表标签
<ol>,<li> 有序列表标签
<dl>,<dt>,<dd> 自定义列表标签 
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>列表</title>
  6. </head>
  7. <body>
  8.     <h3>购物车：</h3>
  9.     <!-- 无序 -->
  10.     <ul>
  11.         <li>1.苹果，3斤，10，30</li>
  12.         <li>2.西瓜，10，8，80</li>
  13.         <li>3.手机，1，5000，5000</li>
  14.     </ul>
  15.     <!-- 有序 -->
  16.     <ol>
  17.         <li>苹果，3斤，10，30</li>
  18.         <li>西瓜，10，8，80</li>
  19.         <li>手机，1，5000，5000</li>
  20.     </ol>
  21.     <!-- 自定义列表 -->
  22.     <dl>
  23.         <dt>第十期培训班</dt>
  24.         <dd>前端基础</dd>
  25.         <dd>PHP编程</dd>
  26.         <dd>laravel框架开发</dd>
  27.     </dl>
  28. </body>
  29. </html>

表格元素

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>表格</title>
  6. </head>
  7. <body>
  8.     <table border="" width="500" height="150" cellpadding="10" cellspacing="0"> 
  9.         <!-- 表格的名称 -->
  10.         <caption><h2>购物车</h2></caption>
  11.         <thead>
  12.             <tr bgcolor="#add8e6">
  13.                 <th>ID</th>
  14.                 <th>品名</th>
  15.                 <th>数量</th>
  16.                 <th>单价</th>
  17.                 <th>金额</th>
  18.             </tr>
  19.         </thead>
  20.         <tbody>
  21.             <tr>
  22.                 <td>1</td>
  23.                 <td>苹果</td>
  24.                 <td>3斤</td>
  25.                 <td>10</td>
  26.                 <td>30</td>
  27.             </tr>
  28.             <tr>
  29.                 <td>2</td>
  30.                 <td>西瓜</td>
  31.                 <td>10</td>
  32.                 <td>8</td>
  33.                 <td>80</td>
  34.             </tr>
  35.             <tr>
  36.                 <td>3</td>
  37.                 <td>手机</td>
  38.                 <td>1</td>
  39.                 <td>5000</td>
  40.                 <td>5000</td>
  41.             </tr>
  42.         </tbody>
  43.         <tfoot>
  44.             <tr>
  45.                 <td colspan="2" align="center">合计：</td>
  46.                 <td>14</td>
  47.                 <td></td>
  48.                 <td>5110</td>
  49.             </tr>
  50.         </tfoot>
  51.     </table>
  52. </body>
  53. </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地址 
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>iframe</title>
  6. </head>
  7. <body>
  8.     <iframe src="www.php.cn" frameborder="0" width="500" height="300"></iframe>
  9. </body>
  10. </html>
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：最后一个例子你测试过了吗? php.cn是做过特殊处理的, 不允许在内联框架中打开的, 找个网站吧, 比如: 小度小度
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！