前端-HTML基础 | 青训营笔记

花开人生123
124 阅读3分钟

这是我参与「第四届青训营 」笔记创作活动的的第1天，此篇笔记为HTML基础知识总结

一、HTML简介

有过前端开发基础的都知道，前端开发分为HTML,CSS,JavaScript三大部分组成，其中HTML就是整个前端的内容结构所在。

1.png

HTML又叫做超文本标记语言，是一种标记语言，其中包括了一系列的标签，通过这些标签我们可以将一些分散的资源，例如：图片，文本，表格等组合在一起。

image.png

二、简单的HTML页面

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>hello</title>
  </head>
  <body>
   <p>大家好呀，这是一个基本的HTML页面</p>
  </body>
</html>

以上代码就是一个最基础的HTML页面的内容，我们可以看到它是由一个一个由<>包含的标签所组成的。在这串HTML代码里我们可以明显看到< DOCTYPE >、< html >、< head >、< body >这四个最基础的标签。

  • DOCTYPE的作用为告诉浏览器这是一个HTML5页面。
  • <html></html> 则是页面的容器，限定了页面的开始点和结束点，即所有的html代码必须写入<html>标签内。
  • <head></head> 是网页的头部，它包含了一些声明以及网页的标题等内容。
  • <body></body> 是网页的主题，我们所要展示给用户的内容都包含在这里面。
那么这个页面在浏览器中的显示效果就是这样：

image.png

三、HTML的基本标签

我们都知道HTML是有一个个标签组成的，现在我就来列举一些常用的HTML标签并说明他们的用法

1、标题标签

HTML中的标题标签分别为<h1>~<h6>,是HTML中对文本标题进行着重强调的标签，从1到6依次代表重要性递减，其中<h1>为最大的标签，在一个HTML页面中为了表示重要性，最好只存在一个。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>hello</title>
  </head>
  <body>
   <h1>一级标题</h1>
   <h2>二级标题</h2>
   <h3>三级标题</h3>
   <h4>四级标题</h4>
   <h5>五级标题</h5>
   <h6>六级标题</h6>
  </body>
</html>

image.png

2、p标签

P标签标记一个段落，通常使用在添加文字的情况

<p>这是一个小段落</p>

3、链接标签

<a> 标签的作用为定义超链接，从一个页面跳转到另一个页面。

<a href="https://juejin.cn/" target="_blank">掘金首页</a>

image.png

在上面的代码中，我们给a标签设置了两个常见的属性href和target。其中href表示的是链接指向的页面地址。target则是规定在何处打开新页面，默认不设置target属性时，新页面会覆盖旧页面，target="_blank"则使新页面新建窗口打开。

4、图片，音视频标签

<img>图片标签，在页面显示图片时使用，常用属性为alt显示图像文本和src指定图像地址。

<img src="1.jpeg" alt="派大星">

image.png

<audio>音频标签，可以在页面中插入音频，常用属性为src指定音频地址、autoplay自动播放、controls显示播放按钮等。

<audio src="1.mp3" controls autoplay></audio>

image.png

<video>视频链接，用于在页面中显示视频文件，常见属性和音频文件大致相同。

<video src="1.mp4"></video>

5、表单标签

HTML中的表单分为无序列表ul、有序列表ol、定义列表dl，其中列表项目标签为li

    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <ol>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ol>
     <dl>
        <dt>结构</dt>
        <dd>说明</dd>
    </dl>

image.png

6、输入标签

input为html中的输入标签，可以用于搜集用户信息等行为，我们可以设置不同的type值来改变输入的形式，可以是文本，复选框，单选按钮等

    <!-- 进度条 -->
    <input type="range"><br>
    <!-- 文本框 -->
    <input type="text"><br>
    <!-- 日期 -->
    <input type="date"><br>
    <!-- 复选框 -->
    <label><input type="checkbox">一号</label>
    <label><input type="checkbox"  checked>二号</label><br>
    <!-- 单选框 -->
    <label><input type="radio">一号</label>
    <label><input type="radio"  checked>二号</label><br>
    <!-- 提示值输入 -->
    <input list="countries"/>
    <datalist id="countries">
        <option>Greece</option>
        <option>United Kingdom</option>
        <option>United States</option>
    </datalist>

image.png

四、页面结构

image.png

header标签定义页面的头部信息，nav通常用作网页的导航栏。
main标签表示页面的主题内容，通常一个页面中只应存在一个main标签
article标签主要是在main中相关文章内容，例如新闻主题，博客文章等。
aside标签表示与页面的主体相关但又不属于主体的内容.例如广告，热点，影视网站的相关推荐等。
footer标签放在页尾，通常包含作者，版权信息，使用条款链接，联系信息等。

五、总结

本次课程初步了解HTML的基本内容，可以说是对于前端开发的基础入门，收益很大，也仍需努力，加油吧。

avatar
文章
阅读
粉丝