前端入门——HTML | 青训营笔记

159 阅读2分钟
这是我参与「第五届青训营 」伴学笔记创作活动的第 1 天

前端入门基础语言——HTML(HyperText Markup Language)

前端,解决GUI人机交互问题。HTML负责网页的内容,CSS负责样式,JavaScript负责行为,由这三个共同组成前端。

html是一种标签语言,分为单标签和双标签,双标签使用的更多,可以用VScode来编辑。

html的模板入下:

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>


</body>

</html>

!DOCTYPE html:表示网页用来显示网页的版本是html5(最新版本)。
html lang="zh-CN":表示使用的语言是简体中文。
meta charset="UTF-8":表示的是使用的字符编码。

标签类型

1.标题标签

标题标签为块级标签,一个标签独占一行
<h1>一级标签<h1>
<h2>二级标签<h2>
<h3>三级标签<h3>
<h4>四级标签<h4>
<h5>五级标签<h5>
<h5>六级标签<h6>

image.png

2. 段落和换行标签

    段落标签<p><p>,换行标签<br /><br>
    段落标签是块级双标签,用来显示文本。
    
    换行标签是单标签,遇到就要换行。

3.div 和 span标签

    这两个标签都是双标签,没有语义,是用来装内容的盒子。
    div标签是块级标签,应用较多。
    span标签是行级标签

4.img标签

    单标签,用来插入图片。
    <img src="图片的地址" alt="替换文本" title="提示文本"> 
    对应格式:属性="属性值"

5.超链接标签

    双标签
    <a href="跳转的地方(必须属性)" target="新窗口打开的方式">文本/图像<a>
    target="_self" 当前窗口打开(默认打开方式)
    target="_blank" 新窗口打开

6.表格标签

    <table>
        <tr>
            <th>表头部分1</th>
            <th>表头部分2</th>
            <th>表头部分3</th>
        </tr>
        <tr>
            <td>内容1</td>
            <td>内容2</td>
            <td>内容3</td>
        <tr>
    </table>
   tr   :表示表格的一行
   th/td:表示tr行中的单元格,其中th表示表头部分

image.png
表格的样式后续通过CSS来调节。

7.列表标签

    <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>解释1</dd>
         <dd>解释2</dd>
     </dl>
        

image.png

image.png