当前位置：首页 > news >正文

前端三件套—HTML入门

news 2025/7/5 6:08:00

1 标签

2 html页面基本结构

3 常见标签

3.1 注释

3.2 标题（块级元素）

3.3 段落（块级元素）

3.4 格式化标签（行级元素）

3.5 图片标签（行级元素）

3.6 超链接（行级元素）

3.7 表格（块级元素）

3.8 列表（块级元素）

3.9 表单

（1）form（块级元素）

（2）input

（3）搭配form使用的input

3.10 无语义标签

（1）div

（2）span

4 实现简历页面

HTML是前端页面的骨架，HTML代码是由标签构成，并且不需要编译，直接双击打开html文件，依靠浏览器即可运行。

1 标签

标签是HTML的基本单元，由<标签名属性(可选项)>内容</标签名>组成，其中带/的是结束标签，不带/的是开始标签。

属性是可选项，以键值对形式存在，键值对之间用空格分割，键与值之间用=分割。

部分标签没有结束标签，比如<meta 属性>，这个标签表示元，指页面的属性，与内容无关。

在VSCode中，使用快捷键!+Tab可以快速生成页面的基本结构：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

    <title>Document</title>

</head>

<body>

    

</body>

</html>

DOCTYPE标签是文件的类型，即html文件。

html标签的lang属性表示language，即页面的语言，en表示English。

head标签是页面的属性标签，内容是页面的基本属性。

meta标签即元标签，内部的属性填写一些页面的属性，charset是字符集。

name="viewport"其中的viewport指的是设备的屏幕上能用来显示我们的网页的那一块区域。content="width=device-width, initial-scale=1.0"在设置可视区和设备宽度等宽，并设置初始缩放为不缩放(这个属性对于移动端开发更重要一些)。

title标签是页面的标题。

body标签是页面的内容。

2 html页面基本结构

如上述所言，一个html页面包含的两个主要单元是<head></head>和<body></body>，这种结构构成了DOM树（DOM是文档对象模型）：

其中html是head和body的父标签，而head和body是兄弟标签，title是head的子标签，很多写在body中的标签也是其子标签。

3 常见标签

块级元素指独占一行的元素，行级元素指不独占一行的元素。

3.1 注释

<!-- 注释 -->

注释不显示在页面中，使用ctrl+/快捷键可以快速注释/取消注释。

3.2 标题（块级元素）

<h1>标题1</h1>

<h2>标题2</h2>

<h3>标题3</h3>

<h4>标题4</h4>

<h5>标题5</h5>

<h6>标题6</h6>

分为六级标题，数字越大字体越小。对于标签，在VSCode中使用标签名+Tab键可以快速生成标签。

3.3 段落（块级元素）

<p>这是一段话</p>

实现自动分段，不使用p标签，即使输入的内容是段落，但是在页面中也没有换行。以下代码是一些p标签的技巧（后续关于快捷键都是在VSCode中，不再提醒）：

    <!-- 这是段落，输入lorem+tab可以快捷生成测试文本 -->

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio esse nemo molestiae illo suscipit enim earum placeat laboriosam adipisci? Omnis quos sapiente ullam tempore repudiandae cupiditate ea, deleniti maiores a.</p>

    <!--列编辑操作同时编辑多个标签:按住alt+光标同时选多列  -->

    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae impedit accusantium esse dolore maxime ducimus labore provident necessitatibus aut ut? Voluptates a quod ea natus magnam dolores reprehenderit est vero!</p>

    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae impedit accusantium esse dolore maxime ducimus labore provident necessitatibus aut ut? Voluptates a quod ea natus magnam dolores reprehenderit est vero!</p>

    <!-- 换行：在想换行的位置加入<br/>标签 -->

    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.（此处换行）<br/> Quae impedit accusantium esse dolore maxime ducimus labore provident necessitatibus aut ut? Voluptates a quod ea natus magnam dolores reprehenderit est vero!</p>

    <!-- 浏览器会对多个空格换行键进行过滤，想要多个空格间隙使用转义符  -->

    <p>Lorem, ipsum    dolor sit ametconsectetur adipisicing elit. Ut illum a qui iusto sed optio dignissimos quasi cum ad! Reprehenderit vitae excepturi sed earum dolore quod temporibus dolorum voluptas expedita.</p>

注意：p标签之间存在一个空隙（即段间距），并且默认没有缩进（CSS可以实现）。内容自动根据浏览器宽度来决定排版，html内容首尾处的换行和空格均无效，在html中文字之间输入的多个空格只相当于一个空格，html中直接输入换行不会真的换行，而是相当于一个空格。

3.4 格式化标签（行级元素）

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

    <strong>加粗1</strong>

    <b>加粗2</b>

    <em>倾斜1</em>

    <i>倾斜2</i>

    <del>删除线1</del>

    <s>删除线2</s>

    <ins>下划线1</ins>

    <u>下划线2</u>

3.5 图片标签（行级元素）

    <!-- 图片:尽量使用浏览器直接打开html文件，这样工作路径就是相对路径（也支持绝对路径或网络地址） -->

    <img src="image/kid.jpg" alt="小孩" title="动漫可爱小孩" width="500px" height="500px">

图片标签使用img标签，src属性是图片的存储路径。alt是替换文本，当文本不能正确显示的时候，会显示一个替换的文字。title是提示文本，鼠标放到图片上，就会有提示。width/height：宽度/高度(单位像素px)，高度和宽度一般只改一个，另外一个会等比例缩放，否则就会图片变形。border是边框，参数是宽度的像素，但是一般使用CSS来设定。

对于属性src的路径：

（1）相对路径：以html所在位置为基准，找到图片的位置。同级路径：直接写文件名即可(或者./)，下一级路径：image/1.jpg，上一级路径：../image/1.jpg

（2）绝对路径：磁盘路径或网络路径。

3.6 超链接（行级元素）

<a href="http://www.baidu.com">百度</a>

基本使用方式是a标签，href属性是跳转的地址。target属性是打开方式，默认是_self，如果是_blank则用新的标签页打开。

特殊使用方式：

（1）外部链接：引用外部的网站链接。

<a href="http://www.baidu.com">百度</a>

（2）内部链接：网站页面与页面之间的跳转（前提是项目中必须存在这个html页面）。

<a href="2.html" target="_blank">点我跳转到网页2</a>

（3）空链接：使用#在href中占位。

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

（4）下载链接：href对应的路径是一个文件(zip)。

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

（5）网页元素链接：可以给图片等任何元素添加链接(把元素放到a标签中)。

<a href="http://www.sogou.com">

<img src="rose.jpg" alt="">

</a>

（6）锚点链接：可以快速定位到页面中的某个位置（通过唯一的id属性索引）。

<a href="#one">第一章</a>

...

<p id="one">

 第一章 <br>

 ...

</p>

注意：禁止a标签跳转：<a href="javascript:void(0);">或者<a href="javascript:;">。

3.7 表格（块级元素）

  <!-- CSS代码 -->

    <style>

        /* td标签内容居中 */

        td {

            text-align: center;

        }

    </style>

    <table border="1px" width="500px" height="300px" cellspacing="0">

        <tr>

            <th>姓名</th>

            <th>性别</th>

            <th>年龄</th>

        </tr>

        <tr>

            <td>张三</td>

            <td>男</td>

            <td>20</td>

        </tr>

        <tr>

            <td>李四</td>

            <td>女</td>

            <td>18</td>

        </tr>

    </table>

table标签：表示整个表格。
tr：表示表格的一行。
td：表示一个单元格。
th：表示表头单元格，会居中加粗。
thead：表格的头部区域(注意和th区分，范围是比th要大的)。
tbody：表格得到主体区域。

对于table标签，有许多属性：

align是表格相对于周围元素的对齐方式，align="center"(不是内部元素的对齐方式)。
border表示边框，1表示有边框(数字越大，边框越粗)，""表示没边框。这里注意：table本身有一个边框，但是每个单元格也有一个边框（如果设置cellspacing=0，两个边框重合就成一个边框了）。
cellpadding表示内容距离边框的距离，默认1像素。
cellspacing表示单元格之间的距离，默认为2像素。
width/height表示设置尺寸。

如果有合并单元格的需求，就要使用如下属性：

跨行合并：rowspan="n"
跨列合并：colspan="n"

合并规则：如果跨行合并，那么上行向下行合并，rowspan属性放在上行单元格的标签中，同时删除下行的单元格；如果跨列合并，那么左列向右列合并，colspan属性放在左列单元格的标签中，同时删除右列的单元格。

3.8 列表（块级元素）

    <ol>

        <li>hello</li>

        <li>world</li>

        <li>java</li>

    </ol>

    <ul>

        <li>hello</li>

        <li>world</li>

        <li>java</li>

    </ul>

ol标签是有序列表。
ul标签是无序列表。

li标签是子标签，表示列表项，其中还能放其他标签，比如实现列表项的超链接。

3.9 表单

（1）form（块级元素）

描述了要把数据按照什么方式，提交到哪个页面中，重点负责表单域（包含表单元素的区域）。

<form action="test.html">

 [form 的内容]

</form>

除了form是块级元素，其他常见的输入框都是行级元素。

（2）input

type(必须有)，取值种类有：button（这个按钮通常和JS搭配使用，实现点击后触发事件，比如给服务器发送请求），checkbox，text，file，image，password，radio等。
name：给input起名字。对于单选按钮，具有相同的name才能多选一。
value：input中的默认值。
checked：默认被选中(用于单选按钮和多选按钮)。
maxlength：设定最大长度。

    <!-- 输入框 -->

    <input type="text">

    <br/>

    <!-- 密码框 -->

    <input type="password">

    <br/>

    <!-- 单选框:相同name具有排他性，通过id和lable将字符和单选框绑定实现点击字符也可以勾选 -->

    <input type="radio" name="gender" id="male" checked="checked"><label for="male">男</label>

    <input type="radio" name="gender" id="female"><label for="female">女</label>

    <br/>

    <!-- 复选框 -->

    <input type="checkbox">王者

    <input type="checkbox">吃鸡

    <input type="checkbox">消消乐

    <br/>

    <!-- 按钮 -->

    <input type="button" value="按钮">

    <br/>

    <!-- 文件选择器 -->

    <input type="file">

    <br/>

    <!-- 下拉菜单 默认选中在要选中的选项option添加属性selected=”selected”-->

    <select>

        <option>北京</option>

        <option>西安</option>

        <option>上海</option>

        <option>武汉</option>

    </select>

    <br/>

上述代码使用对于每一种输入框后都添加了<br/>标签，强制换行，这就是因为input输入框是行级元素。

（3）搭配form使用的input

<form action="test.html">

 <input type="text" name="username">

 <input type="submit" value="提交">

 <input type="reset" value="清空">

</form>

点击submit提交按钮后，浏览器就会向url发送表单输入的内容：/test.html?username=输入的内容

点击reset按钮后，form表单的输入的内容都会被重置。

3.10 无语义标签

无语义标签不像上述标签，没有明确用途，像一个万能盒子，根据需求实现各种各样的标签（除了input标签无法代替）。

（1）div

div独占一行的，是一个大盒子。

（2）span

span不独占一行，是一个小盒子。因此，就产生了很多用法，比如用div搞一个大盒子，大盒子内部有很多标签元素。

    <div>小猫</div>

    <div>小狗</div>

    <span>小猫</span>

    <span>小狗</span>

4 实现简历页面

<!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>

    <table width="500px">

        <tr>

            <td>姓名</td>

            <td>

                <input type="text">

            </td>

        </tr>

        <tr>

            <td>性别</td>

            <td>

                <input type="radio" name="gender" id="man"><label for="man"><img src="image/男.png" width="20px">男</label>

                <input type="radio" name="gender" id="woman"><label for="woman"><img src="image/女.png" width="20px">女</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>

                </select>

                <select>

                    <option>--请选择月份--</option>

                    <option>1</option>

                    <option>2</option>

                    <option>3</option>

                    <option>4</option>

                    <option>5</option>

                    <option>6</option>

                    <option>7</option>

                    <option>8</option>

                    <option>9</option>

                    <option>10</option>

                    <option>11</option>

                    <option>12</option>

                </select>

                <select>

                    <option>--请选择日期--</option>

                    <option>1</option>

                    <option>2</option>

                    <option>3</option>

                    <option>4</option>

                    <option>5</option>

                    <option>6</option>

                    <option>7</option>

                    <option>8</option>

                    <option>9</option>

                    <option>10</option>

                    <option>11</option>

                    <option>12</option>

                    <option>13</option>

                    <option>14</option>

                    <option>15</option>

                    <option>16</option>

                    <option>17</option>

                    <option>18</option>

                    <option>19</option>

                    <option>20</option>

                    <option>21</option>

                    <option>22</option>

                    <option>23</option>

                    <option>24</option>

                    <option>25</option>

                    <option>26</option>

                    <option>27</option>

                    <option>28</option>

                    <option>29</option>

                    <option>30</option>

                    <option>31</option>

                </select>

            </td>

        </tr>

        <tr>

            <td>就读学校</td>

            <td><input type="text"></td>

        </tr>

        <tr>

            <td>应聘岗位</td>

            <td>

                <input type="checkbox">前端开发

                <input type="checkbox">后端开发

                <input type="checkbox">测试开发

                <input type="checkbox">运维开发

            </td>

        </tr>

        <tr>

            <td>掌握的技能</td>

            <td>

                <textarea cols="30" rows="10"></textarea>

            </td>

        </tr>

        <tr>

            <td>项目经历</td>

            <td>

                <textarea cols="30" rows="10"></textarea>

            </td>

        </tr>

        <tr>

            <td></td>

            <td>

                <input type="checkbox">我已阅读了公司的招聘要求

            </td>

        </tr>

        <tr>

            <td></td>

            <td>

                <a href="#">查看我的状态</a>

            </td>

        </tr>

        <tr>

            <td></td>

            <td>

                <h3>请应聘者确认：</h3>

                <ul>

                    <li>以上信息真实有效</li>

                    <li>能够尽早去公司实习</li>

                    <li>能够接受加班</li>

                </ul>

            </td>

        </tr>

    </table>

</body>

</html>

下篇文章：

前端三件套—CSS入门https://blog.csdn.net/sniper_fandc/article/details/147071221?fromshare=blogdetail&sharetype=blogdetail&sharerId=147071221&sharerefer=PC&sharesource=sniper_fandc&sharefrom=from_link