登录  /  注册
博主信息
博文 4
粉丝 0
评论 0
访问量 3169
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
HTML 基础知识学习总结
亚瑟林
原创
579人浏览过

HTML 指的是超文本标记语言(Hypertext Markup Language),它定义了网页内容的含义和结构。

1. HTML 文档结构

HTML 文档就是我们所谓的网页,浏览器的作用便是读取 HTML 文档,然后以网页的形式将内容呈现出来。以下便是一个基本的 HTML文档结构。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Document</title>
  7. </head>
  8. <body>
  9. </body>
  10. </html>

1.1 DOCTYPE 元素

DOCTYPE 元素用来告诉浏览器,这是一个 HTML文档。

1.2 <html> 元素

<html> 元素是根元素,用来表示文档中 HTML 部分的开始。lang 属性指定页面内容的默认语言,此处 en 表示英语。

1.3 <head> 元素

head元素包含文档的元数据,向浏览器提供有关文档内容和标记的信息。
<meta charset="UTF-8">表示网页采取UTF-8编码;<title>Document</title>表示该 HTML 文档的标题为“Document”。
viewport 的概念可参考[https://www.cnblogs.com/gaogch/p/10628613.html]

1.4 <body> 元素

<body> 元素部分就是访问网页的用户可以在浏览器上看到的内容。

2. 元素与属性的关系

HTML 使用标记标签(Markup tag)来描述网页,HTML 标记标签简称为 HTML 标签(HTML tag),一般由开始标签(Opening tag)与结束标签(Closing tag)构成标签对,HTML 元素(Element)指的是从开始标签到结束标签的所有代码。
比如:<P> 是一个标签;
<p>文本<p/>则是一个元素;
HTML文档 由元素组成,而每个元素都可以被多个属性(Attribute)修饰,属性为 HTML 元素提供各种附加信息,它总以“属性名=属性值”这种名值对的形式出现,而且属性总是在 HTML的开始标签中进行定义。
比如:

  1. <body>
  2. <h2>我是一段平平无奇的文本</h2>
  3. </body>

效果为:

为<body> 元素赋予背景颜色属性,属性值为红色之后:

  1. <body bgcolor="red">
  2. <h2>我是一段平平无奇的文本</h2>
  3. </body>

效果变成了:

3. 语义化的结构元素

HTML 语义话是指在进行 HTML 文档代码的编写时,对所要呈现的内容使用准确的标签,简而言之,就是不仅有利于开发者理解网页的,也方便机器识别文档的布局结构。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title></title>
  5. </head>
  6. <body>
  7. <header>
  8. <!-- <header> 标签定义文档的页眉(介绍信息)-->
  9. </header>
  10. <main>
  11. <!-- <main> 标签规定文档的主要内容。 -->
  12. <nav>
  13. <!--<nav> 标签定义导航链接,可将有导航性质的链接归在一个区域,使页面元素语义更加明确-->
  14. </nav>
  15. </main>
  16. <footer>
  17. <!-- <footer> 标签定义文档或节的页脚。 -->
  18. </footer>
  19. </body>
  20. </html>

4. 语义化的文本元素

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>语义化的文本元素</title>
  5. </head>
  6. <body>
  7. <nav>
  8. <!--<nav> 标签定义导航链接,可将有导航性质的链接归在一个区域,使页面元素语义更加明确-->
  9. </nav>
  10. <article>
  11. <!-- <article>表示页面中的一块与上下文不相关的独立内容,
  12. 它可以是一篇文章、论坛帖子或是用户评论 -->
  13. </article>
  14. <aside>
  15. <!-- aside用于定义当前页面或文章的附属信息,比如侧面栏等 -->
  16. 我是侧边栏
  17. </aside>
  18. <mark>
  19. <!-- mark可以在文本中高亮显示某些字符-->
  20. 高亮我
  21. </mark>
  22. <!-- 告诉浏览器,该文本是一个地址信息 -->
  23. <address>地址</address>
  24. </body>
  25. </html>

5. 链接元素

我们通过使用<a>标签在 HTML 文档中创建链接。链接元素可以实现网页间的跳转、站内跳转、下载文件、拨打电话、发送邮件等功能。

  1. <!--链接元素中,href属性来描述链接的地址-->
  2. <a href="www.baidu.com">百度一下,你就知道</a>
  3. <!-- 可以设置属性,使得链接可在新标签页中打开 -->
  4. <a href="www.baidu.com" target="_blank">百度一下,你就知道</a>
  5. <!-- 链接元素可用来发送邮件 -->
  6. <a href="mailto:someone@163.com" >发送邮件</a>
  7. <!-- 链接元素可以实现下载文档的功能 -->
  8. <a href="test.html download="test.html">点此下载</a>
  9. <!-- 链接元素还可以调出关联的应用程序拨打电话 -->
  10. <a href="tel:18612349876">致电</a>
  11. <!-- 网页内的跳转可以运用链接元素实现 -->
  12. <a href="#anchor">点击跳转</a>
  13. <p id="anchor" style="margin-top: 800px">没错,跳到这儿来了</p>
  14. <!-- 回到顶部 -->
  15. <a href="#">回到顶部</a>

6. 列表元素

HTML 列表分为无序列表、有序列表以及自定义列表。

无序列表

  1. <!-- 无序列表 -->
  2. <ul>
  3. <li>中超</li>
  4. <li>英超</li>
  5. <li>西甲</li>
  6. <li>德甲</li>
  7. <li>意甲</li>
  8. </ul>
  9. <!-- 改变无序列表项目符号 -->
  10. <ul type="circle">
  11. <li>中超</li>
  12. <li>英超</li>
  13. <li>西甲</li>
  14. <li>德甲</li>
  15. <li>意甲</li>
  16. </ul>
  17. <!-- 改变无序列表项目符号 -->
  18. <ul type="square">
  19. <li>中超</li>
  20. <li>英超</li>
  21. <li>西甲</li>
  22. <li>德甲</li>
  23. <li>意甲</li>
  24. </ul>

效果如下:

有序列表

  1. <!-- 有序列表 -->
  2. <ol>
  3. <li>梅西</li>
  4. <li>C罗</li>
  5. <li>内马尔</li>
  6. <li>姆巴佩</li>
  7. <li>萨拉赫</li>
  8. </ol>
  9. <!-- 改变有序列表项目符号 -->
  10. <ol type="A">
  11. <li>梅西</li>
  12. <li>C罗</li>
  13. <li>内马尔</li>
  14. <li>姆巴佩</li>
  15. <li>萨拉赫</li>
  16. </ol>
  17. <!-- 再次改变有序列表项目符号 -->
  18. <ol type="I">
  19. <li>梅西</li>
  20. <li>C罗</li>
  21. <li>内马尔</li>
  22. <li>姆巴佩</li>
  23. <li>萨拉赫</li>
  24. </ol>
  25. <!-- 再次改变有序列表项目符号 -->
  26. <ol type="i">
  27. <li>梅西</li>
  28. <li>C罗</li>
  29. <li>内马尔</li>
  30. <li>姆巴佩</li>
  31. <li>萨拉赫</li>
  32. </ol>

效果如下:

定义列表

  1. <dl>
  2. <dt>早餐</dt>
  3. <dd>牛奶</dd>
  4. <dd>面包</dd>
  5. <dd>鸡蛋</dd>
  6. <dt>午餐</dt>
  7. <dd>米饭</dd>
  8. <dd>番茄炒鸡蛋</dd>
  9. <dd>白斩鸡</dd>
  10. <dt>晚餐</dt>
  11. <dd>面条</dd>
  12. <dd>牛肉</dd>
  13. </dl>

效果如下:

批改老师:天蓬老师天蓬老师

批改状态:合格

老师批语:还可以
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学