HTML5 快速入门（2）

最新推荐文章于 2024-06-17 22:13:35 发布

木子聊前端

最新推荐文章于 2024-06-17 22:13:35 发布

阅读量442

点赞数 3

分类专栏： HTML5实用文章标签： javascript html html5

本文链接：https://blog.csdn.net/qq_35617751/article/details/106239710

版权

HTML5实用专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文是HTML5快速入门的第二部分，主要介绍HTML5中用于构建网页主体结构的元素，如article、section、nav、div和img等。通过学习，你可以理解这些元素的用途和区别，以及如何在网页中合理使用它们来组织内容。

摘要由CSDN通过智能技术生成

HTML5 快速入门（2）

先把上一篇的html代码结构拿过来，因为我们已经完成了整体的结构，并且完善了head部分，这篇文章就是完善body里面的内容，看完这一篇html5 整体就结束了。恭喜各位看到这里！！！

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>木子聊前端</title>
  <meta name="description" content="提供0到1到基础前端学习，实战层层深入,有问题咨询v:chinaynlmq-a">
  <meta name="keywords" content="前端,javascript,html5">
 </head>
 <body>
  <!-- --->
 </body> 
</html>

下面重点来看body里面，以下的内容都是放在body里面，在实验的时候自行加上整个文档内容。先从大块大块的地方开始。
一个网页的展示和world的展示差不多，整体结构有头部，内容展示，加粗，列表，图片，页脚，底部，排版，字体，表格。。。

主体结构元素

内容区块：

说的是按照HTML逻辑分割后的单位，对于书籍来说，章、节等的内容都可以说是内容区块，对我们常见的博客网站来说，导航菜单，博客内容，博客品论，右边的广告等每一个部分都被称只为内容区块

article 标签

artice 代表文档、页面中独立的部分，可以单独使用，比如一篇博客或者一份报刊的正文，一个论坛帖子，一段用户评论或者其他独立的部分，都可以使用这个标签；

因此article 一般标准包含自己的标题，内容，页脚：

<body>
     <article>
        <header>木子聊前端</header>
        <p>从0到1解析前端到整个开发过程，去繁就简，减少学习成本</p>
        <footer>关注我或者加V:chinaynlmq</footer>
     </article>
  </body>

在浏览器打开开一下，这也是一个有头有尾的文章了，缩减版本的。article 展示了独立性、完整性
了解一下新加入的标签

header 标签一般放在文章或者内容区块的头部位置，放标题，清晰明了。不一定要放在article里面也可以放在外面
p 标签定义段落。段落整个词很熟悉了把。p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定。
footer 放在最末表示文章注脚

section 标签

section 通常对网站或者某个应用程序的整体内容分块，一般有内容和标题组成。

<section>
  <h1>html5 入门第二篇之 section</h1>
  <p>section 一般包含标题和内容</p>
</section>

新加入的标签：

h1 是标题的意思，总共有 h1,h2,h3,h4,h5,h6 一组，大标题到小标题字体大小不一样

section 作用是在页面中分块或者在文章中分段，需要和article的‘有着独立性、完整性’区分：
分别举例说明分块和分段与article的区别

<article>
  <header>html5 入门</header>
  <p>html5 从零到会到基础认知</p>
  <section>
    <h1>html5 入门第一篇 html基础认知和基本结构</h1>
    <p>完善head 到头部内容</p>
  </section>
  <section>
    <h1>html5 入门第二篇 html 到body元素和常用标签到使用</h1>
    <p>完善body 到内容到完整到一个网站页面布局</p>
  </section>
</article>

解析一下：首先是一个完整的独立的我们用article 标签，接着这部分内容🈶️包含两部分因此用 section，section一定要有标题和内容
记住几点：

不要讲section设置样式，整个是div 做的事情
能用其他标签不如p或者article 就不用section
section一定要有标题

nav 标签

标签定义导航链接的部分。

<nav>
  <a href="/index.html">首页</a>
  <a href="http://www.baidu.com">百度</a>
</nav>

可以放入需要加入导航的地方，一个网页有许多地方需要加入导航，如图都可以用nav：
在这里插入图片描述
新增加的标签

a 标签定义超链接，用于从一张页面链接到另一张页面，通过属性 href ，通过它指示链接的目标

div 标签

可定义文档中的分区或节，标签可以把文档分割为独立的、不同的部分，是一个块级元素。整个html标签，你可以什么都记不住只要记住div 和span就可以完成所有页面只需要加上样式表，整个后面专题讲解：

<div>
  <h1>div 是一个块元素</h1>
  <p>我们好好好学习，天天向上<span> span 标签被用来组合文档中的行内元素。</span></p>
</div>

可见div 可以实现上面的各种标签，那为什么还有学习上面的article，header呢，是不是多余，并不是，都是div ，我们没法区分整个div干啥，那个div干啥，header ，footer这些类似的标签更加人性话，一目了然。让开发更加舒服愉快

新增加的标签

span 没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。是一个行内的元素

img 标签

img 元素向网页中嵌入一幅图像。两个必需的属性：src 属性和 alt 属性。

<body>
<div>
 <p><img src="images/dog.png" alt="本地图片" width="300px" height="300px"></p> 
 <p><img src="https://img1.doubanio.com/view/dale-online/dale_ad/public/cd812f3668463bb.jpg" width="300px" height="200px" alt="豆瓣图片">
</div></p> 
</body>

img标签比较殊看一下结果：
在这里插入图片描述
img 标签里面的src 我们称之为属性，后面根的是存放图片路径的地址，例子中，一个是本地的路径一个是远程路径，可以是相对路径或者绝对路径只要能找到这张图片就好。但是在项目我我们一般用相对路径 alt 属性上写的文章是对图片的描述
width 属性是的是想在网页上展示图片的宽度
height 属性是的是想在网页上展示图片的高度度

到这里 html布局结构常用的我们已经学完了。这些足够面对复杂多变的网页布局结构了。看一个完整的例子做个小结：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>网页排版示例--木子聊前端</title></title>
    <meta name="description" content="提供0到1到基础前端学习，实战层层深入,有问题咨询v:chinaynlmq">
    <meta name="keywords" content="前端,javascript,html5">
  </head>
  <body>
    <!--这是头部标题部分 -->
    <header>
      <h1>木子聊前端</h1>
      <!-- 导航列表-->
      <nav>
        <a href="#">首页</a>
        <a href="#">文章列表</a>
      </nav>
    </header>
    <!--内容部分 -->
     <article>
        <header>木子聊前端</header>
        <p>从0到1解析前端到整个开发过程，去繁就简，减少学习成本</p>
        <section>
           <article>
             <h2>评论标题</h2>
             <p>评论内容</p>
           </article>
        </section>
     </article>
     <!-- 底部版权 信息-->
     <footer>
       <span>版权木子聊前端所有：关注我或者加V:chinaynlmq</span>
     </footer>
  </body> 
</html>

复制代码保存为html结尾大文件，有浏览器打开就行，小结之后并没有完还有大结，如上大例子：评论区大内容是需要输入大不是写死大，生活还要继续，代码还没完，那些需要输入大，选择的，称之为form表单元素

form 表单

html是web项目的基础，因此不但要承担展示内容还有提供输入的地方；有输入和输出构成整个体系；
围绕常用的输入展开：

input 标签

因input标签存在不同的类型展示不一样的风格先看代码：

 <p><input type="text" placeholder="输入用户名称" autofocus maxlength="6" /></p>
  <p><input type="email" placeholder="输入邮件地址"/></p>
  <p><input type="number" placeholder="电话号码" /></p>
  <p><input type="file" value="上传文件"/></p>
  <p><button>提交按钮</button></p>

运行结果：
在这里插入图片描述
input 标签没有结束标签提供用户输入不同的数据如例子代码。
input 属性 type

type=‘text’ 说明可以输入任何字符，汉子，特殊富豪！@#等
type=‘email’ 输入邮箱地址，当然你强制输入其他的也行，但是不建议
type=‘numer’ 期待输入数字
type =‘file’ 不用输入，用来上传文件、图片或者文件，点击就可以打开本地文件

input 其他属性
5. autofocus 打开页面自动获取光标
6. maxlength 限制最多可以输入位数，比如6位数多余的则不显示
7. placeholder 占位符就是默认显示的占一个位置，不是真实存在的，提交数据不会提交。当你输入内容的时候自动消失

Botton 标签

是一个普通的按钮，可以用来制作提交按钮，发布按钮等等

textarea 标签

当我们需要输入一大段内容的时候需要用到textarea标签，input已经不能满足：

<article>
	<h2>输入评论标题 <input type="text" placeholder="输入评论标题"/></h2>
	<p>评论内容</p>
	<p><textarea placeholder="评论内容" cols="20" rows="3"></textarea></p>
	<p><button>提交评论</button></p>
</article>

其中

cols 表示规定文本区内的可见宽度。就是列数
rows 表示规定文本区内的可见行数。可以理解为高度

👏👏，到此html5就全部完结了。来吧看一下完整示例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>网页排版示例--木子聊前端</title></title>
    <meta name="description" content="提供0到1到基础前端学习，实战层层深入,有问题咨询v:chinaynlmq">
    <meta name="keywords" content="前端,javascript,html5">
  </head>
  <body>
    <!--这是头部标题部分 -->
    <header>
      <h1>木子聊前端</h1>
      <!-- 导航列表-->
      <nav>
        <a href="#">首页</a>
        <a href="#">文章列表</a>
      </nav>
    </header>
    <!--内容部分 -->
     <article>
        <header>木子聊前端</header>
        <p>从0到1解析前端到整个开发过程，去繁就简，减少学习成本</p>
        <section>
           <article>
             <h2>输入评论标题 <input type="text" placeholder="输入评论标题"/></h2>
             <p>评论内容</p>
             <p><textarea placeholder="评论内容" cols="20" rows="3"></textarea></p>
           </article>
        </section>
     </article>
     <!-- 底部版权 信息-->
     <footer>
       <span>版权木子聊前端所有：关注我或者加V:chinaynlmq</span>
     </footer>
  </body> 
</html>

HTML5结业
什么？？好多神奇到html5功能都没介绍就完了。就骗人，比如画板，离线存储，本地存储、多媒体等都没有概述。
别慌这些现在说意义不大HMTL5提供这些功能，需要强大等JavaScript做支撑，后续在深入写。先学js。
html5入门之后干啥嗯。发现我们等网页是不是很丑。没关系，接着css3上场，可以让html5穿上华丽等外衣；
如果你喜欢此类文章欢迎关注我或者加V：chinaynlmq ,一起学习！
这篇文章写了两天好累，只想用最简单最常用等写，可是还是列举了不少。大家一起加油！