HTML基础知识

介绍

        HTML（HyperText Markup Language，超文本标记语言）是一种用于创建网页的标准标记语言。它描述了一个网站的结构骨架，使得浏览器能够展示具有特定格式的文本、链接、图片和其他内容。以下是HTML的一些基础知识：

HTML文档结构

        一个基本的HTML文档结构如下：

<!DOCTYPE html>
<html>
<head><title>页面标题</title>
</head>
<body><!-- 网页内容 -->
</body>
</html>
  1. <!DOCTYPE html>：声明文档类型和HTML版本。
  2. <html>：根元素，包裹所有其他HTML元素。
  3. <head>：头部元素，包含元信息，如页面标题、字符编码声明、样式表链接、脚本链接等。
  4. <title>：定义浏览器工具栏的标题。
  5. <body>：主体元素，包含可见的页面内容。

基本标签

        以下是一些常用的HTML标签：

  • <h1>至<h6>：标题标签，<h1>表示最高的标题级别，<h6>表示最低的。
  • <a>：锚标签，用于创建超链接。
  • <img>：图像标签，用于嵌入图片。
  • <div>：独占一行，宽度默认为父类元素的宽度，高度默认由内容撑开，可设置宽高
  • <span>：一行可有多个，宽高都默认由内容撑开，不可设置宽高
  • <ul>、<ol>、<li>：无序列表、有序列表和列表项标签。
  • <table>、<tr>、<td>：表格、表格行和表格单元格标签。
  • <hr>：水平分割线

属性

        HTML元素可以拥有属性，提供元素的额外信息。属性通常在开始标签中定义，如：

  1. href：在<a>标签中定义链接地址。
  2. src：在<img>标签中定义图片源地址。
  3. alt：在<img>标签中定义图片无法显示时的替代文本。
  4. class：定义元素的类名，用于CSS样式应用。
  5. id：定义元素的唯一ID，可用于JavaScript或作为锚点。

例子

        以下是一个简单的HTML文档示例：

<!DOCTYPE html>
<html>
<head><title>简单的HTML页面</title>
</head>
<body><h1>欢迎来到我的网站</h1><p>这是一个段落。</p><a href="https://www.example.com">这是一个链接</a><img src="image.jpg" alt="描述图片内容" width="100" height="100"></body>
</html>

注意事项

  1. 标签和属性名称是大小写不敏感的，但建议使用小写以保持一致性。
  2. 属性值应该用双引号或单引号括起来。
  3. 确保每个开始标签都有一个对应的结束标签。
  4. 每次编写完文件后需保存后再运行，若未保存标签页最右方会出现圆点

文本格式

        HTML提供了多种标签来格式化文本：

  • <strong> 或 <b>：定义粗体文本。
  • <em> 或 <i>：定义斜体文本。
  • <del>：定义被删除的文本。
  • <ins>：定义被插入的文本。
  • <sub>：定义下标文本。
  • <sup>：定义上标文本。
  • <p>：段落标签。

图片

        使用<img>标签来嵌入图片，src属性定义图片的路径，有两种路径写法

1、绝对路径
        本地路径：写入文件在此电脑的存储路径
        网络路径：右键-在新标签页打开图片-复制网址(需联网)

2、相对路径
        ./：当前目录，这时./可省略
        ../：上一级目录，不可省略

        alt属性提供图片无法显示时的替代文本，width可为具体的像素值，也可为百分数，表占当前页面的百分比

<img src="image.jpg" alt="这是一张图片" width="150">

视频/音频 

在 HTML 中，你可以使用 <video> 标签来嵌入视频。

<video width="320" height="240" controls><source src="vedio/aaa.mp4" type="video/mp4">
</video>

在这个例子中：

  • width 和 height 属性设置了视频播放器的大小，一般只需调整一项，另一项会自动缩放。
  • controls 属性添加了浏览器默认的视频控件，如播放、暂停、音量控制等。
  • <source> 标签指定了视频文件的路径（src）和类型（type）。

添加可选属性

  • autoplay: 视频在就绪后马上播放。
  • loop: 视频在结束时重新开始播放。
  • muted: 视频默认静音。
  • poster: 视频加载时显示的图像，通常为视频的封面或预览图。
<video width="320" height="240" controls autoplay loop muted poster="poster.jpg"><source src="movie.mp4" type="video/mp4">
</video>

        添加音频的规则也同样适用 

列表

        HTML支持有序列表、无序列表和定义列表：

无序列表 (<ul>):

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

有序列表 (<ol>):

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

定义列表 (<dl>):

<dl><dt>术语</dt><dd>定义描述</dd><dt>术语2</dt><dd>定义描述2</dd>
</dl>

表格

        使用<table>标签创建表格，可包含多个<tr>，border为边框宽度，width为表格宽度，cellspacing为单元格之间的空间；
        <tr>定义行，可包含多个<th>或<td>；
        <th>定义表头，<td>定义单元格，可包含内容：

<table border="1pxz" cellspacing="0" width="600px"><tr><th>表头1</th><th>表头2</th></tr><tr><td>行1列1</td><td>行1列2</td></tr>
</table>

表单

        使用<form>标签创建表单用于收集用户输入，且提交的数据必须含有name属性。基本结构：

<form action="/submit-form" method="post"><label for="name">姓名:</label><input type="text" id="name" name="name"><input type="submit" value="提交">
</form>
  • action：定义表单数据向何处提交的URL，默认为当前界面
  • method：定义表单数据发送方法（默认为get）。
    • get：在url后拼接表单数据，如?name=123&age=123，url长度有限制
    • post：在请求体中携带，无大小限制
  • <input>：定义输入字段。通过type属性控制输入形式
    • text：输入文本
    • password：输入密码，不可见
    • radio：单选框，只能选中一个，搭配label时点击描述文字也可选中，同时name属性必须相同
    • checkbox：复选框，等同于单选框，但可选择多个
    • file：点击上传文件
    • date/time/datetime-local：点击选择日期/时间/日期和时间
    • number：只能输入数字
    • email：要求包含@，为邮箱格式
    • hidden：隐藏域，不显示，但会提交数据
    • submit/reset/button：提交/重置/按钮，按钮需搭配使用
  • <select>：定义下拉列表，如果某个选项添加了selected属性，这个选项会被预选中
  • <label>：定义输入字段的说明。
  • <textarea>：定义文本域 
    <!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>AAA专业苏打饼干打孔</title>
</head><body><form action="" method="post">姓名：<input type="text" name="name"><br><br>密码：<input type="password" name="password"><br><br>性别：<label><input type="radio" name="gander" value="1">男</label><label><input type="radio" name="gander" value="1">女</label><br><br>爱好：<label><input type="checkbox" name="hobby" value="唱">唱</label><label><input type="checkbox" name="hobby" value="跳">眺</label><label><input type="checkbox" name="hobby" value="rap">rap</label><br><br>图像：<input type="file" name="image"><br><br>生日：<input type="date" name="birthday"><br><br>时间：<input type="time" name="time"><br><br>日期时间：<input type="datetime-local" name="datetime"><br><br>邮箱：<input type="email" name="email"><br><br>年龄：<input type="number" name="age"><br><br>学历：<select name="学历"><option value="" selected>请选择</option><option value="1">大专</option><option value="2">本科</option><option value="3">博士</option><option value="4">硕士</option></select><br><br>描述：<textarea name="description" cols="30" rows="10"></textarea><br><br><input type="hidden" name="id" value="1"><input type="button" value="按钮"><input type="reset" value="重置"><input type="submit" value="提交"></form>
</body>
</html>

块级元素与内联元素

  • 块级元素（如<div>、<p>、<h1>-<h6>、<ul>、<ol>、<table>等）通常开始新的一行，并占据整个容器宽度。
  • 内联元素（如<span>、<a>、<img>、<strong>等）通常不会开始新的一行，只占据必要的宽度。
  • 颜色：共三种表达方式1、英文颜色名color:red。2、rgb值color:rgb(255,0,0)。3、十六进制共六位，每两位表一个rgb值，每两位相同的话则可只写一个color:#ff0000等同于color:#f00 

引入CSS

CSS样式

        在HTML中，布局通常是通过使用CSS（层叠样式表）来实现的。而引入css的方法共有三种

在 HTML 页面中引入 CSS 样式的常见方法有以下三种：

行内样式(内联样式)

        内联样式是将 CSS 属性直接定义在 HTML 元素的 style 属性中。这种方法适用于对单个元素进行快速样式定制。

<p style="color: blue; font-size: 16px;">这是一个蓝色的段落。</p>

内嵌样式(内部样式表)

        内部样式表是将 CSS 代码放在 HTML 文档的 <head> 部分的 <style> 标签内。这种方法适用于对单个页面应用样式。

<!DOCTYPE html>
<html>
<head><style>body {background-color: lightgrey;}p {color: green;font-size: 20px;}</style>
</head>
<body><p>这是一个绿色的段落。</p>
</body>
</html>

外联样式(外部样式表)

        外部样式表是将 CSS 代码保存在一个独立的 .css 文件中，然后在 HTML 文档的 <head> 部分通过 <link> 标签引入。这种方法适用于对多个页面应用统一的样式。

        首先，创建一个 CSS 文件，例如 styles.css：

/* styles.css */
body {background-color: lightblue;
}
p {color: red;font-size: 18px;
}

        然后，在 HTML 文档中引入这个 CSS 文件：

<!DOCTYPE html>
<html>
<head><link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body><p>这是一个红色的段落。</p>
</body>
</html>

        每种方法都有其适用场景，通常推荐使用外部样式表，因为它有助于维护和重用样式代码，同时保持 HTML 文档的结构清晰。

CSS选择器

        CSS常用的选择器共三种：

1、元素选择器：选择所有相同类型的元素。

span {color: blue; 
}

2、类选择器：选择具有特定类的所有元素。

.myClass {color: green; 
}

 3、ID选择器：选择具有特定ID的元素。

#myId {color: red; 
}

        同时他们的优先级也不同，ID选择器>类选择器>元素选择器，如果一个元素同时被这三个选择器选中，则有冲突的内容按优先级生效，无冲突的内容直接生效。

字体格式

        在html中，首行缩进、字体样式等格式都需在css中定义，直接输入空格或换行会被忽略，但可使用 &nbsp 来代表空格

首行缩进

        text-indent: 30px;

字体格式        

        斜体：font-style: 设置文本的斜体样式，通常有 normal正常, italic斜体, oblique仿斜。

        字体下划线：text-decoration:设置或删除文本的装饰线 none: 无装饰线、underline: 下划线、overline: 上划线、line-through: 删除线。

对齐方式

text-align: 控制块级元素内部文本的水平对齐方式。以下是常用的值：

  • text-align: 控制块级元素内部文本的水平对齐方式。以下是常用的值：
  • left: 左对齐。
  • right: 右对齐。
  • center: 居中对齐。
  • justify: 两端对齐（调整单词间距使文本左右两边对齐）。

超链接

一个超链接通常由以下三部分组成：

  1. 锚点（Anchor）元素：在HTML中，超链接是通过<a>元素创建的，<a>是"anchor"的缩写。
  2. 目标地址（HREF）：这是<a>元素的一个属性，用来指定链接的目标地址。
  3. 链接文本或图像：这是用户看到并点击的部分，可以是文字或图像。

基本语法

<a href="url">链接文本</a>

        使用<a>标签创建链接，其中href属性指定链接的目标地址：

内部链接：指向同一网站内的其他页面。

<a href="about.html">关于我们</a>

打开方式

  • target：指定在何处打开链接。

    • _self：默认值，在当前页面中打开链接。
    • _blank：在新窗口或标签页中打开链接。

  • title：提供链接的额外信息，当鼠标悬停在链接上时显示。

例:

<a href="https://www.example.com" target="_blank" title="预显示内容">访问示例网站</a>

        在这个例子中，点击链接将会在一个新的浏览器标签页中打开https://www.example.com，并且当用户将鼠标悬停在链接上时，会显示“预显示内容”的提示。

 链接也可以指向页面内的特定部分，使用id属性：

<a href="#section1">跳转到页面内的第1节</a>
...
<h2 id="section1">第1节</h2>

        超链接默认的样式为蓝色字体加下划线，我们可以在样式中设置text-decoration: none;来取消下划线，并依据需要更改字体颜色

盒子

        "盒子"指CSS盒子模型（Box Model），这是CSS布局的基础。盒子模型描述了如何计算一个元素的总宽度和高度。下面我将从基础开始，讲解前端的盒子模型。

组成部分

一个CSS盒子由以下几个部分组成：

  • 内容（Content）：元素的实际内容，比如文本、图片等。
  • 内边距（Padding）：内容周围的空白区域，位于内容和边框之间。
  • 边框（Border）：围绕内容和内边距的线条。
  • 外边距（Margin）：边框外的空白区域，用于与其他元素隔开。

模型属性 

  • width 和 height：设置内容区域的宽度和高度。
  • padding：设置内边距的宽度。
  • border：设置边框的宽度、样式和颜色。
  • margin：设置外边距的宽度。

        可以分别设置四个方向的属性（border-top、border-right、border-bottom、border-left），或者使用简写属性border。

  • margin: 10px 20px 30px 40px;分别控制上右下左
  • margin: 10px 20px 30px;上为10px、左右为20px、下为30px
  • margin: 10px 20px;上下为10px、左右为20px
  • margin: 10px;四个边距均为10px

        

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/447975.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

骨传导耳机哪个牌子好？自费测评5大爆款骨传导耳机，高能不断！

骨传导耳机哪个牌子好？自费测评5大爆款骨传导耳机，高能不断！

随着科技的飞速发展&#xff0c;耳机市场也迎来了一次又一次的革新。从有线到无线&#xff0c;从入耳式到头戴式&#xff0c;每一次技术的突破都为用户带来了全新的听觉体验。近年来&#xff0c;骨传导耳机以其独特的传声方式和健康舒适的佩戴体验&#xff0c;逐渐成为运动爱好…
阅读更多...
初识Linux之指令（二）

初识Linux之指令（二）

一&#xff1a;head指令 head 与 tail 就像它的名字一样的浅显易懂&#xff0c;它是用来显示开头或结尾某个数量的文字区块&#xff0c;head 用来显示档案的 开头至标准输出中&#xff0c;而 tail 想当然尔就是看档案的结尾。 语法&#xff1a;head 【参数】 【文件】 功能&…
阅读更多...
docker (desktopcompose) download

docker (desktopcompose) download

docker docker-compose download 百度网盘获取离线包链接release-notes 参考dockerdocker-composewlspowershell
阅读更多...
Loss：Objects as Points

Loss：Objects as Points

目录 3. 预备知识4. 物体作为点4.1. 3D 检测4.2. 人体姿态估计4-(1). 物体作为点的核心概念4-(2). 从点到边界框的推理过程4-(3). 3D 检测4-(4). 人体姿态估计5. 实现细节目录 3. 预备知识4. 物体作为点4.1. 3D 检测4.2. 人体姿态估计4-(1). 物体作为点的核心概念4-(2). 从点到…
阅读更多...
微知-Mellanox提供的一个不错的测试rdma_cm方式建链的工具软件ucmatose？(ucmatose； ucmatose -s 1.1.1.1)

微知-Mellanox提供的一个不错的测试rdma_cm方式建链的工具软件ucmatose？(ucmatose； ucmatose -s 1.1.1.1)

文章目录 快速命令获取背景实验server端客户端一个错误的情况无法建链&#xff1a; rpm安装包&#xff1a;librdmacm-utils-48.0-1.0.1.an8.x86_64详细介绍综述 快速命令获取 #server端 ucmatose# client端 ucmatose -s 1.1.1.1背景 平时使用rdma cm建链的测试一般使用ib_wri…
阅读更多...
算法：974.和可以被K整除的子数组

算法：974.和可以被K整除的子数组

题目 链接:leetcode链接 思路分析&#xff08;前缀和 同余定理&#xff09; 首先&#xff0c;我们要了解一下什么是同余定理 同余定理&#xff1a; 如果&#xff08;a - b&#xff09;/ p k …… 0 则 a % p b % p 证明我写在草稿纸上&#xff0c;如下图&#xff1a; 初…
阅读更多...
Ubuntu QT 交叉编译环境搭建

Ubuntu QT 交叉编译环境搭建

文章目录 下载安装qtCreatornot a valid identifier 的错误 安装g下载并安装交叉编译器下载交叉编译器安装交叉编译器 下载编译 ARM 的Qt平台源码配置arm的QT平台 下载安装qtCreator 去QT下载官网下载对应需要的QT软件。 这里下载5.12.96版本的 改变安装包权限&#xff0c;…
阅读更多...
红海云首届粤港澳大湾区人力资源服务创新创业大赛斩获殊荣

红海云首届粤港澳大湾区人力资源服务创新创业大赛斩获殊荣

10月11日&#xff0c;由广东省人力资源和社会保障厅、广州市人民政府主办&#xff0c;广州市人力资源和社会保障局承办的“首届粤港澳大湾区人力资源服务创新创业大赛”决赛落下帷幕&#xff0c;红海云凭借领先的HR数字化产品创新实践斩获大赛三等奖。 本次大赛以“激活人力创…
阅读更多...
21c RAC CLSRSC-143 CLSRSC-150 crsgpnp.pm line 2063

21c RAC CLSRSC-143 CLSRSC-150 crsgpnp.pm line 2063

CLSRSC-143:Failed to create a peer profile for Oracle Cluster gpnp using ‘gpnptool’(error code 1) 21c RAC GI安装时&#xff0c;在跑root.sh时报错如下&#xff1a; 查看了下crsgpnp.pm line 2063为如下原代码 第一感觉是主机名太长了&#xff0c;将主机名缩减后…
阅读更多...
基础IO -- 理解文件（1）

基础IO -- 理解文件（1）

目录 一&#xff1a;回顾文件 二&#xff1a;加深对文件的理解 1.概念 2.以w写方式打开 3.以a追加方式打开 4.重定向 一&#xff1a;回顾文件 以前学习过在C语言中的文件操作&#xff0c; 但那根本是不足以理解文件的&#xff0c;即站在语言角度是不可能理解文件的 我们要…
阅读更多...
3. 单例模式唯一性问题—构造函数

3. 单例模式唯一性问题—构造函数

1. 构造函数带来的唯一性问题指什么&#xff1f; 对于不继承MonoBehaviour的单例模式基类 我们要避免在外部 new 单例模式类对象 例如 &#xff08;完整单例模式定义在上一节&#xff09; public class Main : MonoBehaviour {void Start(){// 破坏单例模式的唯一性&#xf…
阅读更多...
电能表预付费系统-标准传输规范(STS)（6）

电能表预付费系统-标准传输规范(STS)（6）

6. POSToTokenCarrierInterface 应用层协议 6.1 APDU: ApplicationProtocolDataUnit 应用协议数据单元 6.1 .1 Data elements in the APDU The APDU is the data interface between the POSApplicationProcess and the application layer protocol and comprises the data e…
阅读更多...
新装ubuntu22.04必做两件事，不然可能没法用

新装ubuntu22.04必做两件事，不然可能没法用

一、换服务源 在全部里面找到软件和安装&#xff1b;打开后 在更多里面匹配一下最适合自己的软件源&#xff1b;这个过程比较漫长&#xff1b;要耐心等待 二、换软件安装中心 先执行&#xff1a; sudo apt upgrade 后执行&#xff1a; sudo apt install plasma-discover…
阅读更多...
Rust默认使用UTF-8编码来解析源代码文件。如果在代码中包含无法用UTF-8编码表示的字符，编译器会报错！

Rust默认使用UTF-8编码来解析源代码文件。如果在代码中包含无法用UTF-8编码表示的字符，编译器会报错！

文章目录 Rust默认编码示例在ANSI编码下中文显示正常的代码在UTF-8编码下将显示不正常在编译时&#xff0c;Rust使用UTF-8编码来解析代码&#xff0c;发现无法用UTF-8编码表示的字符&#xff0c;于是编译器报错 Rust默认编码 Rust 语言默认使用 UTF-8 编码来解析源代码文件。如…
阅读更多...
免费Excel工作表同类数据合并工具

免费Excel工作表同类数据合并工具

下载地址&#xff1a;https://pan.quark.cn/s/81b1aeb45e4c 在 Excel 表格里&#xff0c;当我们试图手动将多行同类数据合并为一行时&#xff0c;会遭遇诸多棘手的困难以及繁杂的操作流程。在确定哪些数据属于可合并的同类数据时&#xff0c;单纯依靠人工进行对比&#xff0c;极…
阅读更多...
10.12学习日志

10.12学习日志

一.期望与方差 接上篇 2.方差 方差是统计学中一个重要的概念&#xff0c;用于衡量随机变量或一组数据的离散程度。它反映了数据点与其平均值之间的偏离程度。方差越大&#xff0c;数据点越分散&#xff1b;方差越小&#xff0c;数据点越集中。 对于一个随机变量 X&#xff…
阅读更多...
JavaSE——集合7：Set接口实现类—TreeSet

JavaSE——集合7：Set接口实现类—TreeSet

目录 一、TreeSet基本介绍 二、TreeSet核心方法 三、TreeSet排序方法 四、TreeSet源码解析 1.无参构造时&#xff0c;底层是创建TreeMap对象 2.有参构造时&#xff0c;底层也创建TreeMap对象 3.执行add方法 4.执行put方法 一、TreeSet基本介绍 TreeSet是 Java 集合框架…
阅读更多...
【报错解决】安装scikit-rebate包报错

【报错解决】安装scikit-rebate包报错

scikit-rebate ReBATE是一套基于Relief的机器学习特征选择算法 报错信息 解决方案 conda install numpy scipy scikit-learnpip install skrebate依次运行以上两步&#xff0c;即可成功安装&#xff01;
阅读更多...
QT的核心机制 对话框资源

QT的核心机制 对话框资源

案例 1、键盘按下w&#xff0c;s&#xff0c;a&#xff0c;d键分别为标签向上&#xff0c;下&#xff0c;左&#xff0c;右移动 鼠标按下获取本地坐标&#xff0c;全局坐标 鼠标双击获取本地坐标&#xff0c;全局坐标 鼠标移动获取本地坐标&#xff0c;全局坐标 让鼠标跟踪…
阅读更多...
leetcode128最长连续序列 golang版

leetcode128最长连续序列 golang版

题目描述 题目&#xff1a;给定一个未排序的整数数组 nums 找出数字连续的最长序列&#xff0c;不要求序列 元素在原数组中连续 的长度 请你设计并实现时间复杂度为On的算法解决此问题 示例 1&#xff1a; 输入&#xff1a;nums [100,4,200,1,3,2] 输出&#xff1a;4 解释&…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023