HTML（超文本标记语言）

发布于：2025-03-23 ⋅ 阅读:(17) ⋅ 点赞:(0)

HTML

一、概述

  • HTML的全称是“HyperText Markup Language”，也就是“超文本标记语言”
  • 超⽂本: 比文本要强⼤，通过链接和交互式⽅式来组织和呈现信息的⽂本形式.；不仅仅有⽂本, 还可能包含图⽚, ⾳频, 或者⾃已经审阅过它的学者所加的评注、补充或脚注等等
  • 标记语⾔: 由标签构成的语⾔

因为改语言是由标签构成，所以学习HTML主要是学习标签

HTML、CSS和JavaScript称为前端“三剑客”，其各自有不同的作用。通俗点来说，HTML是基础，决定有什么；CSS是美化，决定如何展示；JavaScript是动态功能，决定如何交互。
例如：在一个淘宝网页中，其文字、图片、链接等等内容由HTML决定；其文字颜色、字体、布局等等由CSS决定；其点击、滚动、动画效果等等由JavaScript决定

本文仅展示一小部分内容，仅达到能看懂标签或遇到不会的借助网络能看懂就行了

二、HTML基础

2.1 认识HTML标签

HTML 代码是由 “标签” 构成的，形如

<h1>一级标签</h1>
  1. 标签名 (body) 放到 < > 中
  2. ⼤部分标签成对出现!!!
  3. <h1>为开始标签,</h1> 为结束标签
  4. 少数标签只有开始标签, 称为 “单标签”
  5. 开始标签和结束标签之间, 写的是标签的内容
  6. 开始标签中可能会带有 “属性”. id 属性相当于给这个标签设置了⼀个唯⼀的标识符(⾝份证号码)

2.2 HTML文件基本结构

<html>
	<head>
		<title>第⼀个⻚⾯</title>
 	</head>
 	<body>
 		hello world
 	</body>
</html>

结构：<开始标签> 内容 </结束标签>

  • html 标签是整个 html ⽂件的根标签(最顶层标签)
  • head 标签中写⻚⾯的属性
  • body 标签中写的是⻚⾯上显⽰的内容
  • title 标签中写的是⻚⾯的标题
  • 标签是可以套标签的

2.3 标签层次结构

在这里插入图片描述

三、HTML快速入门

3.1 开发工具

HTML 可以使⽤系统⾃带的记事本来编写, 但是⾮常不⽅便, 我们课程中使⽤前端专业的开发⼯具:
Visual Studio Code（简称"VS Code"）是Microsoft在2015年4⽉30⽇Build开发者⼤会上宣布的⼀款跨平台源代码编辑器. 可以运⾏在Windows, macOS 和Linux上. 它具有对JavaScript，TypeScript和Node.js的内置⽀持，并具有丰富的其他语⾔(例如C++，C＃，Java，Python，PHP，Go).
• 官⽹： https://code.visualstudio.com

3.2 快速开发

在 VS Code中创建⽂件 xxx.html , 直接输⼊ ! , 按 Enter或 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>
  • 其中含义（了解即可）：
  1. <!DOCTYPE html> 称为 DTD (⽂档类型定义), 描述当前的⽂件是⼀个 HTML5 的⽂件
  2. <html lang="en"> 其中 lang 属性表⽰当前⻚⾯是⼀个 “英语⻚⾯”. 这⾥暂时不⽤管. (有些
    浏览器会根据此处的声明提⽰是否进⾏⾃动翻译)
  3. <meta charset="UTF-8"> 描述⻚⾯的字符编码⽅式. 没有这⼀⾏可能会导致中⽂乱码
  4. <meta name="viewport" content="width=device-width, initial-scale=1.0">

name=“viewport” 其中 viewport 指的是设备的屏幕上能⽤来显⽰我们的⽹⻚的那⼀块
区域.
content=“width=device-width, initial-scale=1.0” 在设置可视区和设备宽
度等宽, 并设置初始缩放为不缩放. (这个属性对于移动端开发更重要⼀些).

运行以下代码

<!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>
    第一个HTML界面
</body>
</html>

在这里插入图片描述

3.3 HTML的常用标签

3.3.1 标题标签

有六个, 从 h1 - h6. 数字越⼤, 则字体越⼩

    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>

在这里插入图片描述

3.3.2 段落标签

在HTML中, 段落, 换⾏符, 空格都会失效（换行空格数不管有多少，仅会显示一个）, 如果需要分成段落, 需要使⽤专⻔的标签

  • p标签表示一个段落
<p>这是⼀个段落</p>

注意:
• p 标签描述的段落, 前⾯没有缩进. (未来 CSS 会学)
• ⾃动根据浏览器宽度来决定排版.
• html 内容⾸尾处的换⾏, 空格均⽆效.
• 在 html 中⽂字之间输⼊的多个空格只相当于⼀个空格.
• html 中直接输⼊换⾏不会真的换⾏, ⽽是相当于⼀个空格.
如果想使用多个空格等操作可以使用转义字符！（不用记，随用随查即可）

3.3.3 换行标签

换行通过<br/>标签来实现

    这是一个换行标签</br>
    换行标签相比段落标签行与行间更加紧密</br>
    <p>这是⼀个段落</p>
    <p>这是⼀个段落</p>

在这里插入图片描述

3.3.4 图片标签

img 标签必须带有 src 属性. 表⽰图⽚的路径
写法1：相对路径

<img src="rose.jpg">
.../代表相对路径
<img src=".../rose.jpg">

此时要把 rose.jpg 这个图⽚⽂件放到和 html 中的同级⽬录中

示例代码

    <h1>下面是同级目录下的图片</h1></br> 
    <img src="p2.jpg">

在这里插入图片描述
写法2：绝对路径
这种写法没有需要在同一目录下的限制条件

<img src="文件路径">

示例

    <img src="D:\Code Repository\前端代码\相关图片\p1.jpg">

在这里插入图片描述
还可以设置网上的图片路径，在网上找到一张图片，鼠标右击点击复制图片链接即可获得图片链接

<img src="https://img1.baidu.com/it/u=3518673092,2032183538&fm=253&fmt=auto&app=138&f=JPEG?w=781&h=500">

在这里插入图片描述

img 标签的其他属性
• width/height: 控制宽度⾼度. ⾼度和宽度⼀般改⼀个就⾏, 另外⼀个会等⽐例缩放. 否则就会图⽚失
衡.
• border: 边框, 参数是宽度的像素(px). 但是⼀般使⽤ CSS 来设定.
如果高度和宽度仅设置一种的话，图片就会根据设置值进行等比例放缩

<img src="rose.jpg" width="500px" height="800px" border="5px">

示例代码

    <img src="p2.jpg" width="800px" height="800px">
    <img src="D:\Code Repository\前端代码\相关图片\p1.jpg" width="1000px">

在这里插入图片描述
注意：

  1. 属性可以有多个, 不能写到标签之前
  2. 属性之间⽤空格分割, 可以是多个空格, 也可以是换⾏.
  3. 属性之间不分先后顺序
  4. 属性使⽤ “键值对” 的格式来表⽰

3.3.5 超链接：a

href: 表⽰点击后会跳转到哪个⻚⾯，必须得存在
target: 打开⽅式； 默认是 _self. 如果是 _blank 则⽤新的标签⻚打开
链接的几种形式：

  1. 外部链接：href引用其他网址
<a href="http://www.baidu.com" target="_blank" >点击使用新标签页进入百度</a>
<a href="http://www.baidu.com" >点击使用当前页面进入百度</a>
  1. 内部链接：⽹站内部⻚⾯之间的链接， 相对路径或绝对路径都可以
        <a href="test.html" target="_blank" >嘿</a>
        <a href="D:\Code Repository\前端代码\test.html" target="_blank" >嘿</a>
  • 空链接: 使⽤ # 在 href 中占位
	    <a href="#">空链接</a>
  • 其中跳转链接不一定要是文字，还可以是图片、视频等；例如：
  <a href="http://www.baidu.com"> <img src="https://img0.baidu.com/it/u=1058961982,3919091402&fm=253&fmt=auto&app=138&f=JPEG?w=779&h=500"></a>

在这里插入图片描述

3.3.6 表格标签

table 标签: 表⽰整个表格
• tr: 表⽰表格的⼀⾏
• td: 表⽰⼀个单元格
• thead: 表格的头部区域
• tbody: 表格的主体区域.
table 包含 tr , tr 包含 td

表格标签有⼀些属性, 可以⽤于设置⼤⼩边框等. 但是⼀般使⽤ CSS ⽅式来设置.
这些属性都要放到 table 标签中.
• align 是表格相对于周围元素的对⻬⽅式. align=“center” (不是内部元素的对⻬⽅式)
• border 表⽰边框. 1 表⽰有边框(数字越⼤, 边框越粗), “” 表⽰没边框.
• cellpadding: 内容距离边框的距离, 默认 1 像素
• cellspacing: 单元格之间的距离. 默认为 2 像素
• width / height: 设置尺⼨.
注意, 这⼏个属性, vscode 都提⽰不出来

    <table>
        <!--有4个tr，每个tr有两个td可以简写为：tr*4>td*2 -->
        <tr>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>
    </table>

在这里插入图片描述

  • 写完这样的代码，在浏览器中发现并没有显示出来，这是因为没有边框和内容

补充边框和内容

    <table border="1px">
        <tr>
            <td>姓名</td>
            <td>ID</td>
        </tr>
        <tr>
            <td>张三</td>
            <td>001</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>002</td>
        </tr>
        <tr>
            <td>王五</td>
            <td>003</td>
        </tr>
    </table>

在这里插入图片描述

3.3.7 表单标签

表单是让用户输⼊信息的重要途径.
分成两个部分:
• 表单域: 包含表单元素的区域. 重点是 form 标签.
• 表单控件: 输⼊框, 提交按钮等. 重点是 input 标签.

3.3.7.1 form标签
<form action="test.html">
 ... [form 的内容]
</form>

描述了要把数据按照什么⽅式, 提交到哪个页面中（这时候就涉及到了前后端交互，前端需要向后端发出请求，后端返回一个结果显示在前端）
关于 form 需要结合后端代码来进⼀步理解. 后⾯再详细研究
示例：

    <form>
        <!-- input:text回车输入 -->
        用户名：<input type="text"></br>
        密码：<input type="password">
        <!-- name和id为向后端传输数据的参数名称，唯一的 -->
    </form>

在这里插入图片描述

3.3.7.2 input标签

各种输⼊控件, 单⾏⽂本框, 按钮, 单选框, 复选框.
• type(必须有), 取值种类很多, button, checkbox, text, file, image, password, radio 等.
• name: 给 input 起了个名字. 尤其是对于 单选按钮, 具有相同的 name 才能多选⼀.
• value: input 中的默认值.
• checked: 默认被选中. (⽤于单选按钮和多选按钮)
下面介绍一些常用的类型：

  1. 文本框
<input type="text">
  1. 密码框

与文本框不同，输入的内容以*显示

<input type="password">

在这里插入图片描述

  1. 单选框
<input type="radio" name="sex">男
<input type="radio" name="sex" checked="checked">⼥

注意: 单选框之间必须具备相同的 name 属性, 才能实现 多选⼀ 效果**（因为向后端传递信息时只能传递一个name值）**.
反例：

        性别：<input type="radio" >男<input type="radio">女</br>

在这里插入图片描述
当轮流选择不同性别按钮时，没有达到单选效果，所以给单选框附上相同name属性即可

如何做到点到男/女的字的时候，就能选择按钮呢
答：使用label标签
for中的值需要和对应按钮id一致

        性别：<input type="radio" name="a" id="abc"><label for="abc">男</label><input type="radio" name="a" id="abcd"><label for="abcd">女</label></br>
  1. 复选框
        兴趣爱好：<input type="checkbox" name="hobbie" id="1"><label for="1">蓝球</label>
                 <input type="checkbox" name="hobbie" id="2"><label for="2">足球</label>
                 <input type="checkbox" name="hobbie" id="3">乒乓球
                 <input type="checkbox" name="hobbie" id="4">羽毛球
  1. 提交按钮

提交按钮必须放到 form 标签内，提交的范围为所在form标签的范围；点击后就会尝试给服务器发送请求，如果不在form标签，则无响应

<form action="test.html">
 <input type="text" name="username">
 <input type="submit" value="提交">
</form>

3.3.8 select标签

下拉菜单
• option 中定义 selected=“selected” 表⽰默认选中.
• value 代表传入后端的值
示例：

    <select name="area">
        <option selected="selected" value="1">上海</option>
        <option value="2">北京</option>
        <option value="3">南京</option>
        <option value="4">江苏</option>
    </select>

在这里插入图片描述

3.3.9 textarea 标签

个人简介：</br>
<textarea name="" id="" rows="6" cols="20"></textarea>
<!-- 行数为6，每行可以写20个字 -->

⽂本域中的内容, 就是默认内容, 注意, 空格也会有影响.
rows 和 cols 也都不会直接使⽤, 都是⽤ css 来改的.

3.3.10 ⽆语义标签: div&span

div 标签, division 的缩写, 含义是 分割
span 标签, 含义是跨度
就是两个盒⼦. ⽤于⽹⻚布局
• div 是独占⼀⾏的, 是⼀个⼤盒⼦.
• span 不独占⼀⾏, 是⼀个⼩盒⼦.

<div>
 <span>咬⼈猫</span>
 <span>咬⼈猫</span>
 <span>咬⼈猫</span>
</div>
<div>
 <span>兔总裁</span>
 <span>兔总裁</span>
 <span>兔总裁</span>
</div>
<div>
 <span>阿叶君</span>
 <span>阿叶君</span>
 <span>阿叶君</span>
</div>

在这里插入图片描述

四、综合练习

完成一个用户注册界面，如下：
在这里插入图片描述

<!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>
    <form action="test.html">
        <table>
            <tr>
                <td>用户名</td>
                <td><input type="text" name="userName" id="001" placeholder="请输入用户名"></td>
            </tr>
            <tr>
                <td>手机号</td>
                <td><input type="text" name="num" id="002" placeholder="请输入手机号"></td>
            </tr>
            <tr>
                <td>密码</td>
                <td><input type="password" name="password" id="003" placeholder="请输入密码"></td>
            </tr>
        </table>
        <input type="submit" value="提交">已有账号？
        <a href="login.html" target="_blank">登录</a>    
    </form>
    </body>
</html>

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布