HTML的使用（上）

最新推荐文章于 2024-10-10 22:05:15 发布
最新推荐文章于 2024-10-10 22:05:15 发布
阅读量875 收藏 20
点赞数 31
分类专栏： JavaWeb学习日志 文章标签： html5 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_74141222/article/details/138718116
版权

文章目录

前言

        当我们从网络上获取信息时，在浏览器的地址栏中输入一个网址，就会展示出相应的页面内容。页面中有文字，图片，视频，音频，动画等。对于网页设计不得不提到HTML标记语言。

一、HTML是什么？

        HTML（HyperText Markup Language）是一种标记语言，用于创建和组织网页的结构和内容。HTML可以在不同的操作系统和设备上被解释和显示，从而构建出各种互联网页面。

        HTML文档组成结构：

        1.<html>标记：该标记是HTML文件的开头，</html>是HTML文件的结尾。两个标记没有实质性作用，但是对于HTML必不可缺。

        2.<head>标记：该标记是HTML的头标记，以</head>结尾。

        3.<title>标记：该标记可用于定义网页的标题，以</title>结尾，写于头标记里。

        4.<body>标记：该标记是HTML主页的主体标记。HTML页面的所有内容都在<body>标记中，并且<body>标记本身也具备控制页面的属性，如页面背景图片，颜色等。以</body>结尾。

        实操展示：

<html>
    <head>
        <title>Demo</title>
    </head>
    <body>
    你好，世界。
    </body>
</html>

        运行展示： 

        主页题目为"Demo"，网址为HTML的绝对路径，主页内容也相对应，这就是一个HTML的基础框架。 

二、使用内容

        （1）换行标记<br>

        在页面中想让文字换行，在<body>标记中输入回车、空格、换行符，都是无效的。只有使用<br>换行符才可。

        实操展示：

<html>
    <head>
        <title>Demo</title>
    </head>
    <body>
    你好，<br>
    世界。
    </body>
</html>

        运行结果：

 

        实现换行。

        （2）加粗标记<b> </b>

        加粗标记顾名思义，加粗文本字体。 

        实操展示：

<html>
    <head>
        <title>Demo</title>
    </head>
    <body>
    <b>
    你好，</b><br>
    世界。
    </body>
</html>

        运行结果： 

        （3）段落标记<p> </p>

         段落标记在段前和段后各添加一个空行，在段落标记中的内容不受影响。

        实操展示：

<html>
    <head>
        <title>Demo</title>
    </head>
    <body>
        顺顺利利
        <p>寻寻觅觅，冷冷清清，跌跌撞撞，走走停停。</p>
        世界。
    </body>
</html>

        运行结果：

        （4）标题标记<h1>~<h6>    </h1>~</h6> 

        在HTML标记中，设定了6个标题标记，分别为<h1>~<h6>，六个等级。数字越大，标题的字数越小。通常在<body>标记中使用。

        实操展示：

<html>
    <head>
        <title>Demo</title>
    </head>
    <body>
        <h1>Java开发的三个方向</h1>
        <h2>Java SE</h2>
        <p>主要用于桌面程序的开发。它是学习Java EE和javaME的基础</p>
        <h2>Java EE</h2>
        <p>主要用于页面程序的开发。</p>
        <h2>Java ME</h2>
        <p>主要用于嵌入式系统程序的开发。</p>    
    </body>
</html>

        运行结果： 

        （5）居中标记<center> </center>

        通过<center>标记，可以将文字居中显示。 

        实操展示：

<html>
    <head>
        <title>Demo</title>
    </head>
    <body>
        <center><h1>Java开发的三个方向</h1>
        <h2>Java SE</h2>
        <p>主要用于桌面程序的开发。它是学习Java EE和javaME的基础</p>
        <h2>Java EE</h2>
        <p>主要用于页面程序的开发。</p>
        <h2>Java ME</h2>
        <p>主要用于嵌入式系统程序的开发。</p>    
        </center>
    </body>
</html>

        运行结果：

        如图所示，<center> </center>内的文本都居中了。

        （6）文字列表标记<ul> <li> </ul>        <ol> <li> </ol>

        文字列表标记可以将文字以列表的形式依次排列，以此方便访问者浏览。HTML中文字列表标记分为无序列表和有序列表两种，区别在于有无给出这些列表项顺序。

        无序列表<ul> <li> </ul>

        每个列表项的前面都添加一个原点符号，每一个列表项以<li>表示。

        实操展示：

<html>
    <head>
        <title>Demo</title>
    </head>
    <body>
        成绩单    
        <ul>
            <li>语文101    
            <li>数学72
            <li>英语106
        </ul>
    </body>
</html>

        运行结果：

              

        以上为无序列表

        有序列表<ol> <li> </ol>

        每个列表项的前面都添加一个原点符号，每一个列表项以<li>表示。

        实操展示：

<html>
    <head>
        <title>Demo</title>
    </head>
    <body>
        成绩单    
        <ol>
            <li>语文101    
            <li>数学72
            <li>英语106
            </ol>
    </body>
</html>

        运行结果：         

        如图所示，给每个列表项都进行了排序。 

        （7）表格标记<table> </table>

        表格是网页的重要组成部分，用于储存数据。表格包含标题、表头、行、和单元格。

        <table>标记有很多属性，例如width属性设置表格宽度，border属性设置表格边框，align属性设置用来设置表格对齐方式，bgcolor属性表示表格背景颜色。

        <caption>标题标记

        标题标记，开头为<caption>,结尾为</caption>。标题标记也有一些属性，例如align、valign等。

        <th>表头标记

        表头标记以<th>开头，以</th>为结尾。也有属性，例如align、background、colspan、valign等。

        <tr>表格行标记

        表格行标记，以<tr>开头，以</th>为结尾。一组<tr>标记代表该表格中的一行。<tr>标记一定要嵌套于<table>标记中使用。该标记也具有align、background等属性。

        <td>单元格标记

        单元个标记，以<td>开头，以</td>为结尾。一组<tr>标记中可以嵌套若干个<td>标记。该标记也具有align、background、valign等属性。

        实操展示：

<html>
    <head>
        <title>网站</title>
    </head>
    <body>
        你好，世界
        <table width="600" height = "300" border="1" align="center">
            <caption>学生成绩单</caption>
        <tr>
            <td align="center" valign="middle">姓名</td>
            <td align="center" valign="middle">语文</td>
            <td align="center" valign="midlle">数学</td>
            <td align="center" valign="middle">英语</td>
        </tr>
        <tr>
            <td align="center" valign="middle">张三</td>
            <td align="center" valign="middle">112</td>
            <td align="center" valign="midlle">103</td>
            <td align="center" valign="middle">78</td>
        </tr>
        <tr>
            <td align="center" valign="middle">李四</td>
            <td align="center" valign="middle">110</td>
            <td align="center" valign="midlle">78</td>
            <td align="center" valign="middle">112</td>
        </tr>
        <tr>
            <td align="center" valign="middle">王五</td>
            <td align="center" valign="middle">102</td>
            <td align="center" valign="midlle">99</td>
            <td align="center" valign="middle">104</td>
        </tr>
        </table>
    </body>
</html>

        运行结果：

 总结

        以上就是HTML的部分内容要讲的，本文仅仅简单介绍了HTML的使用，而HTML提供了大量基础的能使我们快速便捷建立网页的方法，这只是学习Web迈进的一小步。

喵果森森
关注
专栏目录
使用 HTML、CSS 和 JavaScript 定制私人版的刮刮乐【一看就会】
孤寒者的博客
08-24 20万+
刮刮乐想必大家都玩过，小时候兜里一有钱，就喊上小伙伴兴冲冲的跑去家旁边的小卖部，用那稚嫩地小手递给老板那被捏的皱巴巴的五毛钱，满眼期待的刮着买来的刮刮乐，心里早已想好中了100块钱大钞要去买好多好多辣条、卡片、陀螺、奥迪双钻的悠悠球… 认认真真看完本文，你就可以用你女朋友的美照实现一个独属于你的刮刮乐哦！（当然如果你没有女朋友的话，也可以用你珍藏多年的美女图片哦！） ⛳️使用HTML、CSS和JavaS实现刮刮卡/刮刮乐♥️别着急，先看演示????使用HTML、CSS和JavaS实现刮刮乐????第①步：
html文档使用,使用提供 HTML 文档的过程
weixin_29553791的博客
06-03 95
使用提供 HTML 文档的过程通常，编写一个可处理发送给特定服务的请求的过程是最简单的方式。这样的过程将返回一个 Web 页。或者，该过程也可接受作为 URL 的一部分进行传递的参数以对其输出进行自定义。但以下示例要简单很多。它例示了服务可以简单到什么程度。此 Web 服务仅返回短语 "Hello world!"。CREATE SERVICE helloTYPE 'RAW'AUTHORIZATIO...
html中的“居中”问题详解（超全）
前端全栈大佬
04-12 1万+
本文将深入探讨HTML中各种居中问题，从基本的文本居中到元素居中布局，涵盖了各种常见的情景和解决方案。通过本文，读者将能够全面理解HTML中的居中技巧，为其网页设计和开发提供实用的指导和建议。
html基础
最新发布
2401_87532517的博客
10-10 670
</p>之间在换行那么就要用到换行标签了。scr，顾名思义就是在其中输入图片的路径就可以得到图片。并且可以改变水平线的颜色，长度，高度，对齐方式​。<img scr="输入下载好的图片名称">div：容器元素，也是页面中见到的最多的元素。用法：<p>一段话 一段话</p>几个<p>
HTML的基本使用
changlinke的博客
02-25 705
HTML的基本使用HTML概述概述骨架结构标签语法标签关系常用标签标题标签段落标签盒子标签文本表现标签标签属性图片标签图片标签的使用图片路径超链接标签base标签锚点转义字符列表无序列表有序列表8.3自定义列表 HTML概述 概述 HTML（英文Hyper Text Markup Language的缩写）中文译为“超文本标签语言”，是用来描述网页的一种语言。所谓超文本，因为它可以加入图片、声音、动画、多媒体等内容，不仅如此，它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接。 骨架结构 <!
HTML详细教程
qq_40046544的博客
10-17 8703
HTML 是网页使用的语言，定义了网页的结构和内容。浏览器访问网站，其实就是从服务器下载 HTML 代码，然后渲染出网页。HTML 的全名是超文本标记语言（HyperText Markup Language），上个世纪 90 年代由欧洲核子研究中心的物理学家蒂姆·伯纳斯-李（Tim Berners-Lee）发明。它的最大特点就是支持超链接，可以跳转到其他网页，从而构成了整个互联网。1999 年，HTML 4.0.1 发布，成为广泛接受的 HTML 标准。
Web前端之Html中的换行或回车符号不起作用的解决办法、white、space、line、pre、br
热门推荐
CSDN博客主页地址：https://mengjian.blog.csdn.net/
08-31 1万+
Web前端之Html中的换行或回车符号不起作用的解决办法、white、space、line、pre、br
html5使用框架页面布局,HTML框架集与布局
weixin_35578185的博客
06-07 4726
html的框架详解和布局什么是框架？框架将浏览器划分成不同的部分，每一部分加载不同的页面，实现在同一浏览器窗口中加载多个页面的效果划分框架标记语法格式lt;framesetgt;....HTML框架集我们可以通过框架，在一个浏览器窗口中显示多个页面。HTML框架集的使用十分简单，我们需要用到如下2个标签：frameset的属性frameset主要有以下属性：rowscolsboede...博文来自...
winform 使用html做界面
01-05
9. **自定义渲染**：对于更高级的场景，可以使用`WebBrowser control`的`WebBrowser DocumentCompleted`事件，结合`AxInterop.SHDocVw`库，直接操作IE的COM接口，以实现更复杂的HTML渲染和交互。 通过以上方法，...
HTML5页面，上下切换页面效果
12-05
综上所述，实现HTML5页面的上下切换效果，需要结合HTML5的新特性、CSS3的动画效果、JavaScript的事件处理和现代前端框架。通过这些技术的巧妙运用，我们可以为用户打造出接近原生应用的网页体验，提升用户的交互满意...
html里面使用axios发送请求
qq_45911604的博客
04-01 1万+
html里面使用axios发送请求
HTML段落标签、换行标签、文本格式化标签与水平线标签
小何代码咖啡馆
04-16 3262
在四个格式化标签中虽然每一类的第一个标签和第二个标签实现的效果相同，但是为了更加强调文本效果，提高代码可读性，推荐用第一种标签。在网页中，要把文字有条理地显示出来，就需要将这些文字分段显示。在 HTML 标签中，在HTML中，可以使用下面的标签实现对应的属性，并且这些标签可以嵌套使用。标签用于定义段落，它可以将整个网页分为若干个段落。标签可以在网页上实现水平分割线的效果。注意，水平分割线标签为单标签。为文本分段可以使用段落标签。包裹需要放在一段的文字。标签表示换行，也可以用。在HTML中，常见用。
【网页前端设计HTML】HTML文本标签之换行标签和各类文本标签
weixin_53597021的博客
07-12 3862
在HTML中，我们可以使用“sup标签”来实现文本的上标效果。在HTML中，我们可以使用“sub标签”来实现文本的下标效果。在HTML中，我们可以使用“big标签”来实现字体的变大，还可以使用“small标签”来实现字体的变小。在HTML中，我们可以使用 i 标签、em标签和cite标签来实现文本的斜体效果。在HTML中，我们可以使用“strong标签”或“b标签”来对文本进行加粗。在HTML中，我们可以使用“s标签”来实现文本的中划线效果。在HTML中，我们可以使用br标签来给文字换行。
前端中换行的转义字符
weixin_35752645的博客
01-09 3101
在 HTML 中，换行的转义字符是 <br> 标签。这个标签可以在文本中强制执行换行。例如： <p>这是第一行。<br>这是第二行。</p> 在 CSS 中，换行的转义字符是 \A。例如： p::before { content: "这是第一行。\A这是第二行。"; } 注意：在 HTML 中，你也可以使用段落元素 <p> 来实现...
处理html中的换行字符“↵”
weixin_47873655的博客
05-31 546
1.textarea赋值 直接把后端返回文本类型通过v-model绑定给textarea，就会有默认的换行，但是问题是textarea可能会在样式上有所不同，他不能随内容高度增加textarea高度实现自适应(可以通过js实现，比较麻烦)，然后就有了第二种方法 2.使用v-html输出文本 <div v-html="value.replace(/(\r\n|\n|\r)/gm, '<br />')"></div> “↵”在html中会识别别为\r,\n等转义字符，所以需
前端页面回车换行展示
baidu_33164415的博客
04-14 661
前端页面回车换行展示
HTML换行代码是什么？ 编程
YOLO_CODE的博客
09-27 2380
在HTML中，换行是指将文本或元素从当前行移到下一行的操作。换行在网页设计和排版中起着重要的作用，可以使文本更易读并提高用户体验。在HTML中，有几种方法可以实现换行效果。无论使用哪种方法，换行都可以根据需求进行灵活的调整。通过合理运用换行代码，可以改善网页的可读性和布局效果。在实际应用中，可以根据具体情况选择合适的换行方式。这些标签是用于定义段落和块级元素的，当一个段落或块级元素结束后，下一个元素会自动换行显示。该标签是一个自闭合标签，不需要闭合标签。，可以将元素强制显示为块级元素，从而实现换行效果。
HTML的换行符号-br
weixin_54048131的博客
01-21 446
<br> 输入br就可以换行了
Html中识别换行符‘\n‘
Peng的博客
07-06 1万+
转载于：HTML文章页面，识别不了换行问题的解决 问题详情 后端返回的长串字符中是由换行符 ‘\n’的，但是前端展现该长串字符时却没有识别’\n’，挤在一行影响页面布局。 解决方案 查找相关资料后得到解决方案：CSS中由“white-space” 属性设置如何处理元素内的空白，设置元素的样式为white-space: pre-line即可解决问题。 注： 在React中这样设置该属性 <span style={{whiteSpace: 'pre-line'}} > // ..
使用HTML和Bootstrap仿制淘宝购物界面教程
- 流式布局（使用百分比宽度）、弹性盒模型（Flexbox）或网格布局（Grid）可用于创建响应式设计，确保页面在不同设备上均有良好的显示效果。 3. Bootstrap框架应用： - Bootstrap是一个流行的前端框架，包含了一...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

喵果森森

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值