HTML（超文本标记语言）

最新推荐文章于 2022-05-07 11:46:58 发布

Dominic.Pan

最新推荐文章于 2022-05-07 11:46:58 发布

阅读量623

点赞数

分类专栏：前端文章标签： html 前端

本文链接：https://blog.csdn.net/weixin_47183168/article/details/121771124

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

HTML是HyperText Markup Language的简称，它是一种用于创建网页的标准标记语言。标记语言是由标签构成的语言。例如html，xml；标记语言不是编程语言。

HTML 运行在浏览器上，由浏览器来解析。

标签的内部可以定义属性，属性由键值对组成，值需要用双引号引起来，多个属性用空格隔开

<标签名称 属性名1="属性值" 属性名2="属性值"></标签名称>
<p id="p1" name="p1"></p>

基本结构

<!-- 声明当前文档是html5文档 -->
<!DOCTYPE html>
<!-- html,根元素 ，围堵标签-->
<html>
<!--
head,头元素：
作用：
1、用于指定HTML文章中的一些元数据，
例如元数据 meta：定义页面的编码格式
title:定义页面的标题
2、引入外部的资源文件
-->
<head>
<meta charset="utf-8" />
<title>这是我的第一个HTML页面</title>
</head>
<!--body，主体：浏览器显示的内容都在这里编写
Hbuilder格式化代码的快捷键：ctrl+shift+f
-->
<body>
hello html 这是我的第一个HTML页面
</body>
</html>

设置图片的热点区域

点击图片的某块区域跳转到对应的页面

布局标签 div

一般就是做容器，盛放其他标签的，将其他标签组合在一起用来布局。

描述标签（多用于图文混编）

标签分类

html标签可以分为块状元素和行级元素两类。

块状元素：一般都是新起一行，可以容纳行内元素和其他块级元素；
行级元素：一般都是语义级别的基本元素，一般只能容纳文本或者其他行内元素。

区分的简单方法：是否独占一行。

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

块级元素会独占一行，其宽度自动填满其父元素宽度；行内元素会排列到同一行里，其宽度随元素的内容变化而变化。
块级元素可以设置宽高；行内元素设置宽高无效。
块级元素可以设置margin，padding属性；行内元素的水平方向的padding会有边距效果，但是竖直方向的padding无效

属于块状元素的：
标题标签 h1-h6,
段落标签 p ,
水平线标签 hr,
有序列表标签 ol--li，
无序列表标签 ul--li，
定义描述标签 dl-dt-dd，
容器标签 div：
属于行级元素的：
范围标签：span
图像标签：img

超链接

作用：1、用来实现页面间的跳转 2、实现锚链接功能

锚链接:当一个页面长度超过一屏的时候，想迅速跳转到指定位置，例如大返回顶部连接就是锚链接实现的。这个定位可以实现本页面间的锚链接也可以实现不同页面间的锚链接。

table

常用属性

height
weight
border
cellpadding:内容与单元格之间的距离
cellspacing:单元格之间的距离

表单

用于采集用户输入的数据。用于和服务器进行交互。

表单元素的重要属性
id:唯一
name:表单项元素的名称，很重要--提交数据到服务器之后，服务器获取数据通过该名称
value:表单项元素的值，服务器获取数据通过name获取到的就是value
type:表示表单项元素的呈现形式
class:表示样式名称
readonly:表示只读，用户只能看不能改
disabled：表示禁用，该元素不能改而且背景是灰色

type:
文本框 text
密码框 passoword
单选按钮 radio
复选框 checkbox
文件域 file
日期  date/datetime-local
隐藏域 hidden
下拉列表 select {option}
文本域 textarea
按钮（submit,image,reset,button）
标签 label
......

框架(iframe)

通过使用框架，可以在同一个浏览器窗口中显示不止一个页面。例如个人中心页面，点击左侧内容的时候，只有右边页面在变动。

常用的布局组合标签

div-ul-li/div-ol-li：常用于导航布局
div-dl-dt-dd:常用于图文混编布局
div-form:常用于表单布局
div-table:常用于局部规则数据展示布局

HTML4与HTML5的区别

HTML4和HTML5分别是超文本标记语言的第四次和第五次修改，他们分别是html语言第4和第5版本.HTML4是为了适应pc时代产生的，HTML5是为了适应移动互联网时代,为了在移动设备上支持多媒体。HTML5是互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式．被认为是互联网的核心技术之一。HTML产生于1990年，1997年HTML4成为互联网标准，并广泛应用于互联网应用的开发。 HTML5将Web带入一个成熟的应用平台，在这个平台上，视频、音频、图像、动画以及与设备的交互都进行了规范。 HTML5技术在未来主要发展的市场还是在移动端互联网领域，现阶段移动浏览器有应用体验不佳、网页标准不统一的劣势，这两个方面是移动端网页发展的障碍，而HTML5技术能够解决这两个问题，并且将劣势转化为优势，整体推动整个移动端网页方面的发展。

DOCTYPE 不同
指定字符编码语法不同（HTML4:使用meta元素的形式指定文件中的字符编码(通过 content元素的属性来指定) HTML5:使用对元素直接追加charset属性的方式来指定字符编码）

form新属性

autocomplete 属性规定 form 或 input 域拥有自动的完成功能。当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项。(输入input的value刷新会生成一个下拉列表记录输入的记录)

list 属性规定input的 datalist。datalist 是输入域的选项

<input list="a">
<datalist id="a">
<option value="v1">
<option value="v2">
<option value="v3">
<option value="v4">
<option value="v5">
</datalist>

multiple 属性是一个 boolean 属性. multiple 属性规定元素中可选择多个值。

multiple 属性适用于email 和 file标签

上传多个文件: <input type="file" name="img" multiple>

placeholder

<input type="text" name="userName" placeholder="请输入用户名">

required

用户名: <input type="text" name="username" required>

audio,video

<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>
control 属性供添加播放、暂停和音量控件。
在<audio> 与 </audio> 之间需要插入浏览器不支持的<audio>元素的提示文本 。
<audio> 元素允许使用多个 <source> 元素. <source> 元素可以链接不同的音频文件，浏览器将使用
第一个支持的音频文件

<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持Video标签。
</video>
<video> 元素提供了 播放、暂停和音量控件来控制视频。
同时 <video> 元素也提供了 width 和 height 属性控制视频的尺寸.如果设置的高度和宽度，所需的
视频空间会在页面加载时保留。如果没有设置这些属性，浏览器不知道大小的视频，浏览器就不能再加载时
保留特定的空间，页面就会根据原始视频的大小而改变。
在<video> 与 </video> 之间需要插入浏览器不支持的<video>元素的提示文本 。

HTML中的转义符号

Dominic.Pan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML（超文本标记语言）

HTML是HyperText Markup Language的简称，它是一种用于创建网页的标准标记语言。标记语言是由标签构成的语言。例如html，xml；标记语言不是编程语言。HTML 运行在浏览器上，由浏览器来解析。标签的内部可以定义属性，属性由键值对组成，值需要用双引号引起来，多个属性用空格隔开<标签名称属性名1="属性值" 属性名2="属性值"></标签名称><p id="p1" name="p1"></p>基本结构&lt.
复制链接

扫一扫

专栏目录