2：html：基础语法2

news2024/11/16 4:03:00

目录

2.1图像的一些注意点

2.2表格

2.2.1基本的表格

2.2.2表头与边框

2.3列表

2.3.1无序列表

2.3.2有序列表

2.4块

2.4.1块级元素

2.4.2内联元素

2.1图像的一些注意点

在上一篇中，我们已经知道了怎么样去将图片运用到我们的网站中，但是这里还是有一些特殊情况的，比如说浏览器打不开图片，怎么办？

在上次的那个代码中有一个alt

<html>
<body>
<title> Charles Wesley</title>
<h1>周深</h1>
<p>一个非常优秀的歌手</p>
<a href="https://baike.baidu.com/item/%E5%91%A8%E6%B7%B1/15089196">这个是他的介绍</a>
<a href="https://www.duitang.com/blog/?id=1333702828">
    <img src="https://c-ssl.duitang.com/uploads/blog/202104/05/20210405194705_65f81.thumb.1000_0.jpg" alt="周深"> 
</a>
<hr>
<!-- 不重要的注释 -->
</body>
</html>

在我img 最后写到 alt的时候，就是为了防止我浏览器读取不了照片导致访问者并不知道这个是个啥，所以替换文本属性（alt）可告诉读者他们失去的信息（这个照片的内容是啥）。此时，浏览器将显示这个文本。

2.2表格

其实如果我们以做一个网页为这个专栏最后一个目标的话，现在的网页还是比较难以评论的，还是非常简陋。

2.2.1基本的表格

我们继续以介绍周深来举例子的话，我们需要一个表格来介绍他的歌曲。

表格由 <table> 标签来定义，表格有多少行，用<tr>表示，而有多少个格子由<td>

举个例子：

<html>
<body>
<title> Charles Wesley</title>
<h1>周深</h1>
<p>一个非常优秀的歌手</p>
<a href="https://baike.baidu.com/item/%E5%91%A8%E6%B7%B1/15089196">这个是他的介绍</a>

<hr>
<table>
    <tr>
        <td>《和平颂》</td>
        <td>《起风了》</td>
        <td>《大鱼》</td>
    </tr>
    <tr>
        <td> 2024</td>
        <td> 2020</td>
        <td> 2016</td>
    </tr>
</table>
<!-- 不重要的注释 -->
</body>
</html>

可以看到其他的上面是一样的，在<table>中是新的，代表是一张表格，然后<tr>代表是一行，<td>是一行中的一个个模块，然后第二个<tr>指的是第二行的内容，结果就是如下

2.2.2表头与边框

可以看到了这个表格，但是这个表格有点简陋，而且歌名与时间没有对应。还有没有我们经常用的边框，与表头。所以我们继续改进。

首先，表头的话是使用标签<th>，但是他同样也是一行，所以表头，应该在<tr>下面，也就是说，要先创建一个行，然后再写自己想要的表头。如果你使用表头<th>的话，浏览器会帮你的字体加粗的

<html>
<body>
<title> Charles Wesley</title>
<h1>周深</h1>
<p>一个非常优秀的歌手</p>
<a href="https://baike.baidu.com/item/%E5%91%A8%E6%B7%B1/15089196">这个是他的介绍</a>

<hr>
<table>
    <tr>
        <th>歌曲1</th>
        <th>歌曲2</th>
        <th>歌曲3</th>
    </tr>
    <tr>
        <td>《和平颂》</td>
        <td>《起风了》</td>
        <td>《大鱼》</td>
    </tr>
    <tr>
        <td> 2024</td>
        <td> 2020</td>
        <td> 2016</td>
    </tr>
</table>
<!-- 不重要的注释 -->
</body>
</html>

结果是这样的：

如果你还想要一个边框

<html>
<body>
<title> Charles Wesley</title>
<h1>周深</h1>
<p>一个非常优秀的歌手</p>
<a href="https://baike.baidu.com/item/%E5%91%A8%E6%B7%B1/15089196">这个是他的介绍</a>

<hr>
<table border="1">
    <tr>
        <th>歌曲1</th>
        <th>歌曲2</th>
        <th>歌曲3</th>
    </tr>
    <tr>
        <td>《和平颂》</td>
        <td>《起风了》</td>
        <td>《大鱼》</td>
    </tr>
    <tr>
        <td> 2024</td>
        <td> 2020</td>
        <td> 2016</td>
    </tr>
</table>
<!-- 不重要的注释 -->
</body>
</html>

在这里添加了一个参数，border="1"，这个加上之后表格就有边框了

2.3列表

列表分为有序列表与无序列表

2.3.1无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

无序列表一般使用<ul>表示，在列表中由一个一个数据，每一行是由<li>来标记

<html>
<body>
<title> Charles Wesley</title>
<h1>周深</h1>
<p>一个非常优秀的歌手</p>
<a href="https://baike.baidu.com/item/%E5%91%A8%E6%B7%B1/15089196">这个是他的介绍</a>

<hr>
<table border="1">
    <tr>
        <th>歌曲1</th>
        <th>歌曲2</th>
        <th>歌曲3</th>
    </tr>
    <tr>
        <td>《和平颂》</td>
        <td>《起风了》</td>
        <td>《大鱼》</td>
    </tr>
    <tr>
        <td> 2024</td>
        <td> 2020</td>
        <td> 2016</td>
    </tr>
</table>
<ul>
    <li>他的作品</li>
    <li>他喜欢的东西</li>
</ul>
<!-- 不重要的注释 -->
</body>
</html>

你可以看一下

这个就是无序列表

2.3.2有序列表

有序列表使用<ol>进行表示，有序就是有顺序，并且是有顺序的（同样行都是使用<li>)进行的


<html>
<body>
<title> Charles Wesley</title>
<h1>周深</h1>
<p>一个非常优秀的歌手</p>
<a href="https://baike.baidu.com/item/%E5%91%A8%E6%B7%B1/15089196">这个是他的介绍</a>

<hr>
<table border="1">
    <tr>
        <th>歌曲1</th>
        <th>歌曲2</th>
        <th>歌曲3</th>
    </tr>
    <tr>
        <td>《和平颂》</td>
        <td>《起风了》</td>
        <td>《大鱼》</td>
    </tr>
    <tr>
        <td> 2024</td>
        <td> 2020</td>
        <td> 2016</td>
    </tr>
</table>
<ul>
    <li>他的作品</li>
    <li>他喜欢的东西</li>
</ul>
<ol>
    <li>2016作品</li>
    <li>2017作品</li>
</ol>
<!-- 不重要的注释 -->
</body>
</html>

那打印出来就是关于

2.4块

块级元素与内联元素，他们让之前学的标签都连接起来。

2.4.1块级元素

块级元素，比如<div>没有啥含义，但是你写了就代表是分成了一个块，（他的主要用处就是将几个容器连接起来）

这个就是我的主页面中我的头像，你看到还有之前学的照片的运用方式，同样，在网页中，我们习惯性的将他分成一个一个块，然后每一个快都是用<div>的标签进行操作

右边的专栏是右键，加上检查，然后就能跳出来这个了。

2.4.2内联元素

内联元素就可以比作容器，将几个标签连接起来，<span> 元素是内联元素，可用作文本的容器

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

荣耀Magicbook x14 扩容1TB固态

荣耀Magicbook x14 扩容1TB固态

版权归作者所有&#xff0c;如有转发&#xff0c;请注明文章出处&#xff1a;https://cyrus-studio.github.io/blog/ 固态硬盘规格 在官网查看加装固态硬盘的接口规格 https://www.honor.com/cn/laptops/honor-magicbook-x14-2023/ https://club.honor.com/cn/thread-2847379…
阅读更多...
XYplorer v26.30.0200绿色版

XYplorer v26.30.0200绿色版

软件介绍 XYplorers是一款多标签文件管理器&#xff0c;支持多标签页栏&#xff0c;浏览文件管理时就跟使用Chrome之类的浏览器感觉一般&#xff0c;从浏览方便性&#xff0c;和切换滑顺程度&#xff0c;要比原本Windows10的Explorer文件管理器要得多。可以大部分程度上替代系…
阅读更多...
树莓派5环境配置笔记 新建虚拟python环境—安装第三方库—配置Thonny解释器

树莓派5环境配置笔记 新建虚拟python环境—安装第三方库—配置Thonny解释器

树莓派5虚拟环境配及第三方库的安装&#x1f680; 在完成了树莓派的系统下载和各项基础配置之后进入到了&#xff0c;传感器开发部分&#xff0c;在测试传感器开发之前我打算先安装一下自己需要的库&#xff0c;但是在我直接在系统的根目录下运行pip命令的时候总会报环境错误&a…
阅读更多...
sudo执行带重定向命令时仍提示无权限：Permission denied问题详解以及linux里的更高效下载命令mwget安装和使用效率对比

sudo执行带重定向命令时仍提示无权限：Permission denied问题详解以及linux里的更高效下载命令mwget安装和使用效率对比

一、sudo执行带重定向命令时仍提示无权限&#xff1a;Permission denied问题详解 小问题&#xff0c;在此记录一下&#xff0c;有时在shell下执行命令重定向到文件时提示无权限-bash: temp_20181015.log: Permission denied&#xff0c;而且加sudo执行依提示无权限&#xff0c;…
阅读更多...
CDD数据库文件制作（四）——Data Type（0x22/0x2E）

CDD数据库文件制作（四）——Data Type（0x22/0x2E）

文章目录 1、新建Data Type步骤2、Data Types类型2.1 raw value2.1.1 ASCII读取和写入：零件号…2.1.2 “多字节的十六进制” 读取和写入：密钥，种子…2.1.3 “多字节的十进制” 读取和写入：参数标定和显示2.2 text table2.3 Linear2.3.1 分辨率和偏移量非1和0的读取和写入2.…
阅读更多...
linux:进程优先级、环境变量、地址空间

linux:进程优先级、环境变量、地址空间

进程优先级 什么叫进程优先级&#xff1f; 进程优先级是指进程获取某些资源的先后顺序 上文中的task_struct&#xff0c;也叫进程控制块&#xff08;PCB&#xff09;&#xff0c;本质上是结构体&#xff0c;我们的优先级就被写在结构体里面&#xff08;内部字段&#xff09;…
阅读更多...
Python | Leetcode Python题解之第345题反转字符串中的元音字母

Python | Leetcode Python题解之第345题反转字符串中的元音字母

题目&#xff1a; 题解&#xff1a; class Solution:def reverseVowels(self, s: str) -> str:def isVowel(ch: str) -> bool:return ch in "aeiouAEIOU"n len(s)s list(s)i, j 0, n - 1while i < j:while i < n and not isVowel(s[i]):i 1while j …
阅读更多...
模型 神经网络（通俗解读）

模型 神经网络（通俗解读）

系列文章 分享 模型&#xff0c;了解更多&#x1f449; 模型_思维模型目录。仿脑智能&#xff0c;深度学习&#xff0c;精准识别。 1 神经网络的应用 1.1 鸢尾花分类经典问题 神经网络的一个经典且详细的经典应用是鸢尾花分类问题 。主要是通过构建一个神经网络模型来自动区分…
阅读更多...
【数学建模备赛】Ep04：假设性检验

【数学建模备赛】Ep04：假设性检验

文章目录 一、前言&#x1f680;&#x1f680;&#x1f680;二、假设性检验&#xff1a;☀️☀️☀️1. 整体步骤2. 例子① 确定原假设和备择假设② 根据要检测的量构造一个分布③ 画出分布的概率密度图④ 给出一个置信水平β⑤ 最常见的置信水平&#xff08;95 %&#xff09;⑥…
阅读更多...
Java流程控制07：嵌套for循环

Java流程控制07：嵌套for循环

本节教学视频链接&#xff1a;https://www.bilibili.com/video/BV12J41137hu?p41&vd_sourceb5775c3a4ea16a5306db9c7c1c1486b5https://www.bilibili.com/video/BV12J41137hu?p41&vd_sourceb5775c3a4ea16a5306db9c7c1c1486b5 在Java中&#xff0c;‌嵌套for循环是指将…
阅读更多...
Linux之HTTP服务器的构建

Linux之HTTP服务器的构建

欢迎诸位来阅读在下的博文~ 在这里&#xff0c;在下会不定期发表一些浅薄的知识和经验&#xff0c;望诸位能与在下多多交流&#xff0c;共同努力! 江山如画&#xff0c;客心如若&#xff0c;欢迎到访&#xff0c;一展风采 文章目录 参考环境参考书籍一、HTTP的工作原理1. 建立连…
阅读更多...
k8s查看容器的日志

k8s查看容器的日志

查询运行容器命令&#xff1a;kubectl get po -n pro 如果想查看cams系统&#xff0c;那么执行命令&#xff1a; kubectl logs pro -f -n pro &#xff08;容器名称&#xff09;|more
阅读更多...
【HarmonyOS】端云一体化初始化项目

【HarmonyOS】端云一体化初始化项目

简介 端云一体化开发是HarmonyOS对云端开发的支持、实现端云联动。云开发服务提供了云函数、云数据库、云存储等服务&#xff0c;可以使开发者专注于应用的业务逻辑开发&#xff0c;无需关注基础设施&#xff0c;例如&#xff1a;服务器、操作系统等问题。 因此&#xff0c;…
阅读更多...
CentOS下分布式消息系统kafka的安装和使用

CentOS下分布式消息系统kafka的安装和使用

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前沿一、Windows主机&#xff08;G:\share&#xff09;和Linux虚拟机&#xff08;/mnt/hgfs/share&#xff09;之间文件共享1.添加Windows主机的路径2.linux安装VMw…
阅读更多...
比特位的计算

比特位的计算

给你一个整数 n &#xff0c;对于 0 < i < n 中的每个 i &#xff0c;计算其二进制表示中 1 的个数 &#xff0c;返回一个长度为 n 1 的数组 ans 作为答案。 示例 1&#xff1a; 输入&#xff1a;n 2 输出&#xff1a;[0,1,1] 解释&#xff1a; 0 --> 0 1 --> …
阅读更多...
我的创作纪念日【2048】

我的创作纪念日【2048】

机缘 2048&#xff0c;是计算机二进制世界里很奇妙的数字&#xff0c;在CSDN上创作的第六年&#xff0c;记录从事本行业的知识学习与总结&#xff0c;好记性不如烂笔头&#xff0c;或许写的东西不如大佬的文章&#xff0c;那么有深度&#xff0c;但自己也是在坚持&#xff0c;…
阅读更多...
计算机毕业设计选什么题目好？Java财会信息管理系统

计算机毕业设计选什么题目好？Java财会信息管理系统

✍✍计算机毕业编程指导师 ⭐⭐个人介绍&#xff1a;自己非常喜欢研究技术问题&#xff01;专业做Java、Python、微信小程序、安卓、大数据、爬虫、Golang、大屏等实战项目。 ⛽⛽实战项目&#xff1a;有源码或者技术上的问题欢迎在评论区一起讨论交流&#xff01; ⚡⚡ Java、…
阅读更多...
Ciallo～(∠・ω・ )⌒☆第二十篇 入门mysql 数据库

Ciallo～(∠・ω・ )⌒☆第二十篇 入门mysql 数据库

要入门MySQL数据库&#xff0c;首先需要了解数据库的基本概念和原理。MySQL是一种广泛使用的开源关系型数据库管理系统&#xff0c;它能够处理大量的数据&#xff0c;并提供了多种功能。 一、创建数据库 连接到MySQL后&#xff0c;你可以使用SQL语句来创建数据库。例如&#x…
阅读更多...
leetcode第141题：环形链表（C语言+引申问题全解）

leetcode第141题：环形链表（C语言+引申问题全解）

解题思路&#xff1a; 定义一对快慢指针&#xff0c;slow指针每次走一步&#xff0c;fast指针每次走两步。当快指针入环时&#xff0c;慢指针只走了一半。 当slow指针入环时&#xff0c;fast指针已经在环内走了许多步。让他们两个继续走&#xff0c;直到相遇&#xff0c;可以证…
阅读更多...
矩阵中的最大得分(Lc3148)——动态规划

矩阵中的最大得分(Lc3148)——动态规划

给你一个由 正整数 组成、大小为 m x n 的矩阵 grid。你可以从矩阵中的任一单元格移动到另一个位于正下方或正右侧的任意单元格&#xff08;不必相邻&#xff09;。从值为 c1 的单元格移动到值为 c2 的单元格的得分为 c2 - c1 。 你可以从 任一 单元格开始&#xff0c;并且必须…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023