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

前端三大件之一HTML

article 2025/2/23 11:51:54

文章目录

CS架构与BS架构
浏览器内核
Web标准
字符集
文档类型声明标签
标题标签
段落和换行标签
文本格式化标签
`<div>` 和`<span>`标签
图像标签和路径
- 图像标签的其他属性
- 相对路径
- 绝对路径
- 代码示例
超链接标签
- 链接的语法格式
- 两个属性的作用如下
- 链接分类
- 代码示例
注释
特殊字符
表格标签
- 表格的基本语法
- 表格属性
- 代码示例
- 表格结构标签
- 合并单元格
- - 合并单元格方式
  - 目标单元格：(写合并代码)
  - 步骤
  - 代码示例
列表标签
- 无序列表
- - 基本语法格式
  - 代码示例
- 有序列表
- - 基本语法格式
  - 代码示例
- 自定义列表
- - 基本语法格式
  - 代码示例
表单标签
- 表单域
- - 基本语法格式
  - 常用属性
- `<input>`表单元素
- - 基本语法格式
  - type 属性的属性值及其描述如下
  - 除 type 属性外，`<input>`标签还有其他很多属性，其常用属性如下
- `<label>`标签
- - 基本语法格式
- `<select>`表单元素
- - 基本语法格式
- `textarea`表单元素
- - 基本语法格式
- 代码示例

CS架构与BS架构

在这里插入图片描述

浏览器内核

在这里插入图片描述

Web标准

主要包括结构（Structure）、表现（Presentation）和行为（Behavior）三个方面。

在这里插入图片描述

Web 标准提出的最佳体验方案：结构、样式、行为相分离。

简单理解：结构写到 HTML 文件中，表现写到 CSS 文件中，行为写到 JavaScript 文件中。

字符集

字符集 (Character set)是多个字符的集合。以便计算机能够识别和存储各种文字。

在标签内，可以通过标签的 charset 属性来规定 HTML 文档应该使用哪种字符编码。

<meta charset=" UTF-8" />

charset 常用的值有：GB2312 、BIG5 、GBK 和 UTF-8，其中 **UTF-8 **也被称为万国码，基本包含了全世界所

有国家需要用到的字符.

文档类型声明标签

在这里插入图片描述

<!DOCTYPE html>  //文档类型声明标签,告诉浏览器这个页面采取html5版本来显示页面
<html lang="en">  //告诉浏览器或者搜索引擎这是一个英文网站. 本页面采取英文来显示.
    //1. en定义语言为英语  2. zh-CN定义语言为中文
<head>
    <meta charset="UTF-8">  //采取 UTF-8来保存文字. 如果不写就会乱码.
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>公司简介</title>
</head>
<body>
    欢迎来到公司简介页面！！！！
</body>
</html>

文档类型声明，作用就是告诉浏览器使用哪种HTML版本来显示网页。

标题标签

HTML 提供了 6 个等级的网页标题即<h1>--------<h6>

h是单词 head 的缩写，意为头部、标题。

<h1>标题一共六级选,</h1>
<h2>文字加粗一行显。</h2>
<h3>由大到小依次减，</h3>
<h4>从重到轻随之变。</h4>
<h5>语法规范书写后，</h5>
<h6>具体效果刷新见。</h6>

在这里插入图片描述

段落和换行标签

在 HTML 标签中，<p>标签用于定义段落，它可以将整个网页分为若干个段落。

p是单词 paragraph [ˈpærəgræf] 的缩写，意为段落。

在 HTML 中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后才自动换行。如果希望

某段文本强制换行显示，就需要使用换行标签 <br>

br是单词 break 的缩写，意为打断、换行。

<h1>觉醒吧人们！</h1>
<p>在茫茫人海中，我们常常被生活的琐碎与平庸所困，日复一日地重复着相同的步伐，却忘记了内心深处那份对美好生活的渴望与追求。<br>
觉醒，不仅仅是对外界变化的一种敏锐感知，更是对自我内心的一次深刻审视。<br>
它意味着我们要从日常的麻木中挣脱出来，勇敢地面对自己的不足，积极地寻求成长与突破。<br>
只有当我们真正觉醒，才能以全新的视角审视世界，发现生活中被忽视的美好，让生命焕发出不一样的光彩。
</p>
<p>
    觉醒吧，人们！不要让生活的重担压垮了你的脊梁，也不要让内心的迷茫吞噬了你的梦想。在这个充满变数的时代，我们需要有更加坚定的信念和更加清晰的目标。觉醒意味着要敢于挑战自我，勇于走出舒适区，去探索未知的世界，去追寻属于自己的幸福与成功。只有当我们真正觉醒，才能以更加积极的态度面对生活中的挑战与困难，不断前行，不断超越，最终成就一番不凡的事业，实现自己的人生价值。
</p>

在这里插入图片描述

文本格式化标签

在这里插入图片描述

我是<strong>加粗</strong>的文字<br>
我是<em>斜体</em>的文字<br>
我是<b>加粗</b>的文字<br>
我是<del>删除</del>的文字<br>
我是<ins>下划线</ins>的文字<br>

在这里插入图片描述

`<div>` 和`<span>`标签

div 是 division 的缩写，表示分割、分区。span 意为跨度、跨距。

<div> 标签用来布局，但是现在一行只能放一个。大盒子
<span> 标签用来布局，一行上可以多个。小盒子

<div>我是一个div标签，我一个人单独占一行</div>123
<br>
<span>百度</span>
<span>新浪</span>
<span>搜狐</span>

在这里插入图片描述

图像标签和路径

img单词 image 的缩写，意为图像。

<img src="图像URL" />

src 是标签的必须属性，它用于指定图像文件的路径和文件名。

图像标签的其他属性

在这里插入图片描述

相对路径

以引用文件所在位置为参考基础，而建立出的目录路径。

这里简单来说，图片相对于 HTML 页面的位置

在这里插入图片描述

绝对路径

是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。

“D:\web\img\logo.gif”或完整的网络地址“http://www.itcast.cn/images/logo.gif”

代码示例

<h2>width给图像设置宽度，height给图像设置高度，border 给图像设置框</h2>
<img src="R-C.jpg" title="我是一棵树" width="200" height="200" border="10" />
<br>
<img src="images/图片1.png" width="200" />
<br>
<img src="C:\Users\user\Desktop\四大件和git\前端\前端代码练习\images\图片1.png" width="200" />
<br>

在这里插入图片描述

超链接标签

在 HTML 标签中，<a>标签用于定义超链接，作用是从一个页面链接到另一个页面。

链接的语法格式

<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a>

单词 anchor [ˈæŋkə®] 的缩写，意为：锚。

两个属性的作用如下

在这里插入图片描述

链接分类

外部链接: 例如 < a href="http:// www.baidu.com "> 百度。
内部链接:网站内部页面之间的相互链接. 直接链接内部页面名称即可，例如 < a href=“index.html”> 首页。
空链接: 如果当时没有确定链接目标时，< a href=“#”> 首页。
下载链接: 如果 href 里面地址是一个文件或者压缩包，会下载这个文件。
网页元素链接: 在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接.
锚点链接: 点我们点击链接,可以快速定位到页面中的某个位置.

代码示例

<h2>目录</h2>
1. 早年经历<br>
2. 演艺经历<br>
3. <a href="#live">主要作品</a><br>
4. 个人生活<br>
5. 获奖经历<br>

<h2>外部链接 _self 是在当前页面打开 _blank 是在新的窗口打开</h2>
<a href="http://www.baidu.com" target="_blank">百度</a>
<br>

<a href="company.html" target="_blank">点击，跳转公司简介页面</a>
<br>

<h2>空连接</h2>
<a href="#">点击，空连接</a>

<h2>下载链接：地址链接的是 文件 .exe或者是zip等压缩包形式</h2>
<a href="R-C.zip">下载文件</a>

<h2 id="live">主要作品</h2>
主要作品有：《红楼梦》、《三国演义》、《水浒传》、《西游记》
<br>

在这里插入图片描述

注释

<!-- 注释语句 -->     快捷键: ctrl +  /

特殊字符

在 HTML 页面中，一些特殊的符号很难或者不方便直接使用，此时我们就可以使用下面的字符来替代。

在这里插入图片描述

空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp格
<br>
&lt; p &gt;

在这里插入图片描述

表格标签

表格的基本语法

<table> </table> 是用于定义表格的标签。
<tr> </tr> 标签用于定义表格中的行，必须嵌套在标签中。
<td> </td> 用于定义表格中的单元格，必须嵌套在标签中。
字母 td 指表格数据（table data），即数据单元格的内容。
一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示.

<th>标签表示 HTML 表格的表头部分(table head 的缩写)

表格属性

在这里插入图片描述

代码示例

<!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>
    <table>
        <tr>
            <td>姓名</td>
            <td>性别</td>
            <td>年龄</td>
        </tr>
        <tr>
            <td>小奥</td>
            <td>男</td>
            <td>13</td>
        </tr>
        <tr>
            <td>小美</td>
            <td>女</td>
            <td>16</td>
        </tr>



        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td>小奥</td>
            <td>男</td>
            <td>13</td>
        </tr>
        <tr>
            <td>小美</td>
            <td>女</td>
            <td>16</td>
        </tr>
    </table>

    <table align="center" border="1" cellpadding="20" cellspacing="0" width="25" height="60">
        <tr>
            <td>姓名</td>
            <td>性别</td>
            <td>年龄</td>
        </tr>
        <tr>
            <td>小奥</td>
            <td>男</td>
            <td>13</td>
        </tr>
        <tr>
            <td>小美</td>
            <td>女</td>
            <td>16</td>
        </tr>

</body>
</html>

在这里插入图片描述

表格结构标签

<thead></thead>：用于定义表格的头部。内部必须拥有标签。一般是位于第一行。
<tbody></tbody>：用于定义表格的主体，主要用于放数据本体。

以上标签都是放在 <table></table>标签中。

<!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>
    <table border="1" align="center" cellpadding="20" cellspacing="0">
        <thead>
            <tr>
                <th>排名</th>
                <th>关键词</th>
                <th>趋势</th>
                <th>今日搜索</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>鬼吹灯</td>
                <td><a href="" </td>
                <td><img src="R-C.jpg" width="20"> </td>
            </tr>
        </tbody>
    </table>
</body>

</html>

在这里插入图片描述

合并单元格

合并单元格方式

跨行合并：rowspan=“合并单元格的个数”
跨列合并：colspan=“合并单元格的个数”

在这里插入图片描述

目标单元格：(写合并代码)

跨行：最上侧单元格为目标单元格, 写合并代码
跨列：最左侧单元格为目标单元格, 写合并代码

在这里插入图片描述

步骤

先确定是跨行还是跨列合并。
找到目标单元格. 写上合并方式 = 合并的单元格数量。比如：<td colspan=“2”></td>
删除多余的单元格。

代码示例

<!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>
    <table border="1" align="center" cellspacing="0" cellpadding="20">
        <tr>
            <td></td>
            <td colspan="2"></td>

        </tr>
        <tr>
            <td rowspan="2"></td>
            <td></td>
            <td></td>
        </tr>
        <tr>

            <td></td>
            <td></td>
        </tr>
    </table>
</body>

</html>

在这里插入图片描述

列表标签

无序列表

基本语法格式

<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
...
</ul>

无序列表的各个列表项之间没有顺序级别之分，是并列的。
<ul></ul> 中只能嵌套 <li></li>，直接在 <ul></ul>标签中输入其他标签或者文字的做法是不被允许的。
<li> 与</li> 之间相当于一个容器，可以容纳所有元素。
无序列表会带有自己的样式属性，但在实际使用时，我们会使用 CSS 来设置。

代码示例

<!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>
    <h4>你最喜欢的水果？</h4>
    <ul>
        <li>榴莲</li>
        <li>苹果</li>
        <li>香蕉</li>
    </ul>
</body>

</html>

在这里插入图片描述

有序列表

基本语法格式

<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
...
</ol>

<ol></ol>中只能嵌套<li></li>，直接在<ol></ol>标签中输入其他标签或者文字的做法是不被允许的。
<li> 与</li> 之间相当于一个容器，可以容纳所有元素。
有序列表会带有自己样式属性，但在实际使用时，我们会使用 CSS 来设置。

代码示例

<!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>
    <h4>粉丝排行榜</h4>
    <ol>
        <li>刘德华 10000</li>
        <li>刘若英 1000</li>
        <li>小韩 150</li>
    </ol>
</body>

</html>

在这里插入图片描述

自定义列表

基本语法格式

<dl>
    <dt>名词1</dt>
	<dd>名词1解释1</dd>
    <dd>名词1解释2</dd>
</dl>

<dl></dl> 里面只能包含<dt> 和 dd。
<dt> 和 <dd>个数没有限制，经常是一个<dt>对应多个<dd>。

代码示例

<!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>
    <dl>
        <dt>关注我们</dt>
        <dd>新浪微博</dd>
        <dd>官方微信</dd>
        <dd>联系我们</dd>
    </dl>
</body>

</html>

在这里插入图片描述

表单标签

在 HTML 中，一个完整的表单通常由表单域、表单控件（也称为表单元素）和提示信息3个部分构成。
在这里插入图片描述

表单域

表单域是一个包含表单元素的区域。

在 HTML 标签中，标签用于定义表单域，以实现用户信息的收集和传递。

会把它范围内的表单元素信息提交给服务器.

基本语法格式

<form action=“url地址” method=“提交方式” name=“表单域名称">
 各种表单元素控件
 </form>

常用属性

在这里插入图片描述

`<input>`表单元素

基本语法格式

<input type="属性值"  />

标签为单标签
type 属性设置不同的属性值用来指定不同的控件类型

type 属性的属性值及其描述如下

在这里插入图片描述

除 type 属性外，`<input>`标签还有其他很多属性，其常用属性如下

在这里插入图片描述

name 和value 是每个表单元素都有的属性值,主要给后台人员使用.
name 表单元素的名字, 要求 单选按钮和复选框要有相同的name值.
checked属性主要针对于单选按钮和复选框, 主要作用一打开页面,就要可以默认选中某个表单元素.
maxlength 是用户可以在表单元素输入的最大字符数, 一般较少使用.

`<label>`标签

基本语法格式

<label for="sex">男</label>
<input type="radio" name="sex"  id="sex" />

核心： 标签的 for 属性应当与相关元素的 id 属性相同。

<label> 标签为 input 元素定义标注（标签）。

<label>标签用于绑定一个表单元素, 当点击<label>标签内的文本时，浏览器就会自动将焦点(光标)转到或者

选择对应的表单元素上,用来增加用户体验.

`<select>`表单元素

基本语法格式

<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>

<select> 中至少包含一对<option>。
在<option>中定义 selected =“ selected " 时，当前项即为默认选中项。

`textarea`表单元素

基本语法格式

<textarea rows="3" cols="20">
    文本内容
</textarea>

通过<textarea> 标签可以轻松地创建多行文本输入框。
cols=“每行中的字符数” ，rows=“显示的行数”，我们在实际开发中不会使用，都是用 CSS 来改变大小。

代码示例

<!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>
    <form action="company.html" method="get">
        <!--  text 文本框 用户可以输入任何文字-->
        <label for="text">用户名：</label> <input type="text" name="username" value="请输入用户名" maxlength="6" id="text"> <br>
        <!-- password 密码框 用户看不见输入的密码-->
        密码：<input type="password" name="pwd"> <br>
        <!--  radio 单选按钮，可以实现多选-->
        <!--  name 是表单名字，这里性别单选按钮必须有相同的名字 name ,才可以实现多选1 -->
        <!--  单选框按钮和复选框可以设置checked属性，当页面打开时就可以默认选中这个按钮-->
        性别：男 <input type="radio" name="sex" value="男"> 女 <input type="radio" name="sex" value="女" checked="checked"><br>
        <!--  checkbox 多选按钮，可以实现多选-->
        爱好：吃饭 <input type="checkbox" name="hobby"> 睡觉 <input type="checkbox" name="hobby"> 打豆豆 <input type="checkbox"
            name="hobby"> <br>
        <input type="submit" value="免费注册">
        <input type="reset" value="重新填写">
        <!--  普通按钮button ，后期结合js使用-->
        <input type="button" value="获取短信验证码">
        <br>
        <!-- 文件域，使用场景，上传文件使用的-->
        上传头像：<input type="file">
        <br>
        籍贯：<select>
            <option>山东</option>
            <option>北京</option>
            <option selected>天津</option>
            <option>火星</option>
        </select>

        <br>
        今日反馈
        <textarea cols="50" row="5">
            爱你哦，小韩
        </textarea>
    </form>
</body>

</html>