Day02-Java开发所需的前端技术
  2sVs8vrvjmTp 2023年11月08日 21 0

HTML常见元素

1.文本 元素

Heading:不同字号标题,从1-6,数字越大字号越小。

    <!-- 标题元素 -->
    <h1>1号标题</h1>
    <h2>2号标题</h2>
    <h3>3号标题</h3>
    <h4>4号标题</h4>
    <h5>5号标题</h5>
    <h6>6号标题</h6>

Paragraph:段落元素

<!-- 段落元素 -->
    <p>段落</p>

List:列表元素(ul:无序列表(unordered list);ol:有序列表(ordered list))

    <!-- 列表元素 -->
    <!-- 无序列表 -->
    <ul>
        <li>列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>
    </ul>
    <!-- 有序列表 -->
    <ol>
        <li>列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>
    </ol>
    <!-- 多级列表 -->
    <ul>
        <li>一级列表<ul>
                <li>二级列表1</li>
                <li>二级列表2</li>
            </ul>
        </li>
    </ul>

Day02-Java开发所需的前端技术_后端开发学习前端

Anchor:锚点,超链接

<!-- 超链接 -->
    <a href="http://www.baidu.com">外部链接</a>
    <a href="#pid">网页内锚点</a>

2.多媒体 元素 

image:图片

<img src="../Image/图片.jpg" width="300px">
<!-- data:image/jpg;base64,图片base64格式 -->
<img src="data:image/jpg;base64,/9j/4AAQSkZJRgABAAAAAAAAAAAAZ"
        alt="" width="300px">

video:视频 controls:控制器

 <!-- 视频 -->
<video src="../Video/6c602282a91b5481e12e21ddadbaf781.mp4" controls width="200px"></video>

audio:音频 controls:控制器

 <!-- 音频 -->
<audio src="../MP3/星星.mp3" controls></audio>

Day02-Java开发所需的前端技术_Image_02

补充:使用jshell,将图片转为Base64

控制台中输入jshell

 Files.readAllBytes(Path.of("F:\\webProject\\Study\\Image\\图片2.jpg"));
 System.out.print(Base64.getEncoder().encodeToString($1))
【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载,内容版权归原作者所有。本网站的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@moduyun.com

  1. 分享:
最后一次编辑于 2023年11月08日 0

暂无评论

推荐阅读
2sVs8vrvjmTp