枯燥且抽象的HTML初步总结

石头猫灯

已于 2024-02-20 16:08:47 修改

阅读量1.5k

点赞数 42

文章标签： html

于 2024-02-20 16:04:41 首次发布

本文链接：https://blog.csdn.net/2301_80800656/article/details/136176158

版权

HTML 全称为 HyperText Mark-up Language，翻译为超文本标签语言，标签也称作标记或者元
素。

1990年出现，web之父 Tim Berners-Lee 发布了《HTML标签》的论文。

HTML有着简单灵活、可扩展、平台无关性等特点。

HTML语法结构： <标签属性="值">内容</标签> 。
<body> ------ 网页内容的开始
</body> ------- 网页内容的结束

【1】strong和b为粗体标签；em和i为斜体标签；u为下划线标签；del为删除线标签。

【2】br标签 ------ 用来换行注：<br>只缀在末尾。
hr标签 ------ 水平分割线，可以设置width和size

【3】p标签为段落标签，两个相邻的p标签之间会空一行；align 属性-------设置内容位置， left为默认值；font标签 ------- 设置字体；color属性 ---- 设置颜色，颜色的表示法：第一种：英文单词第二种：#rrggbb 三原色 red green blue。

【4】sub标签 ------ 下标标签；sup ------- 上标标签；pre ------ 用来原样输出内容；span ------ 修饰文本的标签 ---- 标准的行内标签。

【5】hn ------- 标题标签指的是h1到h6 ，n的取值只能是1-6，字体会越来越小，有加粗的
效果；div ------- 标准的块级标签------ 盒子布局；行内标签：不能自动换行，除非这一行内容铺满整个页面才会换行如： span；块级标签：自动换行，独占一行如：div hn p hr。

【6】form标签为表单标签，一般会和input标签连用。action属性 ------ 跳转的路径，分为绝对路径和相对路径；method属性：用来明确表单提交的方式 get post ,默认值是get；get请求：不是特别安全，会把用户信息暴露在地址栏；post请求：相较于get会安全一点。

【7】<input type="表单的类型" name="表单的名称" value="表单的值">。type 的取值：text ----- 文本框；password ---- 密码框；submit ----- 提交按钮；radio ------ 单选按钮；checkbox ----- 多选按钮；reset ----- 重置按钮；button ----- 普通按钮；image ----- 图像按钮；file ------ 文件;hidden ---- 隐藏域;email ---- 邮箱域;color ----- 颜色域;date ----- 日期;time ----- 时间;datetime-local ----- 日期+时间;range ------ 进度条。常见的属性：readonly ------ 只读字段只可以读不能修改；checked ---- 默认选择；disabled ----- 表示禁用不可以点击；autofocus ----- 默认光标的位置；required ----- 不能空白提交。

【8】 select标签为下拉列表框 ------ 一般和option标签连用。属性：selected ------ 默认被选中的选项。multiple------- 以列表的形式展示。

【9】textarea标签用来显示文本域。cols --------- 多少列，用于表示文本域的宽度；rows -------- 多少行，用于表示文本域的高度。
【10】常见的属性：vlink ----- 访问过的超文本链接的颜色；alink ---- 激活超文本链接的颜色；link ------ 超文本链接的颜色；text ---- 文本的颜色；bgcolor ----- 背景颜色；background ----- 背景图片；direction------表示滚动的方向，默认为left；behavior------表示滚动的方式，值可以是scroll（连续滚动）slide（滑动一次）alternate（往返滚动）；loop-----表示循环的次数，值是正整数，默认为无限循环；scrollamount-----表示运动速度，值是正整数，默认为6；scrolldelay----表示停顿时间，值是正整数，默认为0，单位似乎是毫秒；align-----表示元素的垂直对齐方式，默认为middle；bgcolor------表示运动区域的背景色，值是16进制的RGB颜色，默认为白色；height、width------表示运动区域的高度和宽度，值是正整数（单位是像素）或百分数，默认width=100% height为标签内元素的高度；hspace、vspace------表示元素到区域边界的水平距离和垂直距离，值是正整数，单位是像素；οnmοuseοver=this.stop() οnmοuseοut=this.start()------表示当鼠标移上区域的时候滚动停止，当鼠标移开的时候又继续滚动。

【11】a标签 ----- 超链接，href 属性放的是要跳转的路径；target属性：
#+id名称进行链接为锚点，使页面的展示到达某一个指定的地点。

【12】img标签的常见的属性：src ----- 图片的路径（绝对路径和相对路径）；alt ----- 代替图片文本的内容（图片的路径错误或者因为浏览器的原因打不开这个图，用一个词或者一段话代替描述这个图片）；width ----- 宽度；height ---- 高度单位都是px %；border ------ 边框默认值是0；align ---- 位置（图片和文字的位置）；title ----- 图片的标题 ------ 用来显示描述图片的文字。

【13】位图，usemap 为属性；map标签一般会和area标签进行连用，area标签属性有：shape ------- 鼠标点击的形状；coords ----- 表述鼠标点击形状的大小；href ----- 表示要跳转的路径。

【14】多媒体标签：audio ------ 音频；video ---- -- 视频；controls属性 ----- 表示的是播放器的组件；autoplay属性 ---- 表示的自动播放；loop属性 ------ 表示的是循环播放。

【15】表格布局：table标签中<thead>表头</thead>、<tbody> ----- 表格的主干、<tr> ---- 行、<td>第一行第一列</td> ----列。

【16】表格的边框：border ----- 设置表格边框；width ----- 宽度；height ---- 高度；bgcolor ---- 背景颜色；background ---- 背景图片；align ---- 表示表格的位置；cellpadding ---- 表示的是表格边距（表示单元格内元素距离单元格边框的距离）；cellspacing------ 表示的是表格的间距（表示的是单元格和单元格之间的距离），cellpadding 、cellspacing都有一个默认值 2px。表格里面可以嵌套另一个表格。

【17】表格的合并：rowspan="n" ------ n是一个整数，表示在单元格垂直方向去跨行（合并行）；colspan = "n" ------- n是一个整数，表示在单元格水平方向去跨列（合并列）。

【18】列表标签主要有三种——有序、无序、数据列表。有序列表 ---- ol。type 属性 ----- 表示设置序号的种类，默认值是数值1；start属性 ------ 序号开始的位置；reversed属性----- 反序（降序）。无序列表 ----- ul。type属性 ----- 无序列表的样式 disc（默认值实心圆）circle(空心圆) square(实心方块)。数据列表 ----- dl。一个dl里面可以包含多个dt。

【19】多窗口框架：一个页面可以显示多个窗口，使用的是iframe标签；cols ------- 定义页面列方向的尺寸或者数目；rows ----- 行。