java day31——HTML标签-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_40905010/article/details/108059209

这里写目录标题

标签

标题标签：h1~h6，无h7，数字越大，字体越小，标题自带换行
段落标签：p，自带换行
字体样式标签:strong、b，文本加粗；i，斜体；u，下划线
字体标签：font[size color]
控制大小的属性: size 1~7
控制颜色的属性: color，英文单词, #16进制数, #简写16进制
在线配色器：http://www.peise.net/tools/web/

<font size="3" color="#ffff00">font标签3</font><br/>

分割线：hr[size noshade width align]
size: 高度
noshade: 实心, 属性名和属性值一致, 可以简写
align: 对齐方式 center[默认值] left right

<hr size="5" noshade width="50%" align="left">

换行符：br

多媒体标签

图片标签：img [src width height title alt]
src: 图片路径
width: 像素值百分比
height: 像素值百分比
width 和 height如果只设置一个, 另一个值按照图片比例缩放
alt: 图片不能正常加载时显示的文本
title: 标题, 鼠标悬停, 图片提示的文本

<img src="../img/1.jpg" height="200px" alt="普通文本" title="标题"/>

视频标签: video [src width height title controls autoplay loop]
title：视频标题
controls：控制器
autoplay：自动播放
loop：循环播放
多个src，只执行第一个有效的

<video controls="controls" width="300px" autoplay="autoplay" loop="loop">
        <source src="../img/video.mp4"/>
        <source src="../img/video.mp4"/>
 </video>

音频标签: audio [src controls autoplay loop]

<audio src="../img/audio.mp3" controls autoplay loop></audio>

列表标签

有序列表：
ol [type-(1 a A i I) start]
type: 序号类型 1 a A i I
start: 开始序号

 <ol type="i" start="6" >小写希腊数字
        <li>苹果</li>
        <li>柿子</li>
        <li>梨</li>
    </ol>

无序列表：
ul [type-(circle square disc)]
type: 标识类型 - circle空心圆 square正方形 disc实心圆，默认
列表项：li

超链接标签

a: href - 必不可少的，超链接地址
target - 超链接打开方式
_self：默认。在相同的框架中打开被链接文档。
_blank：在新窗口中打开被链接文档。
_parent：在父框架集中打开被链接文档。
_top：在整个窗口中打开被链接文档。
framename：在指定的框架中打开被链接文档。

<a href="http://www.baidu.com" target="_blank">超链接的内容,可以是图片,可以是文字</a>

锚点超链接
链接到当前页面的其他位置 -> 跳转锚点

  1.设置锚点  <a name="锚点值">简介编辑</a>
  2.跳转锚点  <a href="#锚点值">跳转到简介编辑</a>

表格标签

table:
border-边框
cellspacing-单元格间隙
width-表格宽度
height-表格高度
cellpadding-表格内容和边框之间的距离
bgcolor-表格背景颜色
align-表的对齐方式
行：tr
单元格：td(内容) th(表头，自带加粗居中效果)
rowspan: 跨行
colspan: 跨列
表头：thead 唯一
表格内容：tbody 多个
表尾：tfoot 唯一
表的标题：caption
属性：align[tbody tr td 内容居中]

<table border="1" cellspacing="0"
       width="500px" height="300px"
       cellpadding="10"
       align="center">
    <caption>表的标题</caption>
    <thead>
    <tr>
        <th>姓名</th>
        <th>班级</th>
        <th>电话号码</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td rowspan="2">1-1</td>
        <td>1-2</td>
        <td>1-3</td>
    </tr>
    <tr>
        <td>2-2</td>
        <td>2-3</td>
    </tr>
    <tr>
        <td>3-1</td>
        <td colspan="2">3-2</td>
    </tr>
    </tbody>
</table>

在这里插入图片描述

框架标签

frameset：子页面组合方式，是单一的
rows-按行排列，cols-按列排列
frame：子页面资源
src noresize name=“给超链接使用”

head.html
<body>
    <table width="100%">
        <tr>
        <td><img src="../img/logo.png"  /></td>
        <td><img src="../img/header.png"  /></td>
        <td>张三</td>
        </tr>
    </table>
</body>

left.html
<body>
    <h1>菜单项</h1>
    <ul>
        <li><a href="http://www.baidu.com" target="body">百度</a></li>
        <li><a href="https://www.sina.com" target="body">新浪</a></li>
        <li><a href="https://www.163.com/" target="body">网易</a></li>
    </ul>
</body>

body.html
<body>
    主体内容,用来显示菜单选中后的内容
</body>

框架.html
<frameset rows="15%, *" >
    <frame src="head.html" noresize>
    <frameset cols="15%, *">
        <frame src="left.html" noresize>
        <frame src="body.html" name="body" noresize>
    </frameset>
</frameset>