HTML基础知识，全是干货

sasasa-

于 2024-03-15 14:53:44 发布

阅读量287

点赞数 5

文章标签： html 前端

本文链接：https://blog.csdn.net/2401_82363377/article/details/136739744

版权

HTML基础知识，讲解详细

一、HTML基础知识

(1)HTML 全称为 HyperText Mark-up Language,翻译为超文本标签语言。

(2)HTML 的结构包括头部(Head)、主体(Body)两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。

(3)需要说明的是 HTML 不是编程语言，而是一种描述性的语言，用于描述超文本中内容的显示方式。

(4)HTML的语法:<标签属性=“值”>内容</标签>

(5)一般来说，html标签都是成对出现，但也有单个的（单标签和双标签）。

<!DOCTYPE html> -----声明一个html文档

<html lang="en"> -----网页的开始

<head> -----网页的头部的开始

网页常用的编码格式：

1、UTF-8 -----通用字符集

2、GB2312 -----简体中文字符集

3、 BIG5 ------繁体中文字符集

4、 GBK ------ GB2312的补充，添加了更多的汉字和特殊符号

<title>Document</title> -----网页的标题

</head> -----网页头部的结束

<body> -----网页内容的开始

</body> -----网页内容的结束

</html> ----- 网页的结束

二、HTML常用的标签

(1)strong和b等标签

<strong>这个是粗体</strong>

(2)换行

<br>标签 -----用来换行，加在要换行的末尾

例：第一行<br>

第二行<br>

(3)水平分割线

<hr>标签 -----水平分割线，可以设置width(宽度)和size(高度),单独一行，加在需要水平分割线的末尾的下一行

例：<hr width="800px" size="8">

(4)p标签

<p>标签 -----段落标签

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

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

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

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

第一种：英文单词

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

例：<p align = "left">

这是一个段落

</p>

这是一个段落

</p>

这是一个段落

</p>

<p>

这是一个段落

</p>

这是字体标签

</font>

(5)sub、sup、pre、span标签

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

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

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

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

例：1、二的三次方: 2<sup>3</sup><br>

2、求前n项和:a<sub>1</sub>+a<sub>2</sub>+a<sub>3</sub>+........+a<sub>n</sub>

3、<p>

鹅鹅鹅

[骆兵王]

鹅鹅鹅，

曲项向天歌。

白毛浮绿水，

红掌拨清波。

</p>

3、<pre>

鹅鹅鹅

[骆兵王]

鹅鹅鹅，

曲项向天歌。

白毛浮绿水，

红掌拨清波。

</pre>

4、<span style="color: blueviolet;font-size: 30px;">

这是一个标准的行内标签

</span>

(6)hn,div标签

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

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

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

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

例：

<h1>这是一个标题</h1>

<h2>这是一个标题</h2>

<h3>这是一个标题</h3>

<h4>这是一个标题</h4>

<h5>这是一个标题</h5>

<h6>这是一个标题</h6>

<div>

这是一个块级标签

</div>

<span>

这是一个行内标签

</span>

(7)特殊字符

空格 ----- 

<小于符号(尖括号的左边) -----&It;

>大于符号(尖括号的右边) ----->

￥人名币符号 -----¥

""双引号 -----"

@符号 -----©

+-符号 -----±

千分号 -----&permil;

➗号 -----÷

三、表单标签

(1)form标签一般会和input标签连用

例：

用户名： <input type="text" name="" id=""><br>

密码：<input type="password">

</form>

(2)action属性 ------ 跳转的路径

(3)路径：

绝对路径：从盘符开始到文件为止的一个路径 D:\重大城科\23级前端1203\代码\第二天\demo01.html

相对路径：源文件相对于目标文件的相对路径 ..\第一天\demo01.htm

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

(5)name属性：表单的名称

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

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

例：

<body>

用户名： <input type="text" name="username" ><br>

密码：<input type="password" name="password"><br>

</form>

</body>

四、表单元素

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

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

(2)input标签

语法格式：

type 的取值：

text ----- 文本框

password ---- 密码框

submit ----- 提交按钮

radio ------ 单选按钮

checkbox ----- 多选按钮

reset ----- 重置按钮

button ----- 普通按钮

image ----- 图像按钮

file ------ 文件

hidden ---- 隐藏域

email ---- 邮箱域

color ----- 颜色域

date ----- 日期

time ----- 时间

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

range ------ 进度条

例：

<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="email">

</form>

常见的属性：

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

checked ---- 默认选择

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

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

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

例：

<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="email">

</form>

(3)select标签

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

属性：selected ------ 默认被选中的选项

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

例；

请选择您的收货地址：

</select>

</form>

(4) textarea标签（用来显示文本域）

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

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

五、常见的属性

（1）a标签 ----- 超链接

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

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

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

target属性：

_blank在新窗口中打开被链接的文档

_self默认，在相同框架中打开被链接文档

_parent在父框架中打开被链接文档

_top在整个框架中打开被链接文档

例：

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

#+id名称进行链接

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<h1 id="top">XXXXX小说</h1>

<p>

.....

</p>

<p>

.....

</p>

<p>

.....

</p>

</body>

</html>

（2）

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

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

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

text ---- 文本的颜色

bgcolor ----- 背景颜色

background ----- 背景图片

例：

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body vlink="red" alink="green" link="blue" text="black" bgcolor="Plum"

background="海绵宝宝.JPG">

<p>

这是一个段落

</p>

</body>

</html>

(3)

颜色表示法：

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 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 scrolldelay="30">我小步前进。</marquee>

<marquee scrolldelay="1000" scrollamount="100">我大步前进。</marquee>

</marquee>

</marquee>

</marquee>

<marquee behavior="scroll" direction="up" height="30">我改单方向向上循环滚动

</marquee> <marquee behavior="slide">我只滚动一次</marquee>

<marquee behavior="slide" direction="up">我改向上只滚动一次了</marquee>

</marquee>

<marquee scrolldelay="30">我小步前进。</marquee>

<marquee scrolldelay="1000" scrollamount="100">我大步前进。</marquee>

六、img标签

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

常见的属性：

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

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

一段话代替描述这个图片）

width ----- 宽度

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

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

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

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

middle ----- 居中对齐

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

right ----- 右对齐

left ------ 左对齐

例：

<body>

上对齐<img src="图片1.png" alt="哆啦" width="200px" height="10%" align="top"

border="1"><br>

下对齐<img src="图片1.png" alt="哆啦" width="200px" height="10%" align="bottom"

border="1"><br>

居中对齐<img src="图片1.png" alt="哆啦" width="200px" height="10%"

align="middle" border="1"><br>

左对齐<img src="图片1.png" alt="哆啦" width="200px" height="10%" align="left"

border="1"><br>

右对齐<img src="图片1.png" alt="哆啦" width="200px" height="10%" align="right"

border="1"><br>

默认对齐<img src="图片1.png" alt="哆啦" width="200px" height="10%" border="1">

</body>

</html>

(2)

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

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

(3)位图

usemap 属性

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

area标签属性：

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

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

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

例：

<!DOCTYPE html>

<head>

</head>

<body>

<area shape="circle" coords="150,125,50" href="D:\重大城科\23级前端1203\代码

\第三天\demo06.html" >

</map>

</body>

</html>

七、多媒体标签

audio ------ 音频

video ---- -- 视频

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

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

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

例：

<!DOCTYPE html>

<head>

<title>多媒体标签</title>

</head>

<body>

</body>

</html>

八、表格布局

table标签

包含了thead tbody tfoot tr td标签

例：

<table>

<tbody> ----- 表格的主干

<tr> ---- 行

<td>第一行第一列</td> ----列

<td>第一行第二列</td>

</tr>

<tr>

<td>第二行第一列</td>

<td>第二行第二列</td>

</tr>

</tbody>

</table>

<table>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

(1) 表格的宽度和高度

width ----- 宽度

height ---- 高度

例:<table border="1" width="200px" height="200px"></table>

(2) 表格的背景

bgcolor ---- 背景颜色

background ---- 背景图片

例：<table border="1" width="400px" height="400px" bgcolor="pink" background="图片1.png">

(3)表格的位置（对齐）

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

例：<table border="1" width="400px" height="400px" bgcolor="pink" background="图片1.png" align="center">

(4) 表格的间距和边距

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

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

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

例：<table border="1" width="300px" height="300px" cellpadding="30"cellspacing="20">

(5)表格的嵌套

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

例：

<tr>

<td>

<tr>

</tr>

</table>

</td>

</tr>

</table>

(6)表格的合并

单元格合并行

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

例：

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

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

例：

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

九、列表标签

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

(1)有序列表 ---- ol

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

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

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

例：

</ol>

</ol>

</ol>

</ol>

</ol>

(2) 无序列表 ----- ul

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

<ul>

</ul>

</ul>

</ul>

</ul>

(3)数据列表 ----- dl

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

<dl>

<dt>这是数据列表的标题</dt>

</dl>

<dl>

1 <dd>这是内容4</dd>

</dl>

十、多窗口框架

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

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

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

rows ----- 行

例：<body>

</body>

<!-- <frameset cols="25%,40%,*">

</frameset> -->

sasasa-

关注

5
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
HTML基础知识，全是干货

例：<table border="1" width="400px" height="400px" bgcolor="pink" background="图片1.png" align="center"><img src="图片1.png" alt="哆啦" width="200px" height="10%" border="5"><br>默认对齐<img src="图片1.png" alt="哆啦" width="200px" height="10%" border="1">
复制链接

扫一扫