HTML的基本骨架标签，段落换行水平线标签，文本标签

于 2024-09-09 23:37:44 发布
阅读量562 收藏 10
点赞数 10
文章标签： 前端 html5 web 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/syy2023090248/article/details/142070068
版权

一、HTML的基本骨架标签

<!DOCTYPE html>--------------文档版本说明

<html>-------------------------------网页文档开始

     <head>--------------------------文档头部开始

     网页头部的内容

     </head>-------------------------文档头部结束

     <body>---------------------------文档主体开始

     网页主体的内容

     </body>--------------------------文档主体结束

</html>------------------------------网页文档结束

HTML5骨架结构为： 

<!DOCTYPE html>
<html lang="en">
   <head>
          <title>网页标题</title>
   </head>
   <body>
        网页主体的内容
   </body>
</html>

注：一般HTML文档中打出英文的感叹号，再按回车键可直接出现骨架结构。

二、段落、换行、水平线标签

段落：<p>文字</p>

<p>我是段落标签</p>

 换行：<br>

注：两个换行标签相当于一个段落标签。

<h>后陡门58号</h>
十个勤天做大做强<br>十个勤天缺一不可<br>十个勤天永远都只是十个勤天

运行结果如下：

后陡门58号
十个勤天做大做强
十个勤天缺一不可
十个勤天永远都只是十个勤天

 水平线:<hr>

<hr>标签的常用属性
属性描述
align设置水平线的对齐方式，有left、right、center三种选择,默认为center(居中对齐)
size设置水平线的粗细，以像素为单位，默认为2像素
color设置水平线的颜色，可通过颜色名称、十六进制#RGB、rgb(r、g、b)设置
width设置水平线的宽度，可以是确定的像素值，也可以是浏览器窗口的百分比，默认为100%
noshade设置线段是否显示阴影

 水平线的格式为：

<hr align="left|right|center" size="横线粗细" width="横线长度" color="横线颜色">

三、文本标签

编辑文本常用的标签：加粗、倾斜、删除线、下划线、标题

<!DOCTYPE html>
<html>
<head>
    <title>标签</title>
</head>
<body>
    <p align="center"><b> 我是粗体文本 </b></p>
    <p align="center"><strong> 我也是粗体文本 </strong></p>
 
    <p align="center"><i> 我是斜体文本 </i></p>
    <p align="center"><em> 我也是斜体文本 </em></p>
 
    <p align="center"><s> 我是加删除线文本 </s></p>
    <p align="center"><del> 我也是加删除线文本 </del></p>
 
    <p align="center"><u> 我是加下划线文本 </u></p>
    <p align="center"><ins> 我也是加下划线文本 </ins></p>
</body>
</html>

运行结果如下： 

 

 标题标签：

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

运行结果如下：

焖饼syy
关注
HTML5+CSS3[标签(标题、段落、换行、水平线、图片、超文本链接、列表、表格)](二)-全面详解（学习总结---从入门到深化）
02-02 1489
本阶段为基础阶段，主要学习HTML基本结构、骨架、标签和CSS基本样式。通过对这些标签的使用，熟悉布局的搭建结构。合理运行对应标签实现试图效果，是本阶段必须要掌握的知识，为接下来的学习奠定基础。
超详细的HTML学习笔记：语法特点、骨架结构、基本标签及其属性（附代码示例）
lbcbjtlhmjq的博客
06-04 1109
这篇文章是作者通过学习动力节点、黑马程序员的两套不同的HTML课程整理出的学习笔记，融合了两套课程的知识点，耗费了372行代码（加代码注释），希望能帮到大家。HTML只是前端学习的开端，前端学习路漫漫，愿大家学习前端不迷路
html语言换行符,html换行符
weixin_31025595的博客
05-31 3256
在html源代码中对内容进行编辑，如果直接采用回车换行，那么浏览器解析的结果可能会是一个空格、或者被忽略，正确的做法是使用标签，在html语言中，br标签定义为一个换行符，所以应将它理解为简单的输入一个空行，而不是用来对内容进行分段。在HTML中，没有结束标签，它是一个单标签，连续的多个br标记可以进行多次换行，也就是说在同一个位置插入5个br标签，则会空出5行的垂直间距。br标签通常用作对文本中...
html换行符_HTML 列表
weixin_39606575的博客
11-14 661
HTML 支持有序、无序和定义列表:HTML 列表有序列表第一个列表项第二个列表项第三个列表项无序列表列表项列表项列表项在线实例无序列表本例演示无序列表。有序列表本例演示有序列表。(可以在本页底端找到更多实例。)HTML无序列表无序列表是一个项目的列表，此列项目使用粗体圆点(典型的小黑圆圈)进行标记。无序列表使用 标签CoffeeMilk浏览器显示如下：CoffeeMilkHTML 有...
html 换行特殊符号,html中的换行符号
weixin_42195569的博客
06-04 1994
html中的换行符号: Word中向下的箭头↓符号怎么删除?手动换行符删除方法，缺失：html中的换行符号12244/11以下是的一些我们精选的Word中向下的箭头↓符号怎么删除?手动换行符删除方法有时我们需要从网页上复制一些文章到Word中，但奇怪的是往往会带有好多向下箭头的符号，这就是软回车符号(Word中软回车是同时按住shift+enter得来的)，这些软回车占用了Word很多的空间，如果...
2020-09-15
qq_50840963的博客
09-16 151
*fjjfjfmfj375586 zzzi*流水58885![在这里插入图片描述](https://img-blog.csdnimg.cn/20200915165402739.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUwODQwOTYz,size_16,color_FFFFFF,t_70) ...
HTML-空格，换行符
最新发布
kw741951的博客
02-26 798
pre>标签里面的文本格式保留。</center>:表示文字居中。</p>:表示段落空格。
HTML 基本骨架与常用标签
Lululovesickness的博客
11-26 737
HTML HTML是什么？ 是一种超文本标记语言 Hyper Text Markup Language 不是编程语言，是一种标记语言 标记语言是一套标记标签 超文本 超越文本，在文本内容的基础上，添加更加丰富是信息（图片，动画，声音等等） HTML的基本骨架 <!--HTML的基本骨架--> <html> <head> <title></title> </head> <body> </body&
HTML基础学习笔记：核心标签与属性解析
HTML标签是用来构建网页结构和样式的，例如`<p>`用于创建段落，` `实现换行，`<hr>`绘制水平线，而`<hn>`系列标签（如`<h1>`到`<h6>`）则用于创建不同级别的标题。这些标签可以添加属性来调整其样式，如`<hr>`的`...
Flex 最全的换行 制表符 回车 空格 特殊符号
帆软爱好者的专栏
04-02 2682
<br />出自：http://www.myflexhero.com/share/flex-hero-flex4/flex-hero-coding-techniques/<br />字符 十进制字符编号 实体名字 说明<br />— — 未使用Unused<br />—  — 未使用Unused<br />—  — 未使用Unused<br />—  — 未使用Unused<br />—  — 未使用Unused<br />—  — 未使用Unu
html语言换行格式,html换行符<br>标签
weixin_32205867的博客
05-30 1万+
br标签的作用在 html源代码中对内容进行编辑，如果直接采用回车换行，那么浏览器解析的结果可能会是一个空格、或者被忽略，正确的做法是使用< br />标签，在 html 语言中，br标签定义为一个换行符，所以应将它理解为简单的输入一个空行，而不是用来对内容进行分段。在 HTML 中，< br />没有结束标签，它是一个单标签，连续的多个 br标记可以进行多次换行，也就是说...
html怎么换行？换行代码是什么？九种html文字换行方法总结
热门推荐
lin123_00的博客
05-26 7万+
在用html写网页时，为了让网页中内容看起来整洁流畅，我们需要将其中的文字内容进行换行，那么，html怎么来换行呢？本篇文章就来给大家介绍一下html中给文字换行的方法。 打造全网web前端全栈资料库（总目录）看完学的更快，掌握的更加牢固，你值得拥有（持续更新） html中换行的方法有很多，其中最为简单的就是利用<br>标签，但是有时我们为了网页的设计，就需要灵活的运用各种不同的方法来实现文字的换行。具体有哪些方法可以实现换行，我们就来看一看。 1、HTML换行的代码是<br>
html语言中的换行标签是,什么是换行符标签
weixin_36482976的博客
06-04 6783
HTML语言中换行的代码是什么？方法有很多，但要做到用的恰到好处段落标签 一个段落空一行 效果如下：是默认的换行，在你要换行的地方加进去就行，单个标签 效果如下：如果有了 ……，从到中的内容原来怎么分的行，就怎么分。第1题 下面哪一项是换行符标签？( ) A、< body> C< br > 这个是换行 body是主体 font是文字 P 是段落你说的是HTML换行标签吧如何...
Web前端之Html中的换行或回车符号不起作用的解决办法、white、space、line、pre、br
我的"CSDN"博客主页地址：https://mengjian.blog.csdn.net/
08-31 1万+
Web前端之Html中的换行或回车符号不起作用的解决办法、white、space、line、pre、br
html复制粘贴的文字自动换行,如何在不破坏复制粘贴的情况下建议HTML文本中的换行符？...
weixin_39631316的博客
06-02 660
你可以使用< wbr>标签.它自然有decent support,减去IE.编辑：添加了可能的IE修复,这在IE9中适用于我.table {border: 1px solid grey;width: 50px;margin-bottom: 10px;border-spacing: 0;border-collapse: collapse;}td {border: 1px solid gr...
处理html中的换行字符“↵”
weixin_47873655的博客
05-31 537
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等转义字符，所以需
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值