HTML概述及常用语法

news2024/11/26 1:35:43
什么是 HTML
HTML 用来描述网页的一种语言
HTML -- hyper text markup language 超文本标记语言
超文本包括：文字、图片、音频、视频、动画等等
标记语言：是一套标记标签， HTML 使用标记标签来 描述 网页
<>
HTML 发展史

HTML5 的优势
浏览器厂商对 HTML5 的支持
Microsoft edge
Google chrome
Opera
Mozila
......
市场的需求
跨平台 W3C
W3C
World Wide Web Consortium -- 万维网联盟
成立于 1994 年， Web 技术领域最权威和具有影响力的国际 中立性技术标准机构
http://www.w3.org/
http://www.chinaw3c.org/
W3C 标准包括
结构化 标准语言（ HTML 、 XML ）
表现 标准语言（ CSS ）
行为 标准（ DOM 、 ECMAScript ）
HTML 基本结构

 如下图所示

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>第一个网页</title>
</head>
<body>
<h1>第一个HTML页面</h1>
</body>           
</html>

<!DOCTYPE html> 声明为 HTML5 文档
<html> 元素 是 HTML 页面的根元素
<head> 元素包含了文档的元（ meta ）数据，例如： <meta charset="utf-8"> ，定义网页的编码格
式为 UTF-8
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容（主体部分）
<h1> 元素定义一个大标题
HTML 标签
HTML 标记标签通常被称为 HTML 标签（ HTML tag ）
HTML 标签是由尖括号包围的关键字，例如： <html>
HTML 标签 通常 是成对出现的，例如： <h1> 和 </h1> ，也称之为双标签
双标签中的第一个标签表示开始标签，第二个标签表示结束标签 基础标签
标题标签 <h1> -- <h6> 
<!DOCTYPE html>
<html>
<head>
<title>HTML基础标签</title>
</head>
<body>
<!-- 标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
</body>
</html>

HTML 段落 <p> 标签 
<!DOCTYPE html>
<html>
<head>
<title>HTML基础标签</title>
</head>
<body>
<p>hello world</p>
<p>hello James</p>
</body>
</html>

换行标签<br />标签 

<!DOCTYPE html>
<html>
<head>
<title>HTML基础标签</title>
</head>
<body>
ello world<br />
hello James<br />
</body>
</html>

 粗体标签<strong> 斜体标签<em> 

<!DOCTYPE html>
<html>
<head>
<title>HTML基础标签</title>
</head>
<body>
<strong>hello world</strong>
<em>hello James</em>
</body>
</html>

 特殊空格字符 &nbsp;

<!DOCTYPE html>
<html>
<head>
<title>HTML基础标签</title>
</head>
<body>
helloworld
<br />
hello&nbsp;world
</body>
</html>

 水平线标签 <hr \>

<!DOCTYPE html>
<html>
<head>
<title>HTML基础标签</title>
</head>
<body>
helloworld
<hr />
hello&nbsp;world
</body>
</html>

 图像标签<img />

HTML 标签可以设置属性
属性可以在元素中添加附加信息
属性总是以名称 / 值对的形式出现，比如： name=“value"
属性值应该始终被包括在引号内 
<!DOCTYPE html>
<html>
<head>
<title>HTML基础标签</title>
</head>
<body>
<!--相对路径
./ 当前目录
../ 上级目录
属性名为：src
属性值为：./image/222.jpg
-->
<img src="./image/222.jpg" />
<!--绝对路径
从根目录开始
-->
<img src="D:\A_programming\front_end\HTML\image\111.jpg"/>
</body>
</html>

 链接标签<a >

 文本超链接

<!DOCTYPE html>
<html>
<head>
<title>HTML基础标签</title>
</head>
<body>
<!--a标签
href属性表示要跳转到哪个地址
-->
<a href="https://www.baidu.com">百度一下</a>
</body>
</html>

点击百度一下就会跳到百度页面

图像超链接 

<!DOCTYPE html>
<html>
<head>
<title>HTML基础标签</title>
</head>
<body>
<!--a标签
href属性表示要跳转到哪个地址
-->
<a href="https://www.baidu.com">
<img src="./image/222.jpg" alt="跳转" />
</a>
</body>
</html>

 

点击图像即可跳转到baidu.com 

 块元素和行内元素

 块元素
 无论内容多少，该元素独占一行，例如 <p> 、 <h1> 等等
  
<!DOCTYPE html>
<html>
<head>
<title>HTML基础标签</title>
</head>
<body>
<h1>hello world</h1>123
</body>
</html>

行内元素
内容撑开宽度，左右都是行内元素的可以排在一行，例如 <a> 、 <em> 等 
<!DOCTYPE html>
<html>
<head>
<title>HTML基础标签</title>
</head>
<body>
<a href="https://www.baidu.com">百度一下</a>123
</body>
</html>

 列表

什么是列表
列表就是信息资源的一种展示形式，可以使得信息结构化和条理化，以列表的样式显示出来。
列表的分类
1.无序列表
2.有序列表
3.自定义列表
有序列表 ol 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表</title>
</head>
<body>
<ol>
<li>C</li>
<li>Java</li>
<li>Python</li>
<li>PHP</li>
</ol>
</body>
</html>

 

无序列表ul 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表</title>
</head>
<body>
<ul>
<li>C</li>
<li>Java</li>
<li>Python</li>
<li>PHP</li>
</ul>
</body>
</html>

 自定义列表

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表</title>
</head>
<body>
<!-- 自定义列表
dl：标签
dt：列表名称
dd：列表内容
-->
<dl>
<dt>编程语言</dt>
<dd>C</dd>
<dd>Java</dd>
<dd>Python</dd>
<dd>PHP</dd>
</dl>
</body>
</html>

 

表格
基本结构
单元格
行
列
跨行
跨列 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<!--表格 table
tr: 行
td：列
colspan：跨列
rowspan：跨行
border:边框间距
-->
<table border="1px">
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
<td>1-4</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
<td>2-4</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
<td>3-4</td>
</tr>
</table>
</body>
</html>

示例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<!--表格 table
tr: 行
td：列
colspan：跨列
rowspan：跨行
border:边框间距
-->
<table border="1px">
<tr>
<td colspan="3">学生成绩</td>
</tr>
<tr>
<td rowspan="2">小明</td>
<td>语文</td>
<td>70</td>
</tr>
<tr>
<td>数学</td>
<td>80</td>
</tr>
<tr>
<td rowspan="2">小红</td>
<td>语文</td>
<td>80</td>
</tr>
<tr>
<td>数学</td>
<td>90</td>
</tr>
</table>
</body>
</html>

 

媒体元素
视频元素 video 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>视频</title>
</head>
<body>
<!--视频元素 video
src：资源地址
controls：控制条
autoplay：自动播放
-->
<video src="./image/Java内容介绍.mp4" controls autoplay>Java</video>
</body>
</html>
音频元素 audio 
<!DOCTYPE html>
<html>
<head>
<title>音频</title>
</head>
<body>
<!--音频元素 audio
src：资源地址
controls：控制条
autoplay：自动播放
-->
<audio src="郑钧.mp3" controls autoplay></audio>
</body>
</html>

 

 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内联框架 iframe</title>
</head>
<body>
<iframe src="https://www.runoob.com/" frameborder="0" width="1000px"
height="800px"></iframe>
</body>
</html>

 

 

表单
表单标签 - form 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<!-- 表单提交
表单元素：form标签
action：表单提交的地方
method：请求方法
输入标签：input
name:标识
type 输入框的类型
text文本
password 密码
submit 提交按钮
reset 重置按钮
-->
<form action="./05媒体元素.html" method="get">
<p>用户名：<input type="text" name="username"></p>
<p>密码：<input type="password" name="password"></p>
<p>
<input type="submit">
<input type="reset">
</p>
</form>
</body>
</html>

 表单元素格式

 练习

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<!-- 表单提交
表单元素：form标签
action：表单提交的地方
method：请求方法
输入标签：inpu
name:标识
type 输入框的类型
text文本
password 密码
submit 提交按钮
reset 重置按钮
-->
<form action="./05媒体元素.html" method="get">
<p>用户名：<input type="text" name="username" value="一只雪梨干"
maxlength="10" size="30"></p>
<p>密码：<input type="password" name="password"></p>
<!--单选框 radio-->
<p>性别：
<input type="radio" value="boy" name="sex" checked>男
<input type="radio" value="giry" name="sex" >女
</p>
<!--多选框 checkbox-->
<p>爱好：
<input type="checkbox" value="Basketball" name="hobby" checked>篮球
<input type="checkbox" value="Football" name="hobby">足球
<input type="checkbox" value="run" name="hobby">跑步
<input type="checkbox" value="sing" name="hobby">唱歌
</p>
<p>图片按钮：
<input type="image" src="./image/444.png">
</p>
<!-- 下拉框-->
<p>互联网公司：
<select name="列表单">
<option value="B">百度</option>
<option value="A">阿里</option>
<option value="T" selected>腾讯</option>
<option value="Z">字节跳动</option>
</select>
</p>
<!-- 文本域-->
<p>评论：
<textarea name="evaluate" id="" cols="40" rows="4"></textarea>
</p>
<!-- 文件域-->
<p>上传文件：
<input type="file" name="files">
</p>
<!-- 提交按钮 submit、重置按钮 reset-->
<p>
<input type="submit">
<input type="reset" value="清空内容">
</p>
</form>
</body>
</html>

 简单验证与搜索框 

<!DOCTYPE html>
<html lang="en">
<head>
<title>滑块与简单验证</title>
</head>
<body>
<form action="./05媒体元素.html" method="get">
<!-- 邮箱验证 -->
<p>邮箱：
<input type="email" name="email">
</p>
<!-- URL验证 -->
<p>URL：
<input type="url" name="url">
</p>
<!-- 数字验证
max：最大值
min：最小值
step：步长
-->
<p>数字：
<input type="number" name="number" max="100" min="10" step="10">
</p>
<!-- 滑块 -->
<p>滑块：
<input type="range" name="value" max="100" min="2" step="2" >
</p>
<!-- 搜索框 -->
<p>搜索框：
<input type="search" name="search">
</p>
<!-- 提交按钮 -->
<p>
<input type="submit">
</p>
</form>
</body>
</html>

 

表单的应用
隐藏域 hidden
只读 readonly
禁用 disabled

 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单的应用</title>
</head>
<body>
<form action="./05媒体元素.html" method="get">
<!-- 只读属性 readonly -->
<p>用户名：
<input type="text" name="username" value="admin" readonly>
</p>
<!-- hidden 隐藏域 -->
<p>密码：
<input type="password" name="password" hidden>
</p>
<!-- disabled 禁用 -->
<p>性别：
<input type="radio" value="boy" disabled>男
<input type="radio" value="girl">女
</p>
<p>
<input type="submit">
</p>
</form>
</body>
</html>

 

表单初级验证
简单联系 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单初级验证</title>
</head>
<body>
<form action="./05媒体元素.html" method="get" >
<!--
placeholder 提示信息
required 要求不能为空,非空判断
pattern 正则表达式
-->
<p>
用户名：<input type="text" name="username" placeholder="请输入用户名"
required>
</p>
<p>
密码：<input type="password" name="password" placeholder="请输入密码">
</p>
<p>自定义手机号规则：
<input type="text" name="phone" pattern="/^1(3\d|4[5-9]|5[0-35-
9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/">
</p>
<p>
<input type="submit">
</p>
</form>
</body>
</html>

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/529629.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Web基础 ( 二 ) CSS

Web基础 ( 二 ) CSS

2.CSS 2.1.概念与基础 2.1.1.什么是CSS Cascading Style Sheets 全称层叠样式单 简称样式表。 是告诉浏览器如何来显示HTML的元素的特殊标记 2.1.2.编写方式 2.1.2.1.外部文件 在html文件的<head>中加入<link>结点来引入外部的文件 <link rel"stylesh…
阅读更多...
Go Wails Docker图形界面管理工具 (5)

Go Wails Docker图形界面管理工具 (5)

文章目录 1. 前言2. 效果图3. 代码 1. 前言 接上篇&#xff0c;本次添加Docker存储卷功能 待优化: 优化分页效果添加存储卷大小查看功能 2. 效果图 3. 代码 直接调用官方库 app.go func (a *App) VolumeList() ([]*volume.Volume, error) {resp, err : Cli.VolumeList(context…
阅读更多...
Linux中关于时间修改的命令

Linux中关于时间修改的命令

目录 Linux中关于时间修改的命令 data命令 语法格式 示例 date命令中的参数以及作用 常用格式示例 timedatectl命令 语法格式 timedatectl 命令中的参数以及作用 常用格式 Linux中关于时间修改的命令 data命令 data --- 用于显示或设置系统的时间与日期 用户只需在强…
阅读更多...
干货丨警惕！14个容易导致拒稿的常见错误

干货丨警惕！14个容易导致拒稿的常见错误

Hello,大家好&#xff01; 这里是壹脑云科研圈&#xff0c;我是喵君姐姐~ 从做研究、到写论文、再到投稿&#xff0c;每一步都是巨大的挑战。以下列举了一些在这些过程中可能导致拒稿的常见错误&#xff0c;希望能帮助大家避开。 01 格式问题 1.没有遵守投稿须知 期刊提供了…
阅读更多...
oracle基于时间点恢复遇到ORA-10877错误

oracle基于时间点恢复遇到ORA-10877错误

一次给客户进行基于时间点恢复的时候,出现报错ORA-10877,如下: 这里很奇怪,这个归档日志有的,当前全库的备份是05-14 23点的,所以应该是可以恢复的,检查一下alter日志: 这里报错,指定的时间scn不属于当前的incarnation,那么检查一下当前的incarnation: 这里当前的incarnation是…
阅读更多...
Linux实操篇---常用的基本命令3（用户(组)管理命令、文件权限类、搜索查找类、压缩解压类）

Linux实操篇---常用的基本命令3（用户(组)管理命令、文件权限类、搜索查找类、压缩解压类）

一、用户管理命令 Linux是一个多用户&#xff0c;多任务的分时操作系统。甚至有可能同时登录&#xff0c;同时操作。所以给用户不同的账号。 useradd添加新用户 基本语法&#xff1a; 只能用root进行操作。 useradd 用户名 添加新用户 useradd -g 组名 用户名 添加新用…
阅读更多...
MyBatis Plus 代码生成器

MyBatis Plus 代码生成器

一、引入POM依赖 <dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus-boot-starter</artifactId><version>3.5.3.1</version></dependency><dependency><groupId>com.baomidou</groupId&g…
阅读更多...
3ds Max云渲染平台哪个好？

3ds Max云渲染平台哪个好？

3ds Max云渲染平台哪个好&#xff1f; 3ds Max是一款包含建模、动画、粒子动力学等强大功能的三维动画制作软件&#xff0c;3ds Max对特定如游戏建模、特效制作、产品模型设计等领域都具备了过硬的专业能力&#xff0c;同时3ds Max也是很多CGer青睐的CG软件。 作为支持3ds Ma…
阅读更多...
黑马Redis笔记高级篇 | Redis最佳实践

黑马Redis笔记高级篇 | Redis最佳实践

黑马Redis笔记高级篇 | Redis最佳实践 1、Redis键值设计1.1、优雅的key结构1.2、拒绝BigKey1.3、恰当的数据类型1.4、总结 2、批处理优化1.1、Pipeline1.2、集群下的批处理 3、服务端优化3.1、持久化配置3.2、慢查询3.3、命令及安全配置3.4、内存配置 4、集群最佳实践 1、Redis…
阅读更多...
深度学习用于医学预后-第二课第三周14-15节-评估方法比较以及Kaplan-Meier估计

深度学习用于医学预后-第二课第三周14-15节-评估方法比较以及Kaplan-Meier估计

评估对比 我们现在对 t25 的生存率得出了一个新的估计值&#xff0c;为0.56。现在&#xff0c;让我们将其与之前所做的估计进行比较。 当我们假设所有患者在他们截尾时间立即死亡时&#xff0c;我们获得了一个低生存概率为0.29。而在另一极端&#xff0c;如果我们假设他们永久…
阅读更多...
LeetCode 周赛 345（2023/05/14）体验一题多解的算法之美

LeetCode 周赛 345（2023/05/14）体验一题多解的算法之美

本文已收录到 AndroidFamily&#xff0c;技术和职场问题&#xff0c;请关注公众号 [彭旭锐] 提问。 往期回顾&#xff1a;LeetCode 双周赛第 104 场 流水的动态规划&#xff0c;铁打的结构化思考 周赛概览 T1. 找出转圈游戏输家&#xff08;Easy&#xff09; 标签&#xff…
阅读更多...
微信小程序入门02-安装mysql

微信小程序入门02-安装mysql

我们上一篇介绍的是微信开发者工具的安装&#xff0c;开发一个小程序肯定要有后端服务&#xff0c;有后端服务首先要可以存储和查询数据。 数据库种类比较多&#xff0c;我们这里选择mysql&#xff0c;为啥选择这个呢&#xff0c;因为首先用的人多比较稳定&#xff0c;再一个免…
阅读更多...
MapReduce:Index索引案例

MapReduce:Index索引案例

案例需求 a.html hello world hello lucy hello jack hello liuyan b.html hello aaa aaa bbb bbb ccc hello liuyan liuyan tangyan c.html world hello liuyan tangyan tangyan aaa bbb ccc 计算每个单词在每个文件中出现的次数 aaa b.html-2 c.html-1 bbb b.h…
阅读更多...
文本三剑客awk

文本三剑客awk

awk 工作原理&#xff1a; 逐行读取文本&#xff0c;默认以空格或tab键为分隔符进行分隔&#xff0c;将分隔所得的各个字段保存到内建变量中&#xff0c;并按模式或者条件执行编辑命令。 sed命令常用于一整行的处理&#xff0c;而awk比较倾向于将一行分成多个“字段”然后再进…
阅读更多...
Visual Studio Code 插件的开发、调试及发布完整详细教程

Visual Studio Code 插件的开发、调试及发布完整详细教程

本篇文章主要讲解：Vscode的拓展插件，从环境安装到生成项目文件再到调试及部署发布的完整开发教程。 日期：2023年5月10日 vscode 1.78.1 一、准备node环境及安装yo 项目初始化，优先安装yo、再通过yo创建code及插件项目。 基础条件 需要先安装node，且node环境已经正确安装…
阅读更多...
5.项目管理（测试）工具

5.项目管理（测试）工具

目录 一、禅道 1.为什么需要禅道&#xff1f;&#xff08;仅从测试角度看&#xff09; 2.管理工具的对比 3.禅道的设计理念 4.软件开发的生命周期有哪些&#xff1f;&#xff08;软件开发的流程&#xff09; 二、selenium 1、什么是自动化测试&#xff1f; 2.UI自动化的…
阅读更多...
2023年，最新linux c/c++后台开发学习路线分享

2023年，最新linux c/c++后台开发学习路线分享

摘自零声教育课程大纲&#xff0c;8个技术维度项目实战&#xff0c;为你打通linux c/c后台开发的技术栈。 部分往期视频 c八股文重点&#xff0c;网络的posix api实现原理 8个方面讲解io_uring&#xff0c;重塑对异步io的理解 c后端开发中数据库异步连接、异步连接池的原理…
阅读更多...
浅聊一下PTP

浅聊一下PTP

浅聊一下ptp 最近做了点时间同步相关工作&#xff0c;浅浅聊一下学习和了解的东西吧。 大概了解了一下PTP&#xff0c;NTP&#xff0c;PTPD&#xff0c;LinuxPTP 1.时钟同步 网络时钟同步包括频率同步和相位同步两个概念。 频率同步&#xff08;Frequency synchronization…
阅读更多...
Hudi集成Spark与hudi表的创建

Hudi集成Spark与hudi表的创建

集成Hudi包 Spark-shell 方式启动 Spark SQL方式启动 SQL方式创建hudi建表 集成Hudi包 以下为hudi与spark版本的兼容 Hudi Supported Spark 3 version 0.12.x 3.3.x&#xff0c;3.2.x&#xff0c;3.1.x 0.11.x 3.2.x&#xff08;default build, Spark bundle only&…
阅读更多...
浪漫行星，不浪漫你打我

浪漫行星，不浪漫你打我

先上效果图&#xff1a; 再上代码&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title</title><style>import "https://fonts.googleapis.com/css2?familyMegrim&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023