Community Learn Tools Library Leisure
search
English
Home > List of blog posts > HTML文档简介
Blogger Information
Blog 1
fans 0
comment 0
visits 753
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文档简介
Reptile
Original
753 people have browsed it

html5基础知识

1.html 文档结构

  • HTML文档结构：文档声明、标记(html)、头部（head）和主体（body）四部分构成。
  • 一个标准的HTML文档结构如下：
  1. <!-- <!DOCTYPE html>告诉浏览器这是一个使用哪个版本的html编写的文档 -->
  2. <!DOCTYPE html>
  3. <!-- <html>...<html/>是一对根元素标签，它包含了整个html文档 -->
  4. <!-- lang="en"，语言属性，表示当前文档结构的编写语言使用英语“en”编写-->
  5. <html lang="en">
  6. <!-- <head>...<head/> 是一对头部元素标签，它的内容不在网页中显示，里面的内容是给浏览器和搜索引擎使用的-->
  7. <!-- 在头部元素中，常用的标签有元标签<meta>,标题标签<title>，链接标签<link>,样式标签<style>等，这些 标签的内容不在网页主题窗口中显示，但影响网页的显示效果 -->
  8. <head>
  9.     <!-- charset="UTF-8" 字符编码集属性，告诉浏览器当前文档编码使用的字符集是'UTF-8'-->
  10.     <meta charset="UTF-8">
  11.     <!-- name属性规定 content 属性的信息/值的名称，这个名称实际上就是存放content属性的信息/值的变量。>    -->
  12.     <meta name="keywords" content="html,markup,tag,web">
  13.     <!-- 如果设置了 http-equiv 属性，则不应该设置 name 属性。http-equiv 属性表示把 content 属性关联到 HTTP 头部。以下 表示页面每300秒自动刷新一次。 -->
  14.     <meta http-equiv="refresh" content="300">
  15.     <!-- <title>...</title>标签定义文档的标题，显示在浏览器的工具栏中或显示在搜索引擎结果中的页面标题 -->
  16.     <title>HTML 文档结构</title>
  17. </head>
  18. <!-- <body>...</body>主体元素，该元素中的内容在浏览器的窗口中，是用户看到的内容 -->
  19. <body>
  20. <!-- HTML文档编写不进行大小写区分，但主流将标签统一小写</h1> -->
  21. <h1>HTML 文档结构要素</h1>
  22. <p>HTML文档结构：文档声明、标记(html)、头部（head）和主体（body）四部分构成。</p>
  23. </body>
  24. </html>

代码运行效果图
20200805001

2.元素与属性的关系

  • html 文档由各种类型的 html 元素组成,例如文本, 表格，图片等。不同类型的信息，使用不同的元素进行描述，例如文本元素， 表格元素，图像元素等。而不同的元素则是通过它的属性来描述其特征的。如<p style="color:red">, 是文本元素，描述文档中的段落, style是样式属性，属性值是一个表示颜色是红色的键值对，描述了当前文本字体颜色是红色。
  • html 元素也可叫作html标签, 可以分为双标签和单标签二类： (1)双标签由起始标签与结束标签组成,内容写在这二个标签之间,如<spand style="font-size : 10px">学习大纲</spand>,双标签中, 属性必须写到起始标签中。(2)单标签, 又叫空标签,或自闭合标签, 内容由标签中的某个属性设置,如<a href="...">
  • html 元素的样式特性可以分为块元素、行内元素和行内块元素三类，这三类元素的特性分别为：（1） 块元素(display: block): 独占一行, 垂直排列, 可设置宽高。例如：<header>、<footer>、<main>、<nav>、<div>、<h1~h6>，<p>、<table>、<from>、<ul>、<ol>、<li>等（2）行内元素(display: inline): 共享一行, 水平排列, 不可设置宽高，通常在一个块元素中显示。例如：<span>,<strong>,<em>..., <a>, <input>, <label>...（3）行内块元素(display: inline-block): 共享一行,水平排列,但是可设置宽高。例如：<img>, <iframe>, <video>, <audio>...。
  • html元素按照元素内容的可替换性，分为置换元素和非置换元素。（1）置换元素， 通常是当前 html 文档引用的服务器等外部资源, 如图片, 视频, 文档等, 通常用单标签描述(也有例外)，这类标签都包含一个资源地址属性（src,href）。例如<img src="...">、<link href="...">、 <script src=""></script>、<a href="..."</a>。（2）非置换元素, 内容直接写在 html 文档中的元素标签内, 如<p>php.cn</p>, 通常用双标签表示。
  • <div>是通用块元素：通用容器，该元素本身无任何意义，<span>是通用行内元素，行内元素通常不会直接暴露出来，应该放在一个块元素中。
  • 元素及其属性的书写格式是<element name="value1" name2="value2"></element>，其中element为元素的名称，属性可选且允许有多个属性，name是属性的名称，value是属性的值。几乎所有的元素都可以添加class, id, style三个属性,用来查找与设置元素样式。
  • 元素与属性代码演示如下:
  1. <!-- <div>通用块元素，通常作为其他元素的容器来使用，元素本身无任何意义 -->
  2. <div>
  3.     <h3 style="color:blue">块元素效果展示</h3>
  4.     <p>我是段落元素p，我独占一行。</p>
  5.     <ul>
  6.         <li>我是无序列表ul，我也独占一行。</li>
  7.     </ul>
  8.     <div style="width:220px;height:60px;border: 1px solid lightseagreen;border-radius: 5px"><span>我是div，我们块元素还可以设置块的宽高</span></div>
  9. </div>
  10. <hr />
  11. <!-- 行内元素：span、strong、em等 -->
  12. <h3 style="color:lightskyblue">行内元素效果展示</h3>
  13. <div>
  14.     <span>我们是行内元素，我们的特点是：</span>
  15.     <strong>水平排列，一行接着一行，一行不够长了，就自动换行显示</strong>
  16.     <em>看，如果不够长，你会看到接下来的内容都分行显示</em>
  17.     <a href="https://www.php.cn/">php.cn</a>
  18.     <input type="text" name="user" id="1" value="" placeholder="请填写真实姓名">
  19. </div>
  20. <hr />
  21. <!-- 行内块元素 -->
  22. <div>
  23.     <h3 style="color:lime">行内块元素效果展示</h3>
  24.     <img src="timg.jpg" alt="图片在浏览器中不能正常显示时在图片当前为了显示的提示信息" style="width: 25px;">
  25.     <img src="timg.jpg" alt="图片在浏览器中不能正常显示时在图片当前为了显示的提示信息" style="width: 50px;">
  26.     <img src="timg.jpg" alt="图片在浏览器中不能正常显示时在图片当前为了显示的提示信息" style="width: 100px;">
  27. </div>

代码运行效果图

3.语义化的结构元素

  • html5添加了许多语义化结构元素，与传统元素使用通用块元素<div>和属性id或class结合定义网页结构相比，语义化结构元素可以使得代码更加简洁和易读，例如：页面用<header>、主体用<main>、页脚用<footer>、导航用<nav>、侧边栏用<aside>等等。

传统元素的结构代码展示如下：

  1.  <!-- 页眉 -->
  2.     <div id="header">
  3.       <!-- 导航 -->
  4.       <ul>
  5.         <li><a href="">首页</a></li>
  6.         <li><a href="">公司简介</a></li>
  7.         <li><a href="">招贤纳士</a></li>
  8.         <li><a href="">产品展示</a></li>
  9.       </ul>
  10.     </div>
  12.     <!-- 主体 -->
  13.     <div id="main">
  14.       <div class="left">广告</div>
  15.       <div class="content">内容区</div>
  16.       <div class="right">推荐</div>
  17.     </div>
  19.     <!-- 页脚 -->
  20.     <div id="footer">
  21.       <!-- 导航 -->
  22.       <ul>
  23.         <li><a href="">baidu.com</a></li>
  24.         <li><a href="">taobao.com</a></li>
  25.       </ul>
  26.     </div>

语义化的结构元素代码展示如下：

  1. <!-- 页眉 -->
  2.     <header>
  3.       <!-- 导航 -->
  4.       <nav>
  5.         <a href="">首页</a><
  6.         <a href="">公司简介</a><
  7.         <a href="">招贤纳士</a><
  8.         <a href="">产品展示</a><
  9.       </nav>
  10.     </header>
  12.     <!-- 主体 -->
  13.     <main>
  14.       <section class="ads">广告</section>
  15.       <article class="content">内容区</article>
  16.       <section class="recommend">推荐</section>
  17.     </main>
  19.     <!-- 页脚 -->
  20.     <footer>
  21.       <!-- 导航 -->
  22.       <nav>
  23.         <a href="">baidu.com</a>
  24.         <a href="">taobao.com</a>
  25.       </nav>
  26.     </footer>

4.语义化的文本元素

  • 语义化的文本元素，顾名思义就是通过元素的字面意思，就能知道元素里面放置的内容是什么。
    代码展示如下：
  1. <!-- time：定义日期或时间 -->
  2.     <time>2020 / 07 / 25</time> <br /> 
  3.     <!-- sup:上标 -->
  4.     2<sup>4</sup> = 16
  5.     <!-- address:以斜体字显示地址 -->
  6.     <address>php中文网: 中国合肥政务新区</address>
  7.     <!-- del:在文字上添加删除线；strong：字体加粗 -->
  8.     西瓜: 原价 <del>5.98</del>, 现价: <strong>1.98</strong><br />
  9.     <!-- code：表示内容是计算机代码 -->
  10.     <code> const username = 'peter zhu';</code> <br />
  11.     <!-- progress： 表示任务进度条 -->
  12.     <progress value="80" max="100"></progress> <br />
  13.     <!-- button:表示这是一个按钮 -->
  14.     <button type="submit"">提交</button>

代码运行效果图

5.链接元素

  • 总结了链接元素<a>的几种使用方法:不同页面间的跳转、下载文件、打电话、发邮件和锚点。<a>元素最重要的属性是 href 属性，它指定链接的目标。在 HTML5 中，<a> 标签是超链接，但是假如没有 href 属性，它仅仅是超链接的一个占位符。<a>元素的几种使用方法代码展示如下：
  1. <!-- 经典用法: 在不同的页面中跳转，跨域 -->
  2.     <a href="https://www.php.cn" target="_blank">php中文网</a>
  3.     <!-- 下载文件 -->
  4.     <a href="0725.md" download="html.md">教学大纲</a>
  5.     <!-- 打电话 -->
  6.     <a href="tel:13894****90">服务热线</a>
  7.     <!-- 发邮件 -->
  8.     <a href="mailto:498668472@qq.com">发电邮</a>
  9.     <!-- 锚点: 在当前页面中跳转-->
  10.     <a href="#zhu">抓到朱老师</a> 
  11.     <h2 style="margin-top: 1000px;" id="zhu">朱老师</h2>
  12.     <button><a href="#">置顶</a></button>

6.列表元素

  • 介绍了三种列表元素：无序列表<ul>、有序列表<ol>、自定义列表<dl>。无序列表通常用于编写页面导航栏，自定义列表通常用于编写页脚。代码展示如下：

    1. <!-- 1.无序列表 -->
    2.   <!-- 导航 -->
    3.   <ul style="list-style: none;">
    4.     <li style="float: left;"><a href="">首页</a></li>
    5.     <li style="float: left;"><a href="">新闻</a></li>
    6.     <li style="float: left;"><a href="">联系</a></li>
    7.   </ul>
    8.   <br />
    10.   <!-- 2.有序列表 -->
    11.   <ol start="2">
    12.   <li>方案起草</li>
    13.   <li>资源组织</li>
    14.     <li>
    15.       实施
    16.       <ol>
    17.         <li>第一阶段</li>
    18.         <li>第二阶段</li>
    19.         <li>第三阶段</li>
    20.       </ol>
    21.     </li>
    22.   <li>验收</li>
    23.   </ol>
    25.   <!-- 3. 自定义列表 -->
    26.   <!-- 通常用来写页脚 -->
    27.     <dl>
    28.       <dt>地址:</dt>
    29.       <dd>中国合肥政务新区</dd>  
    30.       <dt>电话:</dt>
    31.       <dd>0551-8888888</dd>
    32.     </dl>
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：辛苦了,很认真
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