前端与HTML | 青训营笔记

XCZJust
135 阅读3分钟

前端与HTML | 青训营笔记

这是我参与 第四届青训营 笔记创作活动的的第1天

830535a5d8e9c23b7e1065e8dcf9b4bb4a83cc08726ff-BawI2Z_fw658.webp

什么是前端

  • 解决人机交互问题：
    对于一些非计算机专业或小白用户，你丢给他们一个纯代码程序肯定是会让用户不知从何下手。前端便是降低人机交互的门槛，给用户带来良好的用户体验。

  • 前端的技术栈： 要写网页，得先知道其工具。 前端使用的核心技术有三个：

    • HTML： HTML 是用来描述网页的一种语言。其是超文本标记语言(Hyper Text Markup Language)。它不是编程语言，而是标记语言，使用标记标签去构造网页。简单来说，html是构造网页的骨架。

    • CSS： CSS是描述HTML文档样式的语言。其描述该如何显示HTML元素。简单来说，css使html有了更加丰富的外观。

    • JavaScript： JavaScript是编程语言，作为网页开发的脚本语言，可以丰富人机交互的功能。

HTML初窥

下面是一个html的实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>文本格式化标签</title>
</head>
<body>
    <p>虽然显示都是加粗，但一个是加粗，一个是强调（视觉上和功能上的区别）<br/>
    <b>我是加粗字体</b><br/>
    <strong>我是起强调作用</strong></p>
    <i>我是倾斜字体</i><br/>
    <em>我是更倾斜字体</em><br/>
    <s>我是删除线</s><br/>
    <del>这位更是重量级</del><br/>
    <u>下划线</u><br/>
    <ins>自己看吧</ins><br/>
</body>
</html>

上一节说过，html不是编程语言，是标记语言，这里我们可以看出来，html语言是由一些用尖括号包围的关键词描述的，浏览器在显示网页时，并不会显示标签，而是把标签翻译成对应的东西，比如一个段落，一个表格，一个标题啥的。

下面详细介绍html中的常用标签，并且会贴上测试代码和运行结果，以便更好的学习：

标题标签

<!DOCTYPE html>
<html lang="en">
<head>
    <title>标题标签</title>
</head>
<body>
    <h1>I LOVE YOU</h1>
    <h2>I LOVE YOU</h2>
    <h3>I LOVE YOU</h3>
    <h4>I LOVE YOU</h4>
    <h5>I LOVE YOU</h5>
    <h6>I LOVE YOU</h6>
</body>
</html>

上面代码运行后会在浏览器的网页上显示1 ~ 6级不同大小的标题，如图：

1.png

列表标签

  • 有序列表
<!DOCTYPE html>
<html lang="en">
<head>
    <title>列表标签之有序列表</title>
</head>
<body>
    <ol>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>8</li>
        <!-- 会自动排序 -->
    </ol>
</body>
</html>

运行结果如下：

1.2.png

  • 无序列表
<!DOCTYPE html>
<html lang="en">
<head>
    <title>列表标签之无序列表</title>
</head>
<body>
    <ul>
        <li>A</li>
        <li>B</li>
        <li>C</li>
        <li>D</li>
        <!-- 以你写的顺序显示，不会自动排序 -->
    </ul>
</body>
</html>

运行结果如下：

1.3.png

  • 自定义列表
<!DOCTYPE html>
<html lang="en">
<head>
    <title>列表标签之自定义列表</title>
</head>
<body>
    <dl>
        <dt>A</dt>
        <dd>a</dd>
        <dd>s</dd>
        <dd>b</dd>
    </dl>
</body>
</html>

运行结果如下：

1.4.png

上面三个列表标签的主要区别在于列表前的标记不同。

链接标签

<!DOCTYPE html>
<html lang="en">
<head>
    <title>链接标签</title>
</head>
<body>
    <h4>外部链接</h4>
    <a href="http://www.baidu.com" target= "_blank">百度</a>
    <h4>内部链接</h4>
    <a href="标题标签.html" target= "_self">同级html文件</a>
    <h4>空链接</h4>
    <a href="#">空</a>
    <h4>下载链接</h4>
    <a href="../测试.zip">A</a>
    <h4>网页元素等链接</h4>
    <a href="图像标签.html"><img src="../测试.jpeg" title="点击跳转到图像标签页" height="500"></a>
</body>
</html>

运行结果如下：

1.5.png

链接标签储存的是链接，点击即可跳转，地址写在属性 href 中，title属性为修改链接的文本表示，当学到后面可修改链接的表示样式，比如变成红色啊，去掉下划线啊。。。

在链接标签中，target属性定义跳转新界面的位置，_blank 代表跳转的网页会在新的页面， _self 代表会在本页面覆盖新的页面。

表单标签input

<!DOCTYPE html>
<html lang="en">
<head>
    <title>表单标签input中type属性(5)</title>
</head>
<body>
    <form>
        <!-- input还有一个属性value，用于设置初始值 -->
        <!-- maxlength可以设定输入文本的文字个数 -->
        账号：<input type="text" name="zhanghao" value="1000000" maxlength="9"/><br/>
        密码：<input type="password" name="mima"/><br/>
        <!-- 想要实现单选按钮最多选一个的功能，得给所有单选框命名相同名字（input标签的属性name）-->
        <!-- checked属性可设置选项默认勾选的状态 -->
        性别：男<input type="radio" name="sex" checked/> 女<input type="radio" name="sex"/><br/>
        <!-- 多选框（可以多选） -->
        hhh: A<input type="checkbox"> B<input type="checkbox"><br/>
        <input type="submit" value="登录"/>
        <!-- 还原为初始状态 -->
        <input type="reset" value="清空"/><br/>
        <input type="button" value="功能由后期实现"><br/>
        <!-- 选择文件上传 -->
        <input type="file" value="选择文件上传">
    </form>
</body>
</html>

其运行结果为：

1.6.png

input标签可改变type属性去获得相应的功能，文本框，密码框，单选项，复选项，按钮，清空按钮，提交按钮等。

下拉表单

<!DOCTYPE html>
<html lang="en">
<head>
    <title>select下拉表单</title>
</head>
<body>
    <form>
        下拉选项框 <select>
            <option>A</option>
            <option>B</option>
            <option>C</option>
            <option>D</option>
        </select>
    </form>
</body>
</html>

运行结果：

1.7.png

div和span标签

<!DOCTYPE html>
<html lang="en">
<head>
    <title>div和span标签</title>
</head>
<body>
    <div>div独占一行，后面的内容自动换行</div>123
    <div>div独占一行，后面的内容自动换行</div>123<br/>
    <span>A</span>
    <span>B</span>
</body>
</html>

运行结果如下

1.8.png

div和span标签非常重要，会在后面的网页设计频繁使用到。

总结

html很简单，但要去构造成如掘金网页一样的html构架还得多加观察和学习。

avatar
文章
阅读
粉丝