JavaWeb-HTML常用标签了解(一)

简介: JavaWeb-HTML常用标签了解(一)

注释标签

<!-- 有注释 -->
    无注释

ctrl + / 快捷键可以快速进行注释/取消注释.

注意

注释不能传达负能量!!!

标题标签

有六个, 从 h1 - h6. 数字越大, 则字体越小.

<h1>111111</h1>
        <h2>222222</h2>
        <h3>333333</h3>
        <h4>444444</h4>
        <h5>555555</h5>
        <h6>666666</h6>

段落标签

<p>这是一个段落标签</p>

这样是看不出来它的作用的.

<p>人生在世,人们大多喜欢“得”,不喜欢“失”。但现实是,得与失如影随形,有得的地方必定有失, 有失的地方也必定有得。
        在对得与失的纠结中,我们常常忽略一个基本的常识,那就是 无论得失,皆是过程。
        </p>
        生活的真相就是处处是得失。“文王拘而演《周易》;仲尼厄而作《春秋》;屈原放逐,乃赋《离骚》。
        ”这是塞翁失马焉知非福般的得与失,然人生波澜起伏,今日之蜜糖,可能是他日之砒霜。

如上所示对文字进行分段处理.

换行标签

br 是一个单标签(不需要结束标签)

生活的真相就是处处是得失。<br>“文王拘而演《周易》;仲尼厄而作《春秋》;屈原放逐,乃赋《离骚》。
        ”这是塞翁失马焉知非福般的得与失,然人生波澜起伏,今日之蜜糖,可能是他日之砒霜。

由结果可知原文本进行换行,在网页显示中并没有进行换行,所以需要用<br>标签进行换行.

格式化标签

加粗: strong 标签 和 b 标签

倾斜: em 标签 和 i 标签

删除线: del 标签 和 s 标签

下划线: ins 标签 和 u 标签

<strong>加粗</strong>  <b>加粗</b>
        <em>倾斜</em>        <i>倾斜</i>
        <del>删除</del>      <s>删除</s>
        <ins>下划线</ins>        <u>下划线</u>

图片标签

<img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.nelCIKYD30NJW6W68-ZHxAHaJA?pid=ImgDet&rs=1">

src属性表示图片的路径

绝对路径

以 html 所在位置为基准, 找到图片的位置.

相对路径

一个完整的磁盘路径, 或者网络路径(上述例子就使用的网络路径).

img 标签的其他属性

alt: 替换文本. 当文本不能正确显示的时候, 会显示一个替换的文字.

title: 提示文本. 鼠标放到图片上, 就会有提示.

width/height: 控制宽度高度. 高度和宽度一般改一个就行, 另外一个会等比例缩放. 否则就会图片比例失衡.

border: 边框, 参数是宽度的像素.

超链接标签

属性

href: 必须具备, 表示点击后会跳转到哪个页面(外部链接与内部链接).

target: 打开方式. 默认是 _self. 如果是 _blank 则用新的标签页打开

<a  href="https://www.csdn.net/?spm=1000.2115.3001.4476"  target="_blank">CSDN </a>

博主这里方的外部链接所以点一下这个CSDN链接就会跳转到CSDN首页.

外部链接与内部链接

  • 外部链接
    href 引用其他网站的地址.
href="https://www.csdn.net/?spm=1000.2115.3001.4476"
  • 内部链接
    网站内部页面之间的链接. 写相对路径即可.

在一个目录中, 先创建一个 1.html, 再创建一个 2.html

1.html
<a href="2.html">点我跳转到 2.html</a>
 2.html
<a href="1.html">点我跳转到 1.html</a>
  • 空链接
    使用 # 在 href 中占位.
<a href="#">空链接</a>
  • 下载链接
    href 对应的路径是一个文件.
<a href="test.zip">下载文件</a>
  • 网页元素链接
    可以给图片等任何元素添加链接.
<a href="http://www.sogou.com">
<img src="rose.jpg" alt="">
</a>


相关文章
|
2月前
|
移动开发 HTML5
HTML5标签的类型
HTML5标签的类型。
62 5
|
26天前
|
移动开发 搜索推荐 UED
HTML5的新语义化标签
HTML5引入的这些新语义化标签,通过明确标识内容的结构和意义,使得网页结构更加清晰,易于理解和维护。使用这些标签不仅提升了网页的可读性和可访问性,还增强了搜索引擎和辅助技术对网页内容的解析能力。在实际开发中,合理使用这些语义化标签,能够显著提升网页的质量和用户体验。
92 49
|
4月前
|
数据采集 移动开发 前端开发
HTML代码的革命:语义化标签的魅力,让你的网页结构焕然一新!
【8月更文挑战第26天】本文探讨了Web前端开发中的语义化标签概念及其重要性。语义化标签通过使用具有明确含义的HTML标签来构建页面结构,提升了网页的可访问性及搜索引擎优化效果,并增强了代码的可读性和维护性。文章还讨论了实际开发中遇到的问题及未来发展趋势。
64 0
|
20天前
|
存储 移动开发 前端开发
高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容
本文深入探讨了高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容,旨在提升开发效率、网站性能和用户体验。
31 5
|
1月前
|
移动开发 编解码 UED
除了 `<audio>` 和 `<video>` 标签,HTML5 还支持哪些多媒体格式?
【10月更文挑战第19天】HTML5对多种多媒体格式的支持,为网页开发者提供了丰富的选择,能够更好地满足不同类型多媒体内容在网页中的展示和交互需求,提升了网页的用户体验和多媒体应用的多样性。
|
1月前
|
存储 移动开发 前端开发
|
2月前
|
前端开发
【HTML】img标签和超链接标签
【HTML】img标签和超链接标签
47 2
|
2月前
|
移动开发 前端开发 JavaScript
【HTML】HTML页面和常见标签
【HTML】HTML页面和常见标签
42 1
|
3月前
|
前端开发
前端基础(二)_HTML常用标签(块级标签、行级标签、行块级标签)
本文详细介绍了HTML中的常用标签,包括块级标签(如`h1`至`h6`、`p`、`div`等)、行级标签(如`span`、`b`、`strong`、`i`、`em`、`sub`、`sup`、`del`、`a`等),以及行块级标签(如`img`)。文章解释了这些标签的用途、特点和基本用法,并通过示例代码展示了如何在HTML文档中使用它们。
169 1
|
3月前
|
移动开发 开发者 UED
HTML5中video标签controlslist属性的使用方法
`controlsList`属性为开发者提供了更多控制HTML5视频播放器行为的能力,让视频内容的集成更加灵活和符合需求。通过精心设计的控制列表,可以提升用户体验,同时保持内容的安全性和专业性。这种细节的控制和定制能力是现代Web开发的一个重要方面,反映了HTML5对开发者和内容创作者需求的响应。
339 1