HTML

已于 2024-09-13 00:17:16 修改
阅读量1.1k 收藏 17
点赞数 8
文章标签： html 前端
于 2024-09-11 16:24:10 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/permit7/article/details/142143184
版权

1.1 概述

HTML（Hyper Text Markup Language，超文本标记语言）是一种标记语言，用于设计和编辑网页。它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的 Internet 资源连接为一个逻辑整体。HTML 文本是由 HTML 命令组成的描述性文本，HTML 命令可以说明文字、图形、动画、声音、表格、链接等。

HTML 文件是一种纯文本文件，可以使用各种文本编辑器打开或创建。每个网页都是一个 HTML 文档，使用浏览器访问一个链接（URL），实际上就是下载、解析和显示 HTML 文档的过程。将众多HTML文档放在一个文件夹中，然后提供对外访问权限，就构成了一个网站。

HTML 不是编程语言，没有逻辑处理能力，没有计算能力，不能动态地生成内容，而只能静态地展示网页信息。HTML 通过不同的标签来标记不同的内容、格式、布局等，例如：<img> 标签表示一张图片；<a> 标签表示一个链接；<table> 标签表示一个表格；<input> 标签表示一个输入框；<p> 标签表示一段文本；<strong> 或<b>标签表示文本加粗效果；<div> 标签表示块级布局。

1.2 发展史

  • HTML 1.0 在 1993 年 6 月作为互联网工程工作小组（IETF）工作草案发布（并非标准）
  • HTML 2.0 —— 1995 年 11 月作为 RFC 1866 发布，在 RFC 2854 于 2000 年 6 月发布之后被宣布已经过时
  • HTML 3.2 —— 1997 年 1 月 14 日，W3C 推荐标准
  • HTML 4.0 —— 1997 年 12 月 18 日，W3C 推荐标准
  • HTML 4.01（微小改进）—— 1999 年 12 月 24 日，W3C 推荐标准
  • HTML 5 —— 2014 年 10 月 29 日，万维网联盟宣布，经过接近8年的艰苦努力，该标准规范终于制定完成。是目前最为流行的版本，提供了很多标签新特性，现代大多数浏览器已经具备了 HTML 5 的支持。

W3C 是万维网联盟（World Wide Web Consortium，W3C），又称 W3C 理事会。1994 年 10 月在麻省理工学院计算机科学实验室成立。建立者是万维网的发明者蒂姆·伯纳斯-李，负责制定web相关标准的制定。

1.3 开发环境：Visual Studio Code (VS Code)

VS Code

1.4 基本结构

在这里插入图片描述

1.5 基本标签

1.5.1 标题标签
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
1.5.2 段落标签
<p>abc</p>
<p>xyz</p>

在这里插入图片描述

1.5.3 换行标签
<p>abc<br>
xyz</p>

在这里插入图片描述

1.5.4 设置边距样式

安装live server插件，右下角点击。
在这里插入图片描述
在这里插入图片描述

页面右击，选择检查。
在这里插入图片描述
在这里插入图片描述
在element.style写入

margin 5px #margin表示外边距，px表示像素
border 6px solid #border表示边框，solid表示实线
padding 7px #padding表示内边距

在这里插入图片描述
表现结果如下：
在这里插入图片描述

margin 5px 
border 6px dashed #dashed表示虚线，coral表示颜色
padding 7px

在这里插入图片描述
表现结果如下：
在这里插入图片描述

1.5.5 水平线标签
<hr>

在这里插入图片描述

1.5.6 字体样式标签

在这里插入图片描述

1.5.7 注释和特殊符号

注释：<!-- -->

特殊符号语法示例
空格&nbsp;monkey&nbsp;brother：monkey brother
大于号（>）&gt;2 &gt; 1：2 > 1
小于号（<）&lt;2 &lt; 3：2 < 3
引号（"）&quot;&quot;monkey brother&quot;："monkey brother"
版权符号（©）&copy;&copy; xkc： © xkc

nbsp = Non-Breaking Space
gt = Great than
lt = Less than

例：

在这里插入图片描述
在这里插入图片描述

1.5.8 图像标签

在这里插入图片描述

例：
在这里插入图片描述

1.5.9 链接标签

在这里插入图片描述

注意：添加外链时，务必设置 rel=“noopener noreferrer”

例：
在这里插入图片描述

锚链接

<p id="hello">Hello</p>
<a href="#hello">To Hello</a>
<a href="b.html#hello">To Hello</a>

例：
在这里插入图片描述

功能性链接

<a href="tel: 13500000000">联系我们</a>
<a href="mailto: xx@hotmail.com">E-Mail</a>

例：
在这里插入图片描述
在这里插入图片描述

1.5.10 有序列表

在这里插入图片描述

有序列表的特性
每个<li>标签独占一行
默认<li>标签项前面有顺序编号
一般用于排序类型的列表，如试卷、问卷选项等

例：
在这里插入图片描述
在这里插入图片描述

1.5.11 无序列表

在这里插入图片描述

无序列表的特性

每个<li>标签独占一行
默认<li>标签项前面有个实心小圆点，没有顺序编号
一般用于无序类型的列表，如导航、侧边栏新闻、有规律的图文组合模块等

例：
在这里插入图片描述
在这里插入图片描述

1.5.12 定义列表

在这里插入图片描述

  • 特性
    • 没有顺序，每个 <dt> 标签、<dd> 标签独占一行
    • 默认没有标记
    • 一般用于一个标题下有一个或多个列表项的情况
      在这里插入图片描述

例：
在这里插入图片描述
在这里插入图片描述

1.5.13 表格

在这里插入图片描述

table

在这里插入图片描述

<table border="3" cellspacing="10" cellpadding="5">
    <tr>
        <th colspan="4">COLUMNS</th>
    </tr>
    <tr>
        <td rowspan="4">ROWS</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</table>

例：
在这里插入图片描述
在这里插入图片描述

1.5.14 表单
  • 表单标签
标签名作用备注
form表示表单，是用来收集用户输入信息并向 Web 服务器提交的一个容器

举例：

<form >
    //表单元素
</form>
  • 表单的属性
属性名作用备注
action处理此表单信息的Web服务器的URL地址
method提交此表单信息到Web服务器的方式可能的值有get和post，默认为get
autocomplete自动补全，指示表单元素是否能够拥有一个默认值，配合input标签使用HTML5

举例：

<!-- 一个简单的表单，会发送一个 GET 请求 -->
<form action="/web/login" method="get">
</form>

<!-- 一个简单的表单，发送 POST 请求 -->
<form action="/web/reg" method="post">
</form>

GET 与 POST 说明：

post：指的是 HTTP POST 方法；表单数据会包含在表单体内然后发送给服务器。

get：指的是 HTTP GET 方法；表单数据会附加在 action 属性的URI中，并以 ‘?’ 作为分隔符，然后这样得到的 URI 再发送给服务器。

GET方式举例：
在这里插入图片描述

GET 与 POST 对比：

地址栏可见数据安全数据大小
GET可见不安全有限制（取决于浏览器）
POST不可见相对安全无限制
  • 表单元素入门

表单元素指的是 input 元素、复选框、下拉框、提交按钮等等。

标签名作用备注
label表单元素的说明，配合表单元素使用for 属性值为相关表单元素的 id 属性值
input表单中输入控件，多种输入类型，用于接受来自用户数据type 属性值决定输入类型
button页面中可点击的按钮，可以配合表单进行提交type 属性值决定按钮类型
1）简单的文本输入框

  • label 标签：表单的说明。

    • for 属性值：匹配 input 标签的 id 属性值

  • input 标签：输入控件。

    • type 属性：表示输入类型，text值为普通文本框
    • id 属性：表示标签唯一标识
    • name 属性：表示标签名称
    • value 属性：表示标签数据值

代码实现：

<form action="" method="get">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" value="Tomcat">
</form>
2）提交用户名的表单
  • button 标签：表示按钮。
    • type 属性：表示按钮类型，submit 值为提交按钮。
<form action="" method="get">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" value="Tomcat">
  <button type="submit">Login</button>
</form>
  • 属性值
1）NAME 和 VALUE 属性
属性名作用
name<input>的名字，在提交整个表单数据时，可以用于区分属于不同<input>的值
value这个<input>元素当前的值，允许用户通过页面输入

使用方式：

以 name 属性值作为键，value 属性值作为值，构成键值对提交到服务器，多个键值对浏览器使用 & 进行分隔。

2）TYPE属性

  • input 标签的 type 属性

    • 基本的文本属性
    属性值作用备注
    text单行文本字段
    password单行文本字段，值被遮盖
    email用于编辑 e-mail 的字段，可以对e-mail地址进行简单校验HTML5

    举例：

      <form action="#" method="get">
      <label for="username">Username:</label>
      <input type="text" id="username"  name="username"> <br/>
  
      <label for="password">Password:</label>
      <input type="password" id="password"  name="password"><br/>
  
      <label for="email">Email:&nbsp;</label>
      <input type="email" id="email"  name="email"><br/>
      <button type="submit">Login</button>
  </form>

例：
在这里插入图片描述
在这里插入图片描述

  • 单选多选属性
属性值作用
radio单选按钮。 1. 在同一个”单选按钮组“中，所有单选按钮的 name 属性使用同一个值；一个单选按钮组中同一时间只有一个单选按钮可以被选择。 2. 必须使用 value 属性定义此控件被提交时的值。 3. 使用checked 必须指示控件是否缺省被选择。
checkbox复选框。 1. 必须使用 value 属性定义此控件被提交时的值。 2. 使用 checked 属性指示控件是否被选择。 3. 选中多个值时，所有的值会构成一个数组而提交到Web服务器

举例：

<form action="#" method="get">
    <label for="gender">性别:</label>
    <input type="radio" id="gender" name="gender" value="boy"/>男
    <input type="radio" name="gender" value="girl" checked="checked"/>女

    <hr/>
    <label for="hobby">爱好: </label>
    <input type="checkbox" id="hobby" name="hobby" value="sport"/> 体育
    <input type="checkbox"  name="hobby" value="tech"/> 科技
    <input type="checkbox" name="hobby" value="fun" /> 娱乐
    <input type="checkbox" name="hobby" value="video" checked="checked"/> 短视频
</form>

例：
在这里插入图片描述
在这里插入图片描述

  • 按钮属性

    属性值作用
    button无行为按钮，用于结合JavaScript实现自定义动态效果
    submit提交按钮，用于提交表单数据。
    reset重置按钮，用于将表单中内容恢复为默认值。
    image图片提交按钮。必须使用 src 属性定义图片的来源及使用 alt 定义替代文本。还可以使用 height 和 width 属性以像素为单位定义图片的大小。

  • HTML5 新增的 type 值

    属性值作用备注
    dateHTML5 用于输入日期的控件年，月，日，不包括时间
    timeHTML5 用于输入时间的控件不含时区
    datetime-localHTML5 用于输入日期时间的控件不包含时区
    numberHTML5 用于输入浮点数的控件
    rangeHTML5 用于输入不精确值控件max-规定最大值
    min-规定最小值
    step-规定步进值
    value-规定默认值
    searchHTML5 用于输入搜索字符串的单行文本字段可以点击x清除内容
    telHTML5 用于输入电话号码的控件
    urlHTML5 用于编辑URL的字段可以校验URL地址格式
属性值作用备注
file此控件可以让用户选择文件，用于文件上传。使用 accept 属性可以定义控件可以选择的文件类型。
hidden此控件用户在页面上不可见，但它的值会被提交到服务器，用于传递隐藏值

  • button标签的type属性

    属性值作用备注
    submit此按钮将表单数据提交给服务器。如果未指定属性，或者属性动态更改为空值或无效值，则此值为默认值。同 <input type="submit"/>
    reset此按钮重置所有组件为初始值。同<input type="reset"/>
    button此按钮没有默认行为。它可以有与元素事件相关的客户端脚本，当事件出现时可触发。同<input type="button"/>
3）HTML5 新增属性
属性名作用备注
placeholder提示用户输入框的作用。用于提示的占位符文本不能包含回车或换行。仅适用于当type 属性为text, search, tel, url or email时; 否则会被忽略。
required这个属性指定用户在提交表单之前必须为该元素填充值1. 布尔属性，可省略属性值表示true
2. 当type属性是hidden,image或者button类型时不可使用
autocomplete自动补全，规定表单或输入字段是否应该自动完成。当自动完成开启，浏览器会基于用户之前的输入值自动填写值。1. 开启为on，关闭为off
2. 可以设置指定的字段为off，关闭自动补全

例：
在这里插入图片描述
在这里插入图片描述

  • 更多表单元素
标签名作用备注
select表单的控件，下拉选项菜单与option配合实用
optgroupoption的分组标签与option配合实用
optionselect的子标签，表示一个选项
textarea表示多行纯文本编辑控件rows表示行高度， cols表示列宽度
fieldset用来对表单中的控制元素进行分组(也包括 label 元素)
legend用于表示它的fieldset内容的标题。fieldset 的子元素

select举例：

<label for="pet-select">Choose a pet:</label>

<select name="pets" id="pet-select">
    <option value="">--Please choose an option--</option>
    <option value="dog">Dog</option>
    <option value="cat">Cat</option>
    <option value="hamster">Hamster</option>
    <option value="parrot">Parrot</option>
    <option value="spider">Spider</option>
    <option value="goldfish">Goldfish</option>
</select>

<!--  
  select 的 name 属性值与 option 的 value 属性值,构成键值对,提交到Web服务器
-->

textarea举例：

<textarea name="textarea" rows="10" cols="50">Write something here</textarea>

fieldset举例：

<form action="#" method="post">
  <fieldset>
    	<legend>是否同意</legend>
        <input type="radio" id="radio_y" name="agree" value="y"> 
      	<label for="radio_y">同意</label>
        <input type="radio" id="radio_n" name="agree" value="n"> 
      	<label for="radio_n">不同意</label>
  </fieldset>
</form>

例：
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

1.5.15 行内元素和块元素

在HTML中有两种重要元素类别，块级元素和内联元素。

  • 块级元素：

    独占一行。块级元素（block）在页面中以块的形式展现。相对于其前面的内容它会出现在新的一行，其后的内容也会被挤到下一行展现。比如<p> ，<hr>，<li> ，<div>等。

  • 行内元素

    行内显示。行内元素不会导致换行。通常出现在块级元素中并环绕文档内容的一小部分，而不是一整个段落或者一组内容。比如<b>，<a>，<i>，<span> 等。

    注意：一个块级元素不会被嵌套进内联元素中，但可以嵌套在其它块级元素中。

1.5.16 div / span

  • <div> 是一个通用的内容容器，并没有任何特殊语义。它可以被用来对其它元素进行分组，一般用于样式化相关的需求。它是一个 块级元素。

  • <span> 是短语内容的通用行内容器，并没有任何特殊语义。它可以被用来编组元素以达到某种样式。它是一个 行内元素。

    注意：div 和 span 在页面布局中有重要作用。

1.5.17 多媒体元素
音频

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

视频

在这里插入图片描述
在这里插入图片描述

1.6 案例

1.6.1 音乐排行榜

在这里插入图片描述
在这里插入图片描述

显示效果如下：
在这里插入图片描述

1.6.2 制作注册页面

在这里插入图片描述
在这里插入图片描述
显示效果如下：
在这里插入图片描述

云计算练习生X
关注
0基础入门HTML
weixin_49340699的博客
10-11 454
0基础入门 html标签 在一对尖括号里面，如<html>,结尾处加斜杠</html> 头标签<head>......</head>其部分出现在web浏览器的标题栏中主要写 <title>......</title> <script>........</script> 语句 主体标签<body>....</body> 在body标签中可以规定整个文档的一些基本属性 “bgcolor”指定
50余款手机页面模版源码html5
11-16
50余款手机页面模版源码html5 1.1【32赞HTM5响应式系列之右侧多级滑动式】仿Slideby触屏版html5响应式手机wap网站模板 2【32赞HTML5响应式系列之订餐模板】微官网美食订餐html5触屏响应式手机wap网站订餐模板 5【32...
程序员给女朋友用HTML5制作的3D相册
04-21
程序员给女朋友用HTML5制作的3D相册 感觉挺漂亮，自己分析了一下。 整理里一个自己可以换相片
HTML5 文件操作
Ashiyanshi的专栏
09-04 535
一、文件操作API 在之前我们操作本地文件都是使用flash、silverlight或者第三方的activeX插件等技术，由于使用了这些技术后就很难进行跨平台、或者跨浏览器、跨设备等情况下实现统一的表现，从另外一个角度来说就是让我们的web应用依赖了第三方的插件，而不是很独立。 在HTML5标准中，默认提供了操作文件的API让这一切直接标准化。有了操作文件的API，让我们的Web应用可以
一、html文档的基本结构，html常用标签的使用
最新发布
中华之子，勇立潮头！
08-11 936
本系列文章记录前端开发系统化学习指示，包括html、css、PC端及移动端布局技巧、javascript、jquery、js特效制作、ajax前后台交互等。本文主要介绍html文档的基本结构，html常用标签的使用，帮助理解html语言制作网页基本原理。提示：以下是本篇文章正文内容，下面案例可供参考页面内定义了“id”或者“name”的元素，可以通过a标签链接到它的页面滚动位置，前提是页面要足够高，有滚动条，且元素不能在页面顶部，否则页面不会滚动。
HTML文档是什么意思？
weixin_30389003的博客
12-05 428
通常我们所说的HTML文档即指HTML文件（也称为超文本标记语言文件文档） html文档（扩展名后缀名为html的文件） HTML文件是可以被多种网页浏览器读取，传递各类资讯的文件。从本质上来说，Internet( 互联网)是一个由一系列传输协议和各类文档所组成的集合，html文件只是其中的一种。这些HTML文件存储在分布于世界各地的服务器硬盘上，通过传输协议用户可以远程获取这些文...
HTML语言
weixin_30917213的博客
07-14 151
1 HTML入门 　　HTML 指的是超文本标记语言 (Hyper Text Markup Language) 　　扩展名： .html 或 .htm 　　需要使用浏览器进行解析(查看) 　　　　HTML源文件通过浏览器进行解析，不需要编译 　　规范：w3c 2.标签 　...
HTML基本概念
简单.专注..
11-11 134
什么是HTML文件？ HTML的英文全称是Hypertext Marked Language，中文叫做“超文本标记语言”。 和一般文本的不同的是，一个HTML文件不仅包含文本内容，还包含一些Tag，中文称“标记”。 一个HTML文件的后缀名是.htm或者是.html。 用文本编辑器就可以编写HTML文件。 这就试写一个HTML文件吧！ 打开你的Notepad，新建一个文件，然后...
HTML5+CSS3 精美登陆界面源码
01-19
HTML5和CSS3是现代网页开发的两大核心技术，它们为创建功能丰富且视觉吸引人的网页提供了强大的工具。在这个“HTML5+CSS3 精美登陆界面源码”压缩包中，包含了三个精心设计的登录界面，每一个都充分利用了HTML5的新...
HTML5浪漫爱心表白动画在线演示程序
02-12
HTML5是一种强大的网页开发语言，它是HTML的第五个版本，为现代互联网提供了丰富的功能和交互性。这个"HTML5浪漫爱心表白动画在线演示程序"是一个利用HTML5特性制作的创意应用，特别适合在情人节这样的特殊日子里，...
HTML文件
12-14
HTML文件
html语言教程(html版)
09-16
我自学用html语言教程，感觉不错分享大家看看~~~
HTML语言概述
04-21
HTML语言概述及语言细节。HTML版本的演变 HTML1.0-2.0——HTML 3 ——HTML 4——HTML 4.01——HTML 5 从HTML4始由W3C组织统一制定规范 W3C：世界万维网联盟（ World Wide Web Consortium ） XHTML 1.0 符合XML标准的HTML
html+css网页设计源码(简洁)
12-25
HTML 和 CSS 是构建网页设计的基础，本资源提供了一套简洁的网页设计源码，适合初学者和需要快速搭建页面的开发者。这套源码充分展示了如何使用 HTML 结构元素和 CSS 样式规则来创建一个清晰、易读且具有基本功能的...
HTML语言(概述及常用标签）
hacker707的博客
07-29 8111
1.1什么是HTMLHTML是做网站的、Web开发、互联网生态开发(PC端+移动端+微应用)目前我们使用的都是HTML5,支持传统的PC端开发，还支持移动端开发还支持微应用开发,从而替换了部分传统的移动端开发技术1.2HTML概念HTMLHyperTextMarkupLanguage，超文本标记语言。是用来帮助我们构建网页的。【超文本】网页本身是一个文本文件，而超文本指的是这种文件中既可以包含文本信息，又可以包含图片，音频，视频和链接等非文字的信息。【标记语言】标记，也叫做标签。...
了解HTML语言
大飞的博客
10-27 518
学习web前端开发基础技术需要掌握：HTML、CSS、JavaScript语言。下面我们就来了解下这三门技术都是用来实现什么的： HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。 CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。 JavaScript是用来实现网
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值