[ 前端与 HTML基础知识 | 青训营笔记]

128 阅读2分钟

在我看来,学习前端首先要了解并学习一下前端"三剑客",前端"三剑客"包括:HTML,CSS,JAVAScript。今天我先来介绍一下我是如何学习HTML及相关知识点。 HTML(Hyper Text Markup Language--超文本标记语言)

html概述

HTML是 HyperText Mark-up Language 的首字母简写,意思是超文本标记语言,超文本指的是超链接,标记指的是标签,是一种用来制作网页的语言,这种语言由一个个的标签组成,用这种语言制作的文件保存的是一个文本文件,文件的扩展名为html或者htm,一个html文件就是一个网页,html文件用编辑器打开显示的是文本,可以用文本的方式编辑它,如果用浏览器打开,浏览器会按照标签描述内容将文件渲染成网页,显示的网页可以从一个网页链接跳转到另外一个网页。

如何学习:

我是通过在b站观看相关视频,然后按照学习进度敲代码巩固学习。 接下来就是我学习到的知识点总结。

知识点

我的第一个HTML代码
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    hello world!
</body>
</html>
注释:

HTML的标签是和其他语言的注释不一样的,要使用标签来进行注释。其格式为<!-注释内容-->,另外需要注意的是这个注释是不可以嵌套使用的。

标题

有六种标题,从h1-h6字体会逐渐变小。

段落

<p> 段落</p>

格式化标签

<strong>加粗</strong>
<b>加粗</b>
<em>倾斜</em>
<i>倾斜</i>
<del>删除线</del>
<s>删除线</s>
<ins>下划线</ins>
<u>下划线</u>

图片标签

图片标签img是一个单标签,在img里面可以写很多属性,例如src描述图片具体的位置,这个路径可以是绝对路径也可以是相对路径,alt表示如果图片不能显示就会显示这个提示信息,title表示这张图片的标题,当光标滑到图片上就会提示, width宽height高,这可以设置图片的尺寸。

超链接标签:

a标签,href 表示一个正确的地址,a标签是行内元素

列表标签:

<h3>无序列表</h3>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <h3>有序列表</h3>
 
    <ol>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ol>
    <h3>自定义列表</h3>
    <dl>
        <dt>自定义标题</dt>
        <dd>1</dd>
        <dd>2</dd>
        <dd>3</dd>
    </dl>

表格标签:

table表示整个表格,tr表示一行,td表示一列,th表示表头中的一列.

表单标签:

input是这里面最常使用的,type表示要输入的框架类型,包括文本框:text、密码框:password、单选框:radio、复选框:checkbox、按钮:button、选择文件:file等

HTML基本的知识点大致有这些,仅代表个人的学习顺序,如有错误,欢迎指正,谢谢!!!