Html元素~~标签学习

简介: 一、基础标签1、first 表示输入的文字h1、h2...h6文字一次变小;2、我是一个段落表示段落,文字颜色相对于h标签浅;3、 表示的为链接,可以替换为文字,当前为图片;4、 表示为图片5、 表示html主体元素6、阿斯顿发放wjefqhewfh 表示表格属性7、 表示水平横线8、 插入单个折行(换行)。

一、基础标签

1、<h1>first</h1> 表示输入的文字h1、h2...h6文字一次变小;
2、<p>我是一个段落</p>表示段落,文字颜色相对于h标签浅;
3、<a href="https://www.jianshu.com/"><img src="ic_launcher_round.png"></a> 表示的为链接,<img src="ic_launcher_round.png">可以替换为文字,当前为图片;
4、<img src="ic_launcher_round.png" width="192" height="192"> 表示为图片
5、<head> 表示html主体元素
6、<table >阿斯顿发放wjefqhewfh</table> 表示表格属性
7、


表示水平横线
8、<br /> 插入单个折行(换行)。一个空行

二、字体相关标签-------->文本格式化

1、文本格式化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body style="background-color: #58a1bd;margin-left: 80px ;margin-top: 80px">
<b>粗字体</b>
<br/>
<big>大字体</big>
<br/>
<em>着重字体</em>
<br/>
<i>斜体</i>
<br/>
<small>小字体</small>
<br/>
<strong>加重语气</strong>
<br/>
<sub>下标字体</sub>
<br/>
<sup>上标字体</sup>
<br/>
<ins>插入字体</ins>
<br/>
<del>删除字体</del>
<br/>
</body>
</html>

表现形式:


img_6b2d1df6056224ac34d1ef4584d85ca2.png
文本格式化样例

2、预格式文本—保留了空格和空行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body style="background-color: #58a1bd;margin-left: 80px ;margin-top: 80px">
<pre>
    预格式化文本

    包含 换行 空格
</pre>
<pre>
    for(int i=0;i<100;i++){

    tvNum.setText(i);

    }
</pre>
</body>
</html>
img_f4516cafd038f73d601484647060b847.png
预文本样例

3、计算机输出标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body style="background-color: #58a1bd;margin-left: 80px ;margin-top: 80px">
<code> 计算机输出标签</code>
<br/>
<tt>样例标签,tt 过时了</tt>
<br/>
<samp>这个还没过时</samp>
<br/>
<var>这个标签也没过时</var>
<br/>
<p>
    <b>注释:</b> 这些标签用于计算机/变成代码
</p>

</body>
</html>
img_4d7f8b9e0aa56964c20503fec976ec27.png
计算机输出标签样例

4、其他标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body style="background-color: #58a1bd;margin-left: 80px ;margin-top: 80px">
<!--地址标签-->
<address>
    这个是地址标签:
    <!--链接到简书吧-->
    <a href="https://www.jianshu.com/">简书</a>
</address>
<br/>
<!--这个标签可以使得鼠标移动到显示文字上面出现提示内容-->
<acronym title="居然也过时了">
    这个标签过时了,无法截屏,需要自己尝试
</acronym>
<!--文字朝向标签-->
<br/>
<h6>以下文字从右侧开始读取,听我的准没错</h6>
<bdo dir="rtl">我要学混编</bdo>
<br/>
<h6>长引用</h6>
<blockquote>
很长的的引用,虽然我不知道干嘛的。
但是就是引用。大概就这些吧。
</blockquote>
<br/>
<h6>以下为短引用</h6>
<q>这个就是个短引用</q>
<br/>
<p>
    带有删除线的文字:
    <del>带有删除线的文字</del>
    <br/>
    带有下划线的文字:
    <ins>带有下划线的文字</ins>
</p>
</body>
</html>
img_e16e942f7b5deda5977d59a3550b861f.png
如上代码样例
相关文章
|
2月前
|
移动开发 搜索推荐 UED
HTML5的新语义化标签
HTML5引入的这些新语义化标签,通过明确标识内容的结构和意义,使得网页结构更加清晰,易于理解和维护。使用这些标签不仅提升了网页的可读性和可访问性,还增强了搜索引擎和辅助技术对网页内容的解析能力。在实际开发中,合理使用这些语义化标签,能够显著提升网页的质量和用户体验。
98 49
|
2月前
|
存储 移动开发 数据处理
HTML5 元素2
HTML5引入了多个新元素以增强表单功能和用户体验。`&lt;keygen&gt;`元素用于生成密钥对,提交表单时生成私钥和公钥,私钥保存在客户端,公钥发送至服务器,用于后续的身份验证。`&lt;output&gt;`元素则用于展示计算结果或其他脚本输出,如表单数据处理的结果。此外,`&lt;datalist&gt;`元素可与`&lt;input&gt;`元素结合使用,提供预定义的选项列表,增强输入的便捷性和准确性。这些元素共同提升了网页的交互性和安全性。
|
1月前
|
移动开发 前端开发 JavaScript
HTML5 <nav> 元素2
HTML5中的`&lt;nav&gt;`标签用于定义页面的导航链接部分,但并非所有链接都需置于其中。`&lt;aside&gt;`标签定义页面主内容外的相关信息,如侧边栏。`&lt;header&gt;`标签描述文档或节的头部区域,可用于定义内容的介绍展示区。示例包括导航、家庭旅行记录和IE9发布信息等。
|
2月前
|
存储 移动开发 前端开发
高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容
本文深入探讨了高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容,旨在提升开发效率、网站性能和用户体验。
52 5
|
2月前
|
移动开发 UED HTML5
HTML5 表单元素1
HTML5引入了新的表单元素,如`&lt;datalist&gt;`、`&lt;keygen&gt;`和`&lt;output&gt;`,以增强表单的功能性和用户体验。
|
1月前
|
Web App开发 移动开发 iOS开发
HTML5 语义元素1
HTML5引入了语义元素,如`&lt;nav&gt;`、`&lt;header&gt;`、`&lt;footer&gt;`等,这些元素能清晰地向浏览器和开发者传达其内容的意义,如导航链接、头部和尾部。与非语义元素(如`&lt;div&gt;`)不同,语义元素使网页结构更加明确,有助于提升可读性和可访问性。例如,`&lt;section&gt;`标签用于定义文档中的节,而`&lt;article&gt;`标签则用于定义独立的内容,如论坛帖子、博客文章等。这些新元素在IE9及更高版本、Firefox、Chrome、Safari和Opera中得到支持。
|
2月前
|
移动开发 编解码 UED
除了 `<audio>` 和 `<video>` 标签,HTML5 还支持哪些多媒体格式?
【10月更文挑战第19天】HTML5对多种多媒体格式的支持,为网页开发者提供了丰富的选择,能够更好地满足不同类型多媒体内容在网页中的展示和交互需求,提升了网页的用户体验和多媒体应用的多样性。
HTML 元素
HTML文档由HTML元素定义,元素包括开始标签、内容和结束标签。某些元素内容为空,可在开始标签中关闭。大多数元素可拥有属性,且元素间可相互嵌套,形成复杂结构。
|
3月前
|
人工智能
|
2月前
|
存储 移动开发 前端开发