第二十五课：Web前端，HTML标签

最新推荐文章于 2021-02-10 14:00:00 发布

xinyoulinxi0512

最新推荐文章于 2021-02-10 14:00:00 发布

阅读量140

点赞数

本文链接：https://blog.csdn.net/xinyoulinxi0512/article/details/108130979

版权

这里写目录标题

HTML
- 文本标签

HTML

HTML：超文本标记语言，展示页面内容
CSS：美化页面
JavaScript：动态页面效果

标签www.baidu.com—大小写都可
预定义标签：有规范，已经定义好的标签
<a 属性 = “属性值”>标签体
<a 属性 = “属性值”/> 自闭和标签，没有标签体

文本标签

1、标题标签：h1~h6，数字越大，字体越小，标题自带换行
2、段落标签：p，自带换行
3、字体样式标签：strong ，b， u， i
4、字体标签：font[size color]
分割线：hr[size noshade width align]
换行：br

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本标签</title>
</head>
<br>
<!-- 标题标签 -->
<h1>1级标题</h1>
<h2>2级标题</h2>>
<!-- 2.段落标签，br：换行符 -->
<p>
    炉石传说真<br/>好玩
</p>
<!--3.文本加粗-->
<strong>
    文本加粗
</strong>
<b>b</b>
<i>i</i>
<u>u</u></html></br>

<!--4.字体标签，控制大小和颜色-->
<font size="45" color="aqua\">sss</font>></br>
<font size="45" color="red">sss</font>></br>
<font size="45" color="#ffffff">sss</font>></br>
<font size="45" color="#ff00ff">sss</font>></br>
<font size="45" color="#f0f">sss</font>></br>

<!--5.分割线
size = 高度，
noshade：实心，属性名和属性值一致，可以简写
width:宽度
align：对齐方式，center为默认居中
-->
<hr size="5" noshade="noshade" >
</body>
</html>

多媒体标签

1、图片: img [src width height title alt]
2、视频: video [src width height title controls autoplay loop]
3、音频: audio [src controls autoplay loop]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多媒体标签</title>
</head>
<body>
<!--src：图片路劲
width:像素值，百分比
height：像素值，百分比
width和height按比例自动设置大小
alt：图片不能正常加载时显示的文本
title：鼠标悬停上时有标题
-->
<img src="img/index.png" width="50%" alt="你好" title="不好"/>

<!--视频标签
controls默认值就是controls，出现播放按钮
autoplay默认值就是antoplay，自动播放
loop默认值就是loop，循坏
-->
<video  controls loop autoplay width="1000px">
    <!--给多个资源-->
    <source src ="img/01.mp4"/>
</video>>
<!-- 使用其他平台的视频资源-->
<iframe src="//player.bilibili.com/player.html?aid=711131139&bvid=BV1tD4y1Q7Uz&cid=207938531&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

<!--音频标签
也可以使用source资源，和视频都一样
-->
<audio src=""/>
</body>
</html>

列表标签

1、有序列表: ol [type-(1 a A i I) start]
2、无序列表: ul [type-(circle square disc)]
3、列表项: li

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表标签</title>
</head>
<body>
<!-- 有序列表：带序号 ol
自带换行
-->
<ol type="a" start="2">
    <li> 苹果</li>
    <li> 香蕉</li>
    <li> 菠萝</li>
</ol>

<!-- 无序列表：不带序号ul
type:标识类型 - circle square disc
-->
<ul type="circle">
    <li>piangguo</li>>
    <li>piangguo</li>>
    <li>piangguo</li>>
</ul>

</body>
</html>

超链接列表

a: href - 必不可少的，超链接地址

target - 超链接打开方式 _self _blank

链接到当前页面的其他位置 -> 跳转锚点
1.设置锚点简介编辑
2.跳转锚点跳转到简介编辑

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接</title>
</head>
<body>
<!--
href，超链接地址
target，超链接打开方式，_self当前页面，_blank新页面
 -->
<a href="http://www.baidu.com" target="_blank">
超链接
</a>
</body>
</html>

表格标签

table: border-边框 cellspacing-单元格间隙 width-表格宽度

height-表格高度 cellpadding-表格内容和边框之间的距离

bgcolor-表格背景颜色 align-表的对齐方式

单元格：td(内容) th(表头，自带加粗居中效果)

行：tr ， rowspan: 跨行， colspan: 跨列

表头：thead 唯一
表格内容：tbody 多个
表尾：tfoot 唯一
表的标题：caption

属性：align[tbody tr td 内容居中]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格标签</title>
</head>
<body>
<!-- 表格标签
<table>
<td>内容，th加粗，居中
 border边框
 cellspacing单元格间距
 width表格大小，自动按比例调整
 height高度
 cellpadding，表格中的内容和边框的间距
 bgcolor表格中的背景颜色
 caption表的标题
 align设置表居中
 rowspan：跨行
 colspan：跨列
 -->
<table border="1" cellspacing="0" align="centre" >
    <caption>学生成绩表</caption>
<thead>
    <tr>
        <td>编号</td>
        <td>姓名</td>
        <td>性别</td>
        <td>成绩</td>
    </tr>
</thead>

<tbody>
    <tr>
        <td>1</td>
        <td>小龙女</td>
        <td>女</td>
        <td>100</td>
    </tr>
    <tr>
        <td>2</td>
        <td>杨过</td>
        <td>男</td>
        <td rowspan="2">90</td>
    </tr>
    <tr>
        <td>3</td>
        <td>金轮法王</td>
        <td>男</td>
    </tr>

</tbody>

<tfoot>
    <tr>
        <td>总成绩</td>
        <td colspan="3">190</td>
    </tr>
</tfoot>

</table>
</body>
</html>

框架标签

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

xinyoulinxi0512

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第二十五课：Web前端，HTML标签

这里写目录标题HTML文本标签多媒体标签列表标签超链接列表表格标签框架标签HTMLHTML：超文本标记语言，展示页面内容CSS：美化页面JavaScript：动态页面效果标签www.baidu.com—大小写都可预定义标签：有规范，已经定义好的标签<a 属性 = “属性值”>标签体<a 属性 = “属性值”/> 自闭和标签，没有标签体文本标签1、标题标签：h1~h6，数字越大，字体越小，标题自带换行2、段落标签：p，自带换行3、字体样式标签：strong ，b
复制链接

扫一扫