笔记一、初识前端-HTML | 青训营

Zer0day
107 阅读5分钟

一、前端三种语言的基本功能

前端三种语言包括HTML JavaScript CSS,这三种语言相互结合协调运作，构建成网页的基本组成部分。

1.HTML（Hyper Text Markup Language），称为超文本标记语言，是一种标记语言，它包括一系列标签，通过这些标签将网络上的文档格式统一，使得分散的Internet资源连接成一个有逻辑的整体，HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。

2.CSS（Cascading Style Sheets），所谓CSS是一门样式表语言，人们可以选择性的为HTML元素添加样式。

3.JavaScript，是一种编程语言，能够为网站提供动态交互功能，能够对游戏、动态样式、动画以及在按下按钮或收到按钮表单数据时做出的响应等等。

HTML、CSS和JavaScript三者之间的关系可以具体描述为如下图：

5c733a9ddbcef95f23019444e8ddbb9.png

HTML为人体的骨骼，CSS为人体的外表，JavaScript则是人体的肌肉，为人体活动提供力量。知道了这三种语言之间的关系以后，接下来具体讲讲什么是HTML。

二、认识HTML

上面已经解释了HTML不是一门编程语言，而是用来定义内容结构的标志语言，具体来了解这个段落元素，可以展示为以下结构：

1690435707205.png

其中包括起始标签和结束标签，在起始标签和结束标签里面的成为内容，元素=起始标签+内容+结束标签。

属性

元素也可以拥有属性，如下：

1690435859230.png

上述图中的Attribute称之为属性，这些属性包含了一些元素额外的信息，这些信息本不应该显示在内容中，其中class是属性名，editor-note是属性的值。

一个属性应该包含：

  • 属性与元素名称之间有一个空格符
  • 属性的名称接上一个等号
  • 由引号所包围的属性值

嵌套

还可以将一个元素嵌套在另一个元素中使用：

`<p>My cat is <strong>very</strong> grumpy.</p>`

实现的效果如下图，采用<strong></strong>标签加强了very黑体。

image.png

在使用嵌套语句时，必须清楚哪个标签最先使用，则该标签最后结束，例如<p></p>标签最早使用，则该标签最后结束。

空元素

不包含任何内容的元素称为空元素，比如<img>

<img src="images/firefox-icon.png" alt="My test image" />

本元素包含了两个属性但是并没有结束标签</img>,src属性指定图像文件路径，alt属性则修饰图片的内容。

HTML文档详解

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>My test page</title>
  </head>
  <body>
    <img src="images/firefox-icon.png" alt="My test image" />
  </body>
</html>
  • <!doctype html>--文档类型，用于网页保证正常读取HTML文档。
  • <html></html>--<html>元素，该元素包含整个页面内容,也是根元素。
  • <head></head>--该元素的内容对用户不可见，其中包含搜索引擎的搜索关键字以及页面描述，CSS样式表。
  • <meta charset="utf-8" />--该元素指定文档使用UTF-8字符编码。
  • <title></title>--<tittle>元素，该元素设置页面的标题，显示在浏览器标签页上，也作为收藏网页的描述文字。
  • <body></body> — <body> 元素。该元素包含期望让用户在访问页面时看到的内容，包括文本、图像、视频、游戏、可播放的音轨或其他内容。

标记文本

标题

标题元素可用于指定内容的标题和子标题。HTML包括六个级别的标题。

<h1>主标题</h1>
<h2>顶层标题</h2>
<h3>子标题</h3>
<h4>次子标题</h4>
<h5>次次子标题</h5>
<h6>次次次子标题</h6>

可以尝试在 <img>元素上面添加一个合适的标题。

段落

<p> 元素是用来指定段落的。

<p>这是一个段落</p>
列表
  1. 有序列表（Ordered List）中项目顺序很重要，用<ol></ol>元素包围。
  2. 无需列表（Unordered List）中项目的顺序不重要，用<ul></ul>元素包围。
  3. 列表的每一个项目用列表项目元素（Lits Item）<li></li>包围。
<ul>
    <li>基础班级</li>
    <li>测试</li>
    <li>python</li>
</ul>
<br> 
<ol>
    <li>基础班级</li>
    <li>测试</li>
    <li>python</li>
</ol>

下图为有序和无序的直观表述：

1690438869481.png

链接

通过链接将他们赋予Web网络属性，植入一个链接，我们需要一个简单的标签<a>将文本包含在<a>元素内：

    <a>跳转至B站</a>

给元素<a>添加一个href属性，就像这样：

<a href="">跳转至B站</a>

把属性值设置为所需要跳转的网址，如下：

<a href="https://www.bilibili.com/">跳转至B站</a>

实现结果如下： www.bilibili.com/

若需要新打开一个网页，即可以新增一个target属性，并且属性值设置为_blank：

<a href="https://www.bilibili.com/" target="_blank">跳转至B站</a>
输入

使用<input>元素来输入,可以将输入类型和属性相结合，工作方式取决于type属性值，一般默认属性值为text，例如输入用户名和密码：

input type="text" placeholder="请输入用户名">
<br>
<span>密码：</span> &nbsp;&nbsp;&nbsp;
<input type="password" placeholder="请输入密码">

placeholder属性，当没有值设定时出现在表单上的文字，实现如下：

1690440490297.png

当属性值为CheckBox复选框时，可以利用<label>和<input>元素关联,需要给<input>标签一个id属性，而标签则需要一个for属性，且id属性和for属性的值相同才能关联，如：

<input type="checkbox" id="sleep"> 
<label for="sleep">唱</label>

也可以将 <input> 直接放在 <label> 里，此时则不需要 for 和 id 属性，因为关联已隐含存在，如下：

 <label>Do you like peas?
  <input type="checkbox" name="peas">
</label>

具体的<input>标签使用以及属性种类和type标签对应的属性值可以参考学习如下网站： developer.mozilla.org/

三、学习总结

1.这两节课下来还是学习到了很多东西，比如从最开始不了解前段具体是什么，现如今还是有一些的了解。

2.在学习的过程中，了解到了HTML具体的工作方式以及一些标签的作用，以及在网页设计的过程中HTML的作用。

3.一开始听第一节课的时候还是很懵，有点不太理解在讲什么，在听第二节课的时候感觉好了很多，感觉自己真正的学到了东西，比如第对HTML有了一个更好的理解，以及不同的标签有什么具体的作用。

4.接下来继续努力，争取认真听好每一节课，把每一堂课的笔记做好，认认真真对待这件事情，让自己真正学习到了东西。

avatar
文章
阅读
粉丝