HTML总结

最新推荐文章于 2024-08-20 19:23:57 发布

祈白.

最新推荐文章于 2024-08-20 19:23:57 发布

阅读量668

点赞数 10

文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/xuehan5205/article/details/135978800

版权

HTML的常用标签：

<!DOCTYPE html> ------- 声明一个html的文档
<html lang="en"> ------- 网页的开始
<head> -------- 网页的头部 的开始
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title> ------ 网页的标题
</head> ------ 网页头部的结束
<body> ------ 网页内容的开始
</body> ------- 网页内容的结束
</html> ------ 网页的结束

1.1常用标签

html : 标签都是成对出现的（单标签和双标签）

1.1.1 strong 和 b等标签

注释：解释说明的部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个页面</title>
</head>
<body>
    <!--这是注释的部分-->
        哈哈哈哈哈
    <strong>这个是粗体</strong>
    <b>也是粗体</b>
    <em>这是斜体</em>
    <i>也是斜体</i>
    <u>下划线</u>
    <del>删除线</del>
</body>
</html>

1.1.2 br 和 hr 标签

br 标签 ------ 用来换行

hr 标签 ------ 水平分割线，可以设置width和size

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>br、hr标签</title>
</head>
<body>
    第一行<br>
    第二行<br>
    第三行
<hr width="800px" size="8">
</body>
</html>

1.1.3 p 标签和 font 标签

p 标签段落标签

两个相邻的p标签之间会空一行

align 属性位置 left(默认值) right center

font标签 ------- 设置字体

color属性 ---- 设置颜色颜色的表示法：

第一种：英文单词

第二种：#rrggbb 三原色 red green blue

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    这是第一行<br>
        这是第二行
    <p align = "left">
        这是一个段落
    </p>
    <p align = "center">
        这是一个段落
    </p>
    <p align = "right">
        这是一个段落
    </p>
    <p>
        这是一个段落
    </p>
    <font color="#CC0033">
        这是字体标签
    </font>
</body>
</html>

1.1.4 sub、sup、pre、span标签

sub标签 ------ 下标标签

sup ------- 上标标签

pre ------ 用来原样输出内容

span ------ 修饰文本的标签 ---- 标准的行内标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    二的三次方: 2<sup>3</sup><br>
    求前n项和:a<sub>1</sub>+a<sub>2</sub>+a<sub>3</sub>+........+a<sub>n</sub>
    <p>
        鹅鹅鹅
        [骆兵王]
        鹅鹅鹅，
        曲项向天歌。
        白毛浮绿水，
        红掌拨清波。
    </p>
    <pre>
        鹅鹅鹅
        [骆兵王]
        鹅鹅鹅，
        曲项向天歌。
        白毛浮绿水，
        红掌拨清波。
    </pre>
    <span style="color: blueviolet;font-size: 30px;">
        这是一个标准的行内标签
    </span>
</body>
</html>

1.1.5 hn,div 标签

hn ------- 标题标签指的是h1,h2,h3,h4,h5,h6 -----

------ n的取值只能是1-6 字体会越来越小有加粗的效果

div ------- 标准的块级标签------ 盒子布局

行内标签：不能自动换行，除非这一行内容铺满整个页面才会换行 span

块级标签：自动换行，独占一行 div hn p hr

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>这是一个标题</h1>
    <h2>这是一个标题</h2>
    <h3>这是一个标题</h3>
    <h4>这是一个标题</h4>
    <h5>这是一个标题</h5>
    <h6>这是一个标题</h6>
    <div>
        这是一个块级标签
    </div>
    <div>
        这是一个块级标签
    </div>
    <div>
        这是一个块级标签
    </div>
    <span>
        这是一个行内标签
    </span>
    <span>
        这是一个行内标签
    </span>
    <span>
        这是一个行内标签
    </span>
</body>
</html>

1.1.6 特殊字符

1.2 表单标签

form标签一般会和input标签连用

action属性 ------ 跳转的路径

路径： 绝对路径：从盘符开始到文件为止的一个路径

相对路径：源文件相对于目标文件的相对路径

method属性：用来明确表单提交的方式 get post ,默认值是get

name属性：表单的名称

get请求：不是特别安全，会把用户信息暴露在地址栏

post请求：相较于get会安全一点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单标签</title>
</head>
<body>
    <form action="..\第一天\demo01.html" method="post" name="register">
        用户名： <input type="text" name="username" ><br>
        密码：<input type="password" name="password"><br>
    <input type="submit">
    </form>
</body>
</html>

1.2.1表单元素

表单元素----- 文本框、密码框、按钮、下拉列表框

一般是由input，textarea，select 标签构成，都需要使用在form标签里面

1.2.1.1input标签

语法格式：

<input type="表单的类型" name="表单的名称" value="表单的值">

type 的取值： text ----- 文本框

password ---- 密码框、

submit ----- 提交按钮

radio ------ 单选按钮

checkbox ----- 多选按钮

reset ----- 重置按钮

button ----- 普通按钮

image ----- 图像按钮

file ------ 文件

hidden ---- 隐藏域

email ---- 邮箱域

color ----- 颜色域

date ----- 日期

time ----- 时间

datetime-local ----- 日期+时间

range ------ 进度条

<form action="demo01.html">
    <p>
    用户名:<input type="text">
    </p>
    <p>
    密码:<input type="password">
    </p>
    <p>
    请选择您的性别：<input type="radio" name="gender">男
    <input type="radio" name="gender">女
    </p>
    <p>
    请选择您的爱好：<input type="checkbox" name="aihao">唱歌
    <input type="checkbox" name="aihao">跳舞
    <input type="checkbox" name="aihao">rap
    <input type="checkbox" name="aihao">打篮球
    </p>
    <input type="submit" value="登录">
    <input type="reset" >
    <input type="button" value="普通">
        <!-- <input type="image" src="按钮.jpg"> -->
    <input type="file">
    <input type="hidden" value="1234567"><br>
        请输入您的邮箱：<input type="email">
    <input type="color">
    <input type="date">
    <input type="time">
    <input type="datetime-local">
    <input type="range" >
</form>

常见的属性：

readonly ------ 只读字段只可以读不能修改

checked ---- 默认选择

disabled ----- 表示禁用不可以点击

autofocus ----- 默认光标的位置

required ----- 不能空白提交

<form action="demo01.html">
    <p>
        用户名:<input type="text" required>
    </p>
    <p>
        用户名:<input type="text" readonly value="lisi" disabled>
    </p>
    <p>
        密码:<input type="password" autofocus>
    </p>
    <p>
        请选择您的性别：<input type="radio" name="gender" checked>男
    <input type="radio" name="gender">女
    </p>
    <p>
        请选择您的爱好：<input type="checkbox" name="aihao">唱歌
        <input type="checkbox" name="aihao">跳舞
        <input type="checkbox" name="aihao">rap
        <input type="checkbox" name="aihao">打篮球
    </p>
    <input type="submit" value="登录">
    <input type="reset" >
    <input type="button" value="普通">
    <!-- <input type="image" src="按钮.jpg"> -->
    <input type="file">
    <input type="hidden" value="1234567"><br>
        请输入您的邮箱：<input type="email">
    <input type="color">
    <input type="date">
    <input type="time">
    <input type="datetime-local">
    <input type="range" >
</form>

1.2.1.2 select标签

下拉列表框 ------ 一般和option标签连用

属性：

selected ------ 默认被选中的选项

multiple------- 以列表的形式展示

<form action="">
        请选择您的收货地址：
    <select name="" id="" multiple>
        <option value="">重庆</option>
        <option value="">成都</option>
        <option value="">贵州</option>
        <option value="" selected>云南</option>
        <option value="">陕西</option>
    </select>
</form>

1.2.1.3 textarea标签

用来显示文本域

cols --------- 多少列，用于表示文本域的宽度

rows -------- 多少行，用于表示文本域的高度

<textarea name="" id="" cols="60" rows="50">这个家伙很懒，什么都没有留下</textarea>

1.3 常见的属性

a标签 ----- 超链接

<a href="https://www.baidu.com/">点击我</a

vlink ----- 访问过的超文本链接的颜色

alink ---- 激活超文本链接的颜色

link ------ 超文本链接的颜色

text ---- 文本的颜色

bgcolor ----- 背景颜色

background ----- 背景图片

颜色表示法：

1、英文单词

2、#rrggbb

3、rgba() ----- a指的是透明度

1.4 a标签

a标签表示的超文本链接标签 ------ 用来进行页面的跳转

href 属性放的是要跳转的路径

target属性：

<a href="https://www.baidu.com/">点击我</a>
<a href="https://www.baidu.com/" target="_blank">点击我</a>
<a href="https://www.baidu.com/" target="_self">点击我</a>
<a href="https://www.baidu.com/" target="_parent">点击我</a>
<a href="https://www.baidu.com/" target="_top">点击我</a>

锚点：使页面的展示到达某一个指定的地点

#+id名称进行链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1 id="top">XXXXX小说</h1>
    <a href="#01"><h3>第一章</h3></a>
    <a href="#02"><h3>第二章</h3></a>
    <a href="#03"><h3>第三章</h3></a>
    <a href="#04"><h3>第四章</h3></a>
    <a href="#05"><h3>第五章</h3></a>
    <a href="#06"><h3>第六章</h3></a>
    <a href="#07"><h3>第七章</h3></a>
    <a href="#08"><h3>第八章</h3></a>
    <p>
        <a href="" id="01">第一章</a><br>
        .....
    </p>
    <p>
        <a href="" id="02">第二章</a><br>
        .....
    </p>
    <p>
        <a href="" id="03">第三章</a><br>
        .....
    </p>
    <p>
        <a href="" id="04">第四章</a><br>
        .....
    </p>
    <p>
        <a href="" id="05">第五章</a><br>
        .....
    </p>
    <p>
        <a href="" id="06">第六章</a><br>
        .....
    </p>
    <p>
        <a href="" id="07">第七章</a><br>
        .....
    </p>
    <p>
        <a href="" id="08">第八章</a><br>
        .....
    </p>
        <a href="#top">回到顶部</a>
</body>
</html>

1.5 img标签

图片常见的格式：GIF JPG PNG BMP等

1.5.1 常见的属性

src ----- 图片的路径（绝对路径和相对路径）

alt ----- 代替图片文本的内容（图片的路径错误或者因为浏览器的原因打不开这个图，用一个词或者一段话代替描述这个图片）

width ----- 宽度 height ---- 高度单位都是px %

border ------ 边框默认值是0

align ---- 位置（图片和文字的位置）

取值： top ----- 上对齐

middle ----- 居中对齐

bottom ------ 下对齐（默认对齐）

right ----- 右对齐

left ------ 左对齐

title ----- 图片的标题 ------ 用来显示描述图片的文字

<img src="图片1.png" alt="哆啦" title="这是一张哆啦A梦的图片">

1.5.2 位图

usemap 属性

map标签一般会和area标签进行连用

area标签属性：

shape ------- 鼠标点击的形状

coords ----- 表述鼠标点击形状的大小

href ----- 表示要跳转的路径

1.6 多媒体标签

audio ------ 音频

video ---- -- 视频

controls属性 ----- 表示的是播放器的组件

autoplay属性 ---- 表示的自动播放

loop属性 ------ 表示的是循环播放

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多媒体标签</title>
</head>
<body>
    <audio src="bgm.mp3" controls autoplay loop></audio>
    <video src="花园宝宝1.mp4" controls width="300px" height="200px"></video>
</body>
</html>

1.7 表格布局

table标签

包含了thead tbody tfoot tr td标签

<table>
    <thead>表头</thead>
        <tbody> ----- 表格的主干
            <tr> ---- 行
                <td>第一行第一列</td> ----列
                <td>第一行第二列</td>
            </tr>
            <tr>
                <td>第二行第一列</td>
                <td>第二行第二列</td>
            </tr>
        </tbody>
    <tfoot>表尾</tfoot>
</table>

<table>
    <tr>
        <td>序号</td>
        <td>姓名</td>
        <td>专业</td>
    </tr>
    <tr>
        <td>1</td>
        <td>张三</td>
        <td>软件工程</td>
    </tr>
    <tr>
        <td>2</td>
        <td>李四</td>
        <td>物联网</td>
    </tr>
    <tr>
        <td>3</td>
        <td>王五</td>
        <td>区块链</td>
    </tr>
</table>

1.7.1 表格的边框

border ----- 设置表格边框

1.7.2 表格的宽度和高度

width ----- 宽度

height ---- 高度

1.7.3 表格的背景

bgcolor---- 背景颜色

background ---- 背景图片

1.7.4 表格的位置（对齐）

align ---- 表示表格的位置

left 左对齐

center 中心对齐

right 右对齐

1.7.5 表格的间距和边距

cellpadding ---- 表示的是表格边距（表示单元格内元素距离单元格边框的距离）

cellspacing------ 表示的是表格的间距（表示的是单元格和单元格之间的距离）

1.7.6 表格的嵌套

表格里面可以嵌套另一个表格

<table border="1" width="300px" height="300px" bgcolor="pink">
<tr>
    <td>&nbsp;</td>
        <td>
            <table border="1" width="200px" height="300px" bgcolor="green">
                <tr>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                </tr>
            </table>
        </td>
    </tr>
</table>

1.7.7 表格的合并

单元格合并行：

rowspan="n" ------ n是一个整数，表示在单元格垂直方向去跨行（合并行）

colspan = "n" ------- n是一个整数，表示在单元格水平方向去跨列（合并列）

1.8 列表标签

主要有三种——有序、无序、数据列表

1.8.1 有序列表 ---- ol

type 属性 ----- 表示设置序号的种类，默认值是数值1

start属性 ------ 序号开始的位置

reversed属性----- 反序（降序）

<ol type="1" start="7" reversed>
<li>前端</li>
<li>前端</li>
<li>前端</li>
<li>前端</li>
</ol>
<ol type="A" start="C" reversed>
<li>前端</li>
<li>前端</li>
<li>前端</li>
<li>前端</li>
</ol>
<ol type="a">
<li>前端</li>
<li>前端</li>
<li>前端</li>
<li>前端</li>
</ol>
<ol type="I" start="II">
<li>前端</li>
<li>前端</li>
<li>前端</li>
<li>前端</li>
</ol>
<ol type="i">
<li>前端</li>
<li>前端</li>
<li>前端</li>
<li>前端</li>
</ol>

1.8.2 无序列表 ----- ul

type属性 ----- 无序列表的样式 disc（默认值实心圆）circle(空心圆) square(实心方块)

<ul>
    <li>前端</li>
    <li>前端</li>
    <li>前端</li>
    <li>前端</li>
    <li>前端</li>
</ul>
<ul type="disc">
    <li>前端</li>
    <li>前端</li>
    <li>前端</li>
    <li>前端</li>
    <li>前端</li>
</ul>
<ul type="circle">
    <li>前端</li>
    <li>前端</li>
    <li>前端</li>
    <li>前端</li>
    <li>前端</li>
</ul>
<ul type="square">
    <li>前端</li>
    <li>前端</li>
    <li>前端</li>
    <li>前端</li>
    <li>前端</li>
</ul>

1.8.3 数据列表 ----- dl

<dl>
    <dt>这是数据列表的标题</dt>
    <dd>这是内容1</dd>
    <dd>这是内容2</dd>
    <dd>这是内容3</dd>
    <dd>这是内容4</dd>
    <dd>这是内容5</dd>
</dl>

HTML5之后一个dl里面可以包含多个dt

<dl>
    <dt>地方新闻</dt>
        <dd>这是内容1</dd>
        <dd>这是内容2</dd>
        <dd>这是内容3</dd>
        <dd>这是内容4</dd>
        <dd>这是内容5</dd>
    <dt>国际新闻</dt>
        <dd>这是内容1</dd>
        <dd>这是内容2</dd>
        <dd>这是内容3</dd>
        <dd>这是内容4</dd>
        <dd>这是内容5</dd>
    <dt>国内新闻</dt>
        <dd>这是内容1</dd>
        <dd>这是内容2</dd>
        <dd>这是内容3</dd>
        <dd>这是内容4</dd>
        <dd>这是内容5</dd>
</dl>

1.9 多窗口框架

一个页面可以显示多个窗口 -------- framset 标签 --------- 不能和body标签连用

HTML5之后不支持这个标签，使用的是iframe标签

cols ------- 定义页面列方向的尺寸或者数目

rows ----- 行

祈白.

关注

10
点赞
踩
15

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML总结

一个页面可以显示多个窗口 -------- framset 标签 --------- 不能和body标签连用。colspan = "n" ------- n是一个整数，表示在单元格。width ----- 宽度 height ---- 高度单位都是px %shape ------- 鼠标点击的形状。title ----- 图片的标题 ------ 用来显示描述图片的文字。bottom ------ 下对齐（默认对齐）a标签表示的超文本链接标签 ------ 用来进行页面的跳转。
复制链接

扫一扫