HTML总结

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

^酸酸

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

阅读量1.9k

点赞数 47

文章标签： html 前端

本文链接：https://blog.csdn.net/2302_81472886/article/details/136747586

版权

一·、html（通用标签语言）

1. html的特点：

简单灵活可扩展平台无关性

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

2. 常用标签

2.1 br、hr标签

br标签 ------ 用来换行 hr标签 ------ 水平分割线，可以设置width和size

2.2 p标签

段落标签

两个相邻的p标签之间会空一行<P></P>

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

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

color属性 ---- 设置颜色颜色的表示法：第一种：英文单词第二种：#rrggbb 三原色 red green blue

2.3 sub、sup、pre、span标签

sub ------ 下标标签

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

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

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

2.4 hn,div标签

hn ------- 标题标签指的是h1,h2,h3,h4,h5,h6 ----------- n的取值只能是1-6 字体会越来越小有加粗的效果

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

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

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

2.5 特殊字符

3. 表单标签

3.1 路径

form一般会和input标签连用

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

<form action="">
用户名： <input type="text" name="" id=""><br>
密码：<input type="password">
</form>

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

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

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

name属性：表单的名称

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

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

3.2 表单元素

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

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

3.2.1 input标签

语法格式： type 的取值： text ----- 文本框 password ---- 密码框 submit ----- 提交按钮 radio ------ 单选按钮 checkbox ----- 多选按钮 reset ----- 重置按钮 button ----- 普通按钮 image ----- 图像按钮 file ------ 文件 hidden ---- 隐藏域 email ---- 邮箱域 color ----- 颜色域 date ----- 日期 time ----- 时间 datetime-local ----- 日期+时间 range ------ 进度条

常见的属性： readonly ------ 只读字段只可以读不能修改 checked ---- 默认选择 disabled ----- 表示禁用不可以点击 autofocus ----- 默认光标的位置 required ----- 不能空白提交

3.2.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>

3.2.3 textarea标签

用来显示文本域

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

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

4. 常见的属性

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

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

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

text ---- 文本的颜色

bgcolor ----- 背景颜色

background ----- 背景图片

<!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 vlink="red" alink="green" link="blue" text="black" bgcolor="Plum" 
background="海绵宝宝.JPG">
 <a href="https://www.baidu.com/">点击我</a>
 <p>
这是一个段落
</p>
 </body>
 </html>

颜色表示法：

1、英文单词

2、#rrggbb

3、rgba() ----- a指的是透明度字体跑马灯（弹幕）

direction------表示滚动的方向，值可以是left，right，up，down，默认为left

behavior------表示滚动的方式，值可以是scroll（连续滚动）slide（滑动一次）alternate（往返滚动）

loop-----表示循环的次数，值是正整数，默认为无限循环

scrollamount-----表示运动速度，值是正整数，默认为6

scrolldelay----表示停顿时间，值是正整数，默认为0，单位似乎是毫秒

align-----表示元素的垂直对齐方式，值可以是top，middle，bottom，默认为middle

bgcolor------表示运动区域的背景色，值是16进制的RGB颜色，默认为白色

height、width------表示运动区域的高度和宽度，值是正整数（单位是像素）或百分数，默认 width=100% height为标签内元素的高度

hspace、vspace------表示元素到区域边界的水平距离和垂直距离，值是正整数，单位是像素。 οnmοuseοver=this.stop()

οnmοuseοut=this.start()------表示当鼠标移上区域的时候滚动停止，当鼠标移开的时候又继续滚动。

<marquee>这波操作666！</marquee>
<marquee behavior="alternate">我来回滚动</marquee> 
<marquee behavior="scroll">我单方向循环滚动</marquee>
<marquee behavior="scroll" direction="up" height="30">我改单方向向上循环滚动
</marquee>       
<marquee behavior="slide">我只滚动一次</marquee> 
<marquee behavior="slide" direction="up">我改向上只滚动一次了</marquee> 
<marquee scrollamount="100">我速度很快.</marquee> 
<marquee scrollamount="50">我慢了些。</marquee> 
<marquee scrolldelay="30">我小步前进。</marquee> 
<marquee scrolldelay="1000" scrollamount="100">我大步前进。</marquee>
<marquee behavior="scroll" direction="up" height="30">我改单方向向上循环滚动
</marquee>       
<marquee behavior="slide">我只滚动一次</marquee> 
<marquee behavior="slide" direction="up">我改向上只滚动一次了</marquee> 
<marquee scrollamount="100">
</marquee> 
<marquee scrollamount="50">我慢了些。</marquee> 
<marquee scrolldelay="30">我小步前进。</marquee> 
<marquee scrolldelay="1000" scrollamount="100">我大步前进。</marquee>

5. a标签

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

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

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

target属性：

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

#+id名称进行链接

6. img标签

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

6.1.1 常见标签

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

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

width ----- 宽度

height ---- 高度单位都是px或%

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

align ---- 位置（图片和文字的位置）取值：top ----- 上对齐 middle ----- 居中对齐 bottom ------ 下对齐（默认对齐） right ----- 右对齐 left ------ 左对齐

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

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

3.5.2 位图标签

usemap 属性

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

area标签属性：

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

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

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

<!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>
 <img src="猫咪.jpg" alt="猫咪" usemap="#cat">
 <map name="cat">
 <area shape="circle" coords="150,125,50" href="D:\重大城科\23级前端1203\代码
\第三天\demo06.html" >
 </map>
 </body>
 </html>

7. 多媒体标签

audio ------ 音频

video ---- -- 视频

controls属性 ----- 播放器的组件

autoplay属性 ---- 自动播放

loop属性 ------ 循环播放

8. 表格布局

table标签包含了thead tbody tfoot tr td标签（平时不写<thead><tbody>）

下列属性都写在table里：

border ----- 设置表格边

width ----- 宽度 height ---- 高度

bgcolor ---- 背景颜色 background ---- 背景图片

align ---- 表示表格的位置 left center right

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

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

cellpadding 、cellspacing都有一个默认值 2px

8.1.1 嵌套表格

在table里再写一个table

 <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>

8.2.2 表格的合并

单元格合并行

rowspan="n" ------ n是一个整数合并行

 <table border="1" cellspacing="0" width="300px" height="300px">
        <tr>
            <td rowspan="2">&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
           
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
  </table>

colspan = "n" ------- n是一个整数合并列

 <table border="1" cellspacing="0" width="300px" height="300px">
        <tr>
            <td colspan="2">&nbsp;</td>
            <td>&nbsp;</td>
            
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
  </table>

9. 列表标签

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

9.1.1有序列表 ---- ol

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

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

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

9.2.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>

9.3.3 数据列表 ----- 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>

10. 多窗口框架

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

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

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

rows ----- 行

<body>
 <iframe src="demo01.html" frameborder="0"></iframe>
 </body>
 <!-- <frameset cols="25%,40%,*">
 <frame src="demo01.html"></frame>
 <frame src="D:\重大城科\23级前端1203\代码\第四天\demo01.html"></frame>
 <frame src="D:\重大城科\23级前端1203\代码\第四天\demo03.html"></frame>
 </frameset> -->

^酸酸

关注

47
点赞
踩
49

收藏

觉得还不错? 一键收藏
1
评论
HTML总结

常见的属性： readonly ------ 只读字段只可以读不能修改 checked ---- 默认选择 disabled ----- 表示禁用不可以点击 autofocus ----- 默认光标的位置 required ----- 不能空白提交。align ---- 位置（图片和文字的位置）取值：top ----- 上对齐 middle ----- 居中对齐 bottom ------ 下对齐（默认对齐） right ----- 右对齐 left ------ 左对齐。
复制链接

扫一扫