繁依Fanyi0

这个屌丝很懒，什么也没留下！

热门标签

HTML总结_html标签 html字符串

作者：繁依Fanyi0 | 2024-02-16 11:55:22

踩

html标签 html字符串

1.HTML的介绍

HTML 全称为 HyperText Mark-up Language，翻译为超文本标签语言，标签也称作标记或者元素。 HTML 是目前网络上应用最为广泛的技术之一，也是构成网页文档的主要基石之一。HTML文本是由 HTML 标签组成的描述性文本，HTML 文本可以说明文字、图形、动画、声音、表格、链接等。超级文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”和存在媒体文件（也就是超越了普通文本文件）。

1.1.HTML的主要部分及功能

HTML 的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。需要说明的是 HTML 不是编程语言，而是一种描述性的语言，用于描述超文本中内容的显示方式。比如，文字以什么颜色、大小显示，图片以什么尺寸、位置来显示等。这些描述都是用 HTML 标签来描述的

1.2.HTML的特点及推荐软件

特点：简单灵活，可扩展性，平台无关性；

推荐软件：sublimeText VScode Hbuilder(专业前端人员用的比较多)

2.HTML的基本构造

<!DOCTYPE html> -------- 声明HTML5文档
<html> --------网页的开始
<head> -------网页的头部
<title></title> --------标题
</head>
<body> --------网页的内容(网页中所显示的内容）
</body>
</html>

2.1.第一个简单的HTML

<!DOCTYPE html>
<html>
<head>
<title>我的第一个网页</title> --------网页标题为：我的第一个网页
</head>
<body>
HELLO WORLD! --------网页中显示的内容为：HWLLO WORLD！
</body>
</html

效果图如下：

2.2.HTML中的常见标签总结

<strong> <b> ---- 字体加粗
<i> <em> ----- 斜体
<u> ---- 文字下面加上下划线
<del> ----- 删除线
<br> ---- 换行
<hr> ------ 水平分割线 width属性设置的是长度单位可以是px也可以是% size属性指的是
宽度
<p> ---- 段落标签 align 属性的取值 left center right,默认的位置是居左
<font> ---- 用来修饰字体 color 字体的颜色颜色的表示法：第一种:单词第二种：三原色
rrggbb(red green blue) 十六进制 #0000ff

<sub> --- 下标
<sup> ---- 上标
<pre> ---- 用来原样输出内容
<span> --- 标准的行内标签，用来修饰文本
行内标签的特点：只占据内容的部分，不会自动换行，直到铺满一行才会换行
hn （n的取值1~6）------ 标题标签字体大小是由一到六从大到小加粗换行
<div> ----- 盒子布局
块级标签：自动换行 ----- 布局 br hr p hn

2.3 表单标签

form ----- 表单标签一般会和 input标签连用

form的属性： action ---- 取值：文件路径 ---- 表单提交后处理的表单文件相对路径和绝对路径相对路径：当前源文件和目标文件的相对路径的位置 ---- 建议使用 ../demo01.html 绝对路径：从盘符开始依次找到想要找到的文件的文件路径，路径+文件名 D:\重大城科\前端0601\第二天\demo\demo01.html

name ---- 取值：字符串 ---- 表单的名称 method -- -- 取值：请求方式 get post -----用来明确表示表单提交的方式

get和post请求的区别：

get请求会将用户名和密码暴露在地址栏上，不安全，post请求相较于比较安全共同点：都是可以让后台接收数据的。

表单标签一般会和input标签、textarea标签、select标签连用

2.3.1 input标签

语法格式：

type属性的取值：
type = "text" ---- 文本框(单行)
type = "password" ---- 密码框
type = "radio" ---- 单选按钮
type = "chexbox" ---- 多选按钮
type = "submit" --- 提交按钮
type = "reset" ---- 复位按钮重置按钮
type = "button" ---- 普通的按钮
type = "image" ---- 图像按钮
type = "file" ----- 上传文件文件域
type = "hidden" ----隐藏域用户在页面上不可见的内容提交用户不可以看见的一些信息
type = "email" ----- 邮箱
type = "color"
type = "date" ---- 日期
type="datetime-local" --- 日期+时间
type="time"----- 时间
type="range" --- 进度条

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

效果图如下：

2.3.2 select标签

select标签表示下拉选择框会和option标签连用 option表示的下拉选择框中的选项

属性：

value ---- 选项的值

name ---- 下拉框的名称

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

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

效果图如下：

2.3.3 textarea标签

语法结构：<textarea name = "" cols = "" rows = "">内容</textarea>

cols ---- 多少列表示的是文本域的宽度

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

效果图如下：

2.4 常用的一些属性

常用属性：

Text --- 文本颜色

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

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

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

bgcolor ---- 背景颜色

background --- 背景图片

一般不建议背景使用图片背景图片和背景颜色同时存在时候要注意优先级的问题

常见的符号表示：

----- 空格
< ----- <
> ----- >
¥ ---- ￥
" ----- "
©-------©
®-------------®
±-------±
‰--------‰
÷--------÷

跑马灯：

2.5 a标签（超链接标签）

语法: <a href ="" ></a>

Target属性：

锚点：

回到顶部：

2.6 img标签

2.6.1 常见的属性

src属性 ---- 指代图片的路径（相对路径和绝对路径）

alt属性 ---- 表示的图像的代替文本（路径错误或者图片损坏或者浏览器的问题显示不出图片的时候）

width 和 height ----- 控制图片的大小单位可以使用px %

border -------- 边框默认边框的取值0 没有边框 >=1 数字越大边框就越大（大小指的是边框的粗细）

align ----位置指的是文字和图片的位置取值 center left right bottom middle top,默认的下对齐

title ---- 图片标题，用来显示描述图片的文字，鼠标悬停在图片上的时候会出现的文字

注意：如果没有设置Alt属性的时候，title就是Alt的取值

2.6.2 位图

usemap属性

map标签和area标签连用

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

coords属性 ----- 点击形状的大小

href属性 ---- 表示跳转的路径

2.6.3 多媒体标签

视频标签 video 音频标签 audio

src ----- 表示音频和视频的文件位置（相对路径或者绝对路径）

controls -----表示的是显示播放器的组件

autoplay ----- 自动播放

2.7 表格布局

表格的作用：用来描述具有二维结构的数据

包括的标签有：table thead tbody tfoot tr td

table标签 ------- 用于定义一个表格

thead ---- 定义表头

tr ---- 行

td ---- 列单元格必须放在tr

tbody --- 主干

tfoot----- 尾

效果图如下：

2.7.1 表格的属性

1.表格的边框 border 属性 ------ 边框取值是数字单位是像素当取值为0的时候表示没有边框（默认）大于0的时候表格是有边框的，数值一定要为整数

2.表格的宽和高：width ---- 表示的是表格宽度； height ---- 表示表格高度

3.表格的对齐： align ------ 表示的是表格对齐方式 left center right，默认是left

4.表格的背景 bgcolor ----- 表示的是表格的背景颜色； background ---- 表示背景图像

注意：表格的tr和td也是可以设置宽度和高度已经背景颜色；如果行设置了高度，列也设置了高度显示出来的高度是行和列中最高的高度值。

5.表格的间距和边距 cellpadding ----- 表示表格边距（单元格内元素距离单元格边缘的距离） cellspacing ----- 表示表格间距（单元格与单元格之间的距离）

如：cellpadding="10" ,cellspacing="10"表示的是边距和间距分别的取值为10px ,如果不设置间距和边距的值，默认取值2px

2.7.2 表格的嵌套

表格嵌套指的是一个表格放在另一个表格单元格中。可以用来布局

2.7.3 表格合并

单元格跨行---- 合并的是行

rowspan="n" ----- n是一个整数，表示的是单元格在垂直方向跨的行数

单元格跨列-----合并的是列

colspan="n" -----n是一个整数，表示的是单元格在水平方向跨的列数

2.8 列表标签

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

有序列表 ol：

效果图如下：

type属性 ----- 表示设置序号的种类，1、A、a、I、i,默认取值是1

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

reversed ---- 降序（反序）

无序列表 ul：

效果图如下：

属性值：

2.8.1 数据列表（dl）

效果图如下：

2.9 多窗口框架

一个页面可以显示多个窗口 ----- frameset (4.0版本多窗口 ;5.0版本中内嵌窗口 )

注意：如果要使用frameset标签，就不能和body标签连用

效果图如下：

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/92931

HTML总结_html标签 html字符串

1.HTML的介绍

1.1.HTML的主要部分及功能

1.2.HTML的特点及推荐软件

2.HTML的基本构造

2.1.第一个简单的HTML

2.2.HTML中的常见标签总结

2.3 表单标签

2.3.1 input标签

2.3.2 select标签

2.3.3 textarea标签

2.4 常用的一些属性

2.5 a标签（超链接标签）

2.6 img标签

2.6.1 常见的属性

2.6.2 位图

2.6.3 多媒体标签

2.7 表格布局

2.7.1 表格的属性

2.7.2 表格的嵌套

2.7.3 表格合并

2.8 列表标签

2.8.1 数据列表 （dl）

2.9 多窗口框架

2.8.1 数据列表（dl）