HTML基础知识总结

用户1104143520688
184 阅读4分钟

本文主要介绍了HTML基础知识，HTML指的是超文本标记语言，它不是一种编程语言，而是一种标记语言。需要具体了解HTML的小伙伴可以参考一下这篇文章哦

目录

标签的属性： 多个属性中间用空格

< 标签名称 属性名 1 = " 属性值 " 属性名 2 = " 属性值 " ></ 标签名称 >

标签分类

标签分类：块状元素、行级元素

块状元素：一般都是新起一行，可以容纳行内元素和其他块级元素；

行级元素 ：一般都是语义级别的基本元素，一般只能容纳文本或者其他行内元素。

块状元素和行内元素的区别： 

  • 1 、 块级元素会独占一行，其宽度自动填满其父元素宽度； 行内元素会排列到同一行里，其宽度随元素的内容变化而变化。
  • 2 、块级元素可以设置宽高；行内元素设置宽高无效。
  • 3 、块级元素可以设置 margin ， padding 属性；行内元素的水平方向的 padding会有边距效果，但是竖 直方向的 padding没有效果。（此处的属性稍后介绍）

属于块状元素的：

标题标签                        h1-h6,

段落标签                        p ,

水平线标签                    hr,

有序列表标签                 ol--li，

无序列表标签                 ul--li，

定义描述标签                 dl-dt-dd，

容器标签                        div：

属于行级元素的：

范围标签：                    span

图像标签：                     img

基本结构： 

image.png

常用标签

文本标签

image.png

段落标签

image.png

换行标签

image.png

范围标签

image.png

图片标签<img  属性  />

image.png

图片标签的热点区域<map name="?" /> <atea 形状 范围 链接 标题 / >

image.png

image.png

布局标签：

中间放其他标签的容器

image.png

image.png

超链接和锚链接：

属性      name：锚点     herf：目标（网页#锚点）

image.png

align 左右对齐  valign 上下对齐

image.png

image.png

不规则表格：

 属性 colspan="列数"  rowspan="行数"   然后把被占的格删掉

image.png

高级标签：标题和逻辑分区标签

 表格标题：标题文字

 表格逻辑分区：thead tbody tfoot

表单

image.png

id:·                    元素的唯一表示，不重复

name:                表单项元素的名称，服务器获取数据通过该名称

value:                表单项元素的值，服务器获取数据通过name 获取到的就是 value

type:                 表示表单项元素的呈现形式

class:                表示样式名称

readonly:          表示只读，用户只能看不能改

disabled：        表示禁用，该元素不能改而且背景是灰色

文本框：

image.png

密码框：

image.png

单选按钮：

image.png

复选框：

image.png

HTML5 中新增的音频****

直到现在，仍然不存在一项旨在网页上播放音频的标准。大多数音频是通过插件（比如 Flash）来播放的。然而，并非所有浏览器都拥有同样的插件。 HTML5 规定了在网页上嵌入音频元素的标准，即使用 元素。

<audio controls > <source src = "horse.ogg" type = "audio/ogg" > <source src = "horse.mp3" type = "audio/mpeg" > 您的浏览器不支持 audio 元素。 </audio>

PS ： control 属性供添加播放、暂停和音量控件。
在 与 之间你需要插入浏览器不支持的 元素的提示文本 。
元素允许使用多个 元素 . 元素可以链接不同的音频文件，浏览器将使用 第一个支持的音频文件\

目前 , 元素支持三种音频格式文件 : MP3, Wav, 和 Ogg:

音频格式的 MIME 类型

Format       MIME-type
MP3           audio/mpeg
Ogg           audio/ogg
Wav           audio/wav\

HTML5 中新增的视频

<source src = "movie.mp4" type = "video/mp4" >
<source src = "movie.ogg" type = "video/ogg" >
您的浏览器不支持 Video 标签。
</video>

元素提供了 播放、暂停和音量控件来控制视频。
同时 元素也提供了 width 和 height 属性控制视频的尺寸 . 如果设置的高度和宽度，所需的
视频空间会在页面加载时保留。如果没有设置这些属性，浏览器不知道大小的视频，浏览器就不能再加载时
保留特定的空间，页面就会根据原始视频的大小而改变。
与 标签之间插入的内容是提供给不支持 video 元素的浏览器显示的。\

当前， 元素支持三种视频格式： MP4, WebM, 和 Ogg:

<html>
<head>
<meta charset = "UTF-8" >
<title> 视频音频 </title>
</head>
<body>
<h1> 音频 </h1>
<audio controls >
<source src = "audio/wgs.ogg" type = "audio/ogg" >
<source src = "audio/zjl.mp3" type = "audio/mpeg" >
您的浏览器不支持 audio 元素。
</audio>
<h1> 视频 </h1>
<video width = "1320" height = "640" controls >
<source src = "audio/ruhai.mp4" type = "video/mp4" >
<source src = "audio/wgs.ogg" type = "video/ogg" >
您的浏览器不支持Video标签。
</video>
</body>
</html>

HTML5 中已经移除的元素

frame

frameset

noframes

转义符号

image.png

avatar
文章
阅读
粉丝