天景科技苑

这个屌丝很懒，什么也没留下！

热门标签

【前端】从零开始学习编写HTML

作者：天景科技苑 | 2024-07-15 12:43:11

踩

【前端】从零开始学习编写HTML

一、什么是前端

前端开发是创建Web页面或APP等前端界面呈现给用户的过程，负责把界面更好的呈现给用户

相对于后端主要负责用户看不见的数据处理，前端是指用户可以看到和操作的部分，例如网页页面，PC端程序页面或移动端APP页面。

二、什么是HTML

HTML（HyperText Markup Language）是超文本标记语言的简称，是一种用于创建网页的标准标记语言。

超文本：一种文本类型，允许通过链接（通常称为超链接）从一个文档跳转到另一个文档或文档中的特定部分

三、HTML文档的基本结构


<html>
    <head>
        <title>页面标题</title>
    </head>
    <body>
        页面内容
    </body>
</html>

如上：

html标签是整个HTML文档的根标签，用来标记HTML文档的开始和结束
head标签用于标记HTML文档头部的开始和结束，其中填写页面的属性，例如head的子标签titie代表页面的标题
body标签用于标记HTML文档主体的开始和结束，其中填写页面当中显示的内容

其中被尖括号包括的就是HTML标签，不同标签之间分为父子关系和兄弟关系

我们可以通过上面不同标签的缩进程度来观察它们的关系，例如head和body是html的子标签，title是head的子标签，head和body之间是兄弟关系

不同标签之间的结构关系就构成了一棵DOM树

四、HTML常见标签

HTML标签又分为单标签和双标签

单标签只会单独出现，用法：<标签名/>

双标签成对出现，用法：<标签名></标签名>

4.1 注释标签

<!-- 我是注释 -->

像这样，用尖括号、感叹号和横杠组成注释标签，其中填写自己需要的注释

注释不会显示在网页界面上，主要用于提高代码的可读性

4.2 标题标签

就像CSDN的富文本编辑器中提供了六级标题，HTML的标题标签也有六个，从h1到h6逐级变小

例如：


<html>
    <head>
        <title>页面标题</title>
    </head>
    <body>
        <h1>这是一级标题</h1>
        <h2>这是二级标题</h2>
        <h3>这是三级标题</h3>
        <h4>这是四级标题</h4>
        <h5>这是五级标题</h5>
        <h6>这是六级标题</h6>
    </body>
</html>

4.3 段落标签

我们在开发工具中编写HTML文档，将一长段文字分成多段，但是在网页中并不会显示分成多段的效果，仍然是一长段，例如：

在浏览器中运行：

在HTML中直接输入回车并不能真正的实现分段，而是相当于一个空格

如果我们要进行分段，需要用到段落标签p，具体用法如下：


<html>
    <head>
        <title>页面标题</title>
    </head>
    <body>
        <p>1111111111111111111</p>
        <p>2222222222222222222</p>
    </body>
</html>

再次运行：

会发现成功分成了两段，段落之间有一定的间隙

段落标签p是一个双标签，在开始标签和结束标签之间填写自己想要的内容

当然，标签不限制只能在同一行，像这样也是正确的用法：


<html>
    <head>
        <title>页面标题</title>
    </head>
    <body>
        <p>
            1111111111111111111
        </p>
        <p>
            2222222222222222222
        </p>
    </body>
</html>

4.4 换行标签

换行标签br是break的缩写，是一个单标签，规范写法是<br/>，不建议写成<br>

区别于段落标签p，用br标签只会进行分行，不会产生空隙

例如：


<html>
    <head>
        <title>页面标题</title>
    </head>
    <body>
        hello<br/>world
    </body>
</html>

在浏览器中运行：

4.5 格式化标签

HTML中还有一些标签可以改变字体格式：

加粗：strong标签和 b 标签
倾斜：em标签和 i 标签
删除线：del标签和 s 标签
下划线：ins标签和 u 标签

例如：


<html>
    <head>
        <title>页面标题</title>
    </head>
    <body>
        <strong>加粗</strong>
        <b>加粗</b>
        <em>倾斜</em>
        <i>倾斜</i>
        <del>删除线</del>
        <s>删除线</s>
        <ins>下划线</ins>
        <u>下划线</u>
    </body>
</html>

在浏览器中运行：

4.6 图片标签

要在网页中显示图片，就需要用到图片标签img

img标签中必须带有src属性，用于说明图片的路径，用法：<img src="图片路径">

例如：


<html>
    <head>
        <title>页面标题</title>
    </head>
    <body>
        <img src="html.png">
    </body>
</html>

在浏览器中运行：

除了保存在本地的图片，网络路径也可以使用，例如：


<html>
    <head>
        <title>页面标题</title>
    </head>
    <body>
        <img src="https://tgi12.jia.com/114/936/14936926.jpg">
    </body>
</html>

在浏览器中运行：

除了src属性，img标签还有其他属性：

alt：替换文本，当图片不能正确显示时会显示一个替换的文字
title：提示文本，当鼠标放到图片上会有文字提示
width/height：控制宽度和高度，修改一个后另一个会等比例缩放
border：控制图片边框

例如：


<html>
    <head>
        <title>页面标题</title>
    </head>
    <body>
        <img src="html.png" alt="HTML" title="这是HTML图标" width="1000px" border="2px">
    </body>
</html>

属性之间不分先后顺序，按照键值对的格式表示

4.7 超链接标签

要实现在网页中跳转到其他地方，就需要超链接标签a

超链接标签也有必须具备的属性href，用来说明点击后要跳转到哪个页面

例如：


<html>
    <head>
        <title>页面标题</title>
    </head>
    <body>
        <a href="https://www.baidu.com/">百度</a>
    </body>
</html>

在浏览器中运行：

点击蓝紫色带下划线的“百度”，就可以跳转到对应的页面

属性href的值有多种形式：

外部链接：其他网站的地址，例如上面的情况
内部链接：网页内部页面之间的链接，使用相对路径即可
空链接：用"#"在herf中占位

例如：

<a href="#">空链接</a>

下载链接：href的值对应的路径是一个文件

例如：

<a href="test.zip">下载文件</a>

网页元素链接：可以给图片等任何元素添加链接

例如：


<a href="https://www.baidu.com/">
    <img src="baidu.png">
</a>

点击该图片就会跳转到百度首页

锚点链接：可以快速定位到页面中的某个位置

例如：


<a href="#one">第一章</a>
<a href="#two">第二章</a>
<p id="one">
    第一章内容
</p>
<p id="two">
    第二章内容
</p>

4.8 表格标签

要在网页中显示一个表格，就需要使用表格标签table

table有一些子标签：

tr：表示表格的一行
td：表示一个单元格
th：表示表头的单元格，会居中加粗
thead：表格的头部区域（范围比th大）
tbody：表格的主题区域

其中td和th又是tr的子标签

我们举一个例子：


<html>
    <head>
        <title>页面标题</title>
    </head>
    <body>
        <table>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
            </tr>
            <tr>
                <td>张三</td>
                <td>男</td>
                <td>18</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>男</td>
                <td>19</td>
            </tr>
        </table>
    </body>
</html>

在浏览器中运行：

我们发现这个表格怎么没有边框？事实上，表格标签table包含一些属性，其中边框也是属性之一，需要进行设置

table的属性有：

align：表格在页面中的对齐方式，例如align="center"就是在页面中居中对齐
border：表示边框，1表示有边框，数字越大边框越粗，""表示无边框
cellpadding：表格内容距离边框的距离，默认为1像素
cellspacing：单元格之间的距离，默认为2像素
width/height：表格尺寸

实际设置中我们可能会发现表格的边框有两条线，这是因为单元格之间有距离，如果将cellspacing设置为0边框就变为了单线。大家可以自己设置一下看看

我们还可以对单元格标签td设置合并单元格：

跨行合并：rowspan="需要合并的单元格数"，将下方的单元格合并
跨列合并：colspan="需要合并的单元格数"，将右方的单元格合并

例如：


<html>
    <head>
        <title>页面标题</title>
    </head>
    <body>
        <table align="center" border="1" cellpadding="5" cellspacing="0" width="500px" height="500px">
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
            </tr>
            <tr>
                <td>张三</td>
                <td rowspan="2">男</td>
                <td>18</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>19</td>
            </tr>
        </table>
    </body>
</html>

在浏览器中运行：

4.9 列表标签

列表标签又分为有序列表、无序列表和自定义列表：

无序列表：ul和li
有序列表：ol和li
自定义列表：dl（总标签）dt（小标题）和dd

例如：


<html>
    <head>
        <title>页面标题</title>
    </head>
    <body>
        <h3>无序列表</h3>
        <ul>
            <li>第一列</li>
            <li>第二列</li>
            <li>第三列</li>
        </ul>
        <h3>有序列表</h3>
        <ol>
            <li>第一列</li>
            <li>第二列</li>
            <li>第三列</li>
        </ol>
        <h3>自定义列表</h3>
        <dl>
            <dt>小标题</dt>
            <dd>第一列</dd>
            <dd>第二列</dd>
            <dd>第三列</dd>
        </dl>
    </body>
</html>

在浏览器中运行：

无序列表中，每一列前面的实心圆可以改成方块或空心圆。可以通过ul标签的type属性修改，默认值为disc（实心圆），还有square（实心方块）和circle（空心圆），例如：


<html>
    <head>
        <title>页面标题</title>
    </head>
    <body>
        <h3>无序列表</h3>
        <ul type="circle">
            <li>第一列</li>
            <li>第二列</li>
            <li>第三列</li>
    </body>
</html>

有序列表中每一列前面的数字也可以改成英文字母或罗马数字，也是通过修改ol标签的type属性。

有序序列还可以通过修改ol标签的start属性来改变列表起始的数字

例如：


<html>
    <head>
        <title>页面标题</title>
    </head>
    <body> 
        <h3>有序列表</h3>
        <ol type="I" start="2">
            <li>第一列</li>
            <li>第二列</li>
            <li>第三列</li>
        </ol>
    </body>
</html>

4.10 表单标签

要想让用户通过页面输入信息，就需要用到表单标签

（1）form标签

用于创建表单，将用户输入的数据提交到服务器

其中action属性负责定义表单数据提交的目标URL，method属性定义提交数据的HTTP方法

例如：

这里就涉及到一定的服务器和网络编程相关知识了

（2）input标签

用于创建各种输入控件，如文本框、按钮、单选框和复选框

input的type属性用于定义输入控件的类型，是必须要显式定义的属性

输入控件有：

文本框（type="text")：用于输入单行文本

例如：


<html>
    <head>
        <title>页面标题</title>
    </head>
    <body> 
        <form>
            输入姓名<input type="text">
        </form>
    </body>
</html>

密码框（type="password")：用于输入密码

例如：


<html>
    <head>
        <title>页面标题</title>
    </head>
    <body> 
        <form>
            输入密码<input type="password">
        </form>
    </body>
</html>

单选框（type="radio")：单选

例如：


<html>
    <head>
        <title>页面标题</title>
    </head>
    <body> 
        <form>
            性别<input type="radio" name="sex">男<input type="radio" name="sex">女
        </form>
    </body>
</html>

注意！两个构成单选关系的单选框，name属性的值必须相同才可以实现多选一的效果

如果我们想让某个选项作为默认选择项，可以设置其checked属性，例如：

再次运行，此时男选项就被默认选择了

复选框（type="checkbox")：多选

例如：


<html>
    <head>
        <title>页面标题</title>
    </head>
    <body> 
        <form>
            <input type="checkbox">选项1<input type="checkbox">选项2<input type="checkbox">选项3
        </form>
    </body>
</html>

普通按钮（type="button")

例如：


<html>
    <head>
        <title>页面标题</title>
    </head>
    <body> 
        <form>
            <input type="button" value="点击">
        </form>
    </body>
</html>

当前我们写出的按钮点击后没有响应，需要搭配JS使用，例如：


<html>
    <head>
        <title>页面标题</title>
    </head>
    <body> 
        <form>
            <input type="button" value="点击" onclick="alert('hello')">
        </form>
    </body>
</html>

提交按钮（type="submit")：放在form标签中，点击后就会将数据发送给服务器

例如：


<html>
    <head>
        <title>页面标题</title>
    </head>
    <body> 
        <form>
            输入姓名<input type="text" name="username">
            <input type="submit" value="提交">
        </form>
    </body>
</html>

页面如下：

在文本框中输入zhangsan后点击提交：

此时输入的数据就作为参数提交给服务器了

清空按钮（type="reset")：放在form标签中，点击后将所有的用户输入清空

例如：


<html>
    <head>
        <title>页面标题</title>
    </head>
    <body> 
        <form action="1.html">
            输入姓名<input type="text" name="username">
            <input type="reset" value="清空">
        </form>
    </body>
</html>

在文本框中进行输入后点击清空按钮，即可清空输入的内容

选择文件（type="file")：点击按钮会弹出选择文件界面

例如：


<html>
    <head>
        <title>页面标题</title>
    </head>
    <body> 
        <form>
            <input type="file">
        </form>
    </body>
</html>

（3）label标签

搭配input标签使用，可以与表单控件相关联，当用户点击label标签的内容时，会自动将焦点跳到相关联的表单控件上，能够提高用户体验

例如我们想实现点击选框对应的文字就能选择该选项的功能：


<html>
    <head>
        <title>页面标题</title>
    </head>
    <body> 
        <form>
            <input type="radio" name="sex" id="male">
            <label for="male">男</label>
            <input type="radio" name="sex" id="female">
            <label for="female">女</label>
        </form>
    </body>
</html>

此时即使我们不点击选框，点击"男"或"女"也可以实现选择的功能

注意：要将label和表单控件相关联，必须要保证表单控件的id属性值和label标签的for属性值对应

（4）select标签

select用于实现下拉菜单，其子标签option作为菜单的每一行，例如：


<html>
    <head>
        <title>页面标题</title>
    </head>
    <body> 
        <form>
            <select>
                <option>北京</option>
                <option>上海</option>
                <option>广州</option>
                <option>深圳</option>
            </select>
        </form>
    </body>
</html>

如果在option中定义selected="selected"则表示该选项默认选中，例如：

此时就会默认选中广州

（5）textarea标签

可以定义一个多行的文本输入控件，例如：


<html>
    <head>
        <title>页面标题</title>
    </head>
    <body> 
        <form>
            <textarea rows="5" cols="20">
 
            </textarea>
        </form>
    </body>
</html>

其中rows属性和cols属性表示一次能够显示几行几列

4.11 无语义标签

顾名思义，就是没有语义的标签，不需要考虑其内容，区别于前面的通过标签名就可以知道标签用途的语义化标签

无语义标签中有div标签和span标签：

div是块级元素，独占一行，是一个大盒子
span是行内元素，不独占一行，会和其他标签元素在一行显示，是一个小盒子

这两个标签主要用于网页布局

五、实现简单的简历展示网页

接下来是练习时间，尝试根据前面的知识来实现下面的网页吧！

源码如下：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人简历</title>
</head>
<body>
    <h1>某某某</h1>
    <div>
        <h2>基本信息</h2>
        <img src="https://pic.616pic.com/ys_bnew_img/00/24/50/zLfQibcVrw.jpg" width="300px">
        <p><span>求职意向：</span>C++开发工程师</p>
        <p><span>联系电话：</span>XXX-XXXX-XXXX</p>
        <p><span>邮箱：</span>xxx@qq.com</p>
        <p><a href="https://github.com/">我的 github</a></p>
        <p><a href="https://blog.csdn.net/">我的 博客</a></p>
    </div>
 
    <div>
        <h2>教育背景</h2>
        <ol>
            <li>xxx小学</li>
            <li>xxx初中</li>
            <li>xxx高中</li>
            <li>xxx大学</li>
        </ol>
    </div>
 
    <div>
        <h2>专业技能</h2>
        <ul>
            <li>熟练掌握C++</li>
            <li>能够实现并熟练运用常见数据结构</li>
            <li>熟知计算机网络理论</li>
            <li>掌握Web开发能力</li>
        </ul>
    </div>
 
    <div>
        <h2>我的项目</h2>
        <ol>
            <li><h3>树洞</h3></li>
            <p>开发时间：xxxx-xxxx</p>
            <p>功能介绍：</p>
            <ul>
                <li>功能1</li>
                <li>功能2</li>
            </ul>
            <li><h3>个人博客网站</h3></li>
            <p>开发时间：xxxx-xxxx</p>
            <p>功能介绍：</p>
            <ul>
                <li>功能1</li>
                <li>功能2</li>
            </ul>
        </ol>    
    </div>
 
    <div>
        <h2>个人评价</h2>
        <p>在校期间学习优良，绩点名列前茅，多次获得奖学金</p>
    </div>
</body>
</html>

六、实现简单的简历填写页面

接下来是第二个练习，尝试根据前面的知识来实现下面的网页吧！

源码如下：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简历填写页面</title>
</head>
<body>
    <table cellspacing="0" width="600px">
        <thead><h3>请填写简历信息</h3></thead>
        <tbody>
            <tr>
                <td>姓名</td>
                <td><input type="text"></td>
            </tr>
            <tr>
                <td>性别</td>
                <td>
                    <input type="radio" name="sex" id="male">
                    <label for="male">男</label>
                    <input type="radio" name="sex" id="female">
                    <label for="female">女</label>
                </td>
            </tr>
            <tr>
                <td>出生年份</td>
                <td>
                    <select>
                        <option>--请选择年份--</option>
                        <option>--2000--</option>
                        <option>--2001--</option>
                        <option>--2002--</option>
                        <option>--2003--</option>
                        <option>--2004--</option>
                        <option>--2005--</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>就读学校</td>
                <td><input type="text"></td>
            </tr>
            <tr>
                <td>应聘岗位</td>
                <td>
                    <input type="checkbox" id="fe"><label for="fe">前端开发</label>
                    <input type="checkbox" id="be"><label for="be">后端开发</label>
                    <input type="checkbox" id="qa"><label for="qa">测试开发</label>
                    <input type="checkbox" id="op"><label for="op">运维开发</label>
                </td>
            </tr>
            <tr>
                <td>掌握的技能</td>
                <td><textarea rows="7" cols="20"></textarea></td>
            </tr>
            <tr>
                <td>项目经历</td>
                <td><textarea rows="7" cols="20"></textarea></td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <input type="checkbox" id="read">
                    <label for="read">我已仔细阅读过公司的招聘要求</label>
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <h3>请应聘者确认：</h3>
                    <ol>
                        <li>以上信息真实有效</li>
                        <li>能够随时上岗</li>
                    </ol>
                </td>
            </tr>
        </tbody>
    </table>
</body>
</html>

完.

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/天景科技苑/article/detail/829384