HTML基础

最新推荐文章于 2024-04-26 15:16:45 发布
最新推荐文章于 2024-04-26 15:16:45 发布
阅读量477 收藏
点赞数
分类专栏： 编程语言 文章标签： html 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38684868/article/details/122543523
版权

HTML基础

W3school. https://www.w3school.com.cn/html/index.asp

1 Web相关名词

（1）www：全球广域网，也叫万维网。网站服务

（2）网站：由多个网页组合在一起的页面集合，本质就是一种基于HTTP协议和超文本标记语言的跨平台分布式图形信息系统

（3）网页：通过浏览器展示 包含图片、文字、链接、声音等内容的一种HTML文件

（4）web标准：用来衡量当前网页书写是否标准的一种规则，由W3C组织指定。它要求标准的网页写法要达到结构、样式、行为3者分离。

  • 1）结构：指网页架构，用HTML语言搭建的网页结构
  • 2）样式：指网页具体外在展示，通过CSS定义
  • 3）行为：指用户与网页之间可以进行的交互行为，通过javascript实现

2 HTML

（1）HTML即超文本标记语言，主要用来书写网页，目前市面上主推的HTML版本是HTML5。

（2）W3C是一个负责制定HTML语法规则的组织。

（3）浏览器生产厂商生产不同浏览器，用来解析展示网页。

3 网页骨架

网页的本质就是一个HTML文件，经过浏览器解析之后展示给用户，而所有的网页都会有一部分相同且固定的结构，这部分内容就是网页骨架。

骨架内容：

<DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>网页标题</title>
  </head>

  <body>
  </body>
</html>
  • <DOCTYPE html>用来声明当前文档类型是html
  • <html></html>,根标签, 是网页中最大的标签
  • <head></head>, 网页的头部，主要用来定义网页标签，以及给浏览器查看的一些信息
  • <meta charset="UTF-8">，定义网页的编码标准
  • <title></title>，网页标题标签，它里面的内容会显示在浏览器的标签页上
  • <body></body>，网页主体标签，它里面的内容都会显示在浏览器白色窗口区域，网页展示内容都会写在body标签中

4 HTML标签分类

HTML标签被人为定义分为双标签和单标签。无论是单标签还是双标签都必须正确关闭，单标签通过 / 关闭，双标签通过 /双标签名称 关闭。HTML 标签可以嵌套使用，但不能交叉嵌套。

（1）单标签：<单标签名称 />
（2）双标签：<双标签名称></双标签名称>

5 基础HTML标签

5.1 标题标签

<h1>标题1</h1>

标题1


<h2>标题2</h2>

标题2


<h3>标题3</h3>

标题3


<h4>标题4</h4>
标题4

<h5>标题5</h5>
标题5

<h6>标题6</h6>
标题6

5.2 段落标签

<p>段落</p>

段落

5.3 文字标签

5.3.1 弱语义

<b>文字加粗<b> 文字加粗
<s>删除线</s>删除线
<i>倾斜</i>倾斜

5.3.2 强语义

<strong>文字加粗</strong>文字加粗
<del>删除线</del>删除线
<em>倾斜</em>倾斜

5.4 常用布局标签

<div></div>,表示一个大盒子，可以嵌套。
<span></span>,表示一个小盒子，一般用来存放一些文字内容

5.5 图片标签

<img src = "图片路径" />

常用属性：
（1）src : 图片引入位置
（2）title : 图片标题，鼠标在图片上悬停时显示的内容
（3）alt : 图片的提示文字，当图片无法正常加载显示的时候显示
（4）width： 用来定义图片宽度
（5）height : 定义图片的高度，只用设置width或height，另外一边会自动缩放，width和height的单位是px

5.6 超链接标签

<a href = "链接地址"> 链接名称</a>,默认情况下，a标签中内容会带下划线和颜色

常用属性：
target：target = “_blank”，在新窗口打开页面

空链接：定义一个点击时不会跳转的链接，一般出现在生产阶段，因为此时还不能确定目标地址所在

<a href = "#">空链接</a>
<a href = "javascript">空链接</a>

5.7 表单

5.7.1 表单域

在网页上用来收集用户数据，并且将数据提交到后台的一个HTML模块，在HTML中专门定义了一个form标签，即表单域。
<form action = "" method = "">
表单域内容
</form>

表单域定义后相当于一张“白纸”，用户在上面填写数据（通过其他表单元素实现），当用户填写完数据之后点击提交按钮，数据就会自动提交到action属性定义的目标地址（action 里面可以为空，或者#来用于数据提交测试），method属性值里面填写提交数据的方法，get或post。

5.7.2 表单元素

(1) 文本输入框
<input type = "text" value = "默认文本" name = "" />

(2) 密码框
<input type = "password" name = "" />

(3) 单选框
<input type = "radio" name = "gender" checked = “checked” />选项1
<input type = "radio" name = "gender" />选项2

一组单选框要达到只能选其中一个的效果，需要给多个选项设置相同的name值
checked = checked，设置默认选中，可以只写属性checked

(4) 复选框
<input type = "checkbox" name = "" checked/>选项1
<input type = "checkbox" name = "" />选项2
<input type = "checkbox" name = "" />选项3
checked = checked，设置默认选中，可以只写属性checked

(5) 下拉框
<select name = "">
<option value = "选项1" selected>选项1</option>
<option value = "选项2">选项2</option>
</select>

(5) 文本域
<textarea name = "" cols = "30" rows = "10"> </textarea>
rows：行数
cols：列数
resize:none：禁用大小拖拽
文本域大小通常通过CSS设置，不用rows和cols

(6) 普通按钮
<input type = "button" name = "" value = "普通按钮" />

(7) 重置按钮
<input type = "reset" name = "" value = "重置按钮" />

(8) 提交按钮
<input type = "submit" name = "" value = "提交" />

5.7.3 input 标签属性

（1）type：表示类型，通过type属性值来区分标签类型，如text表示文本输入框

（2）value：定义input输入框默认展示的文字内容，常用于用户手动输入的input框

（3）name：用来给input框起名，用来区分提交到后台的数据

5.8 列表标签

5.8.1 无序列表

<ul>
    <li></li>
    <li></li>
</ul>

5.8.2 有序列表

<ol>
    <li></li>
    <li></li>
</ol>

6 HTML5新特性

最新的HTML标准，市面上的HTML5指HTML5+CSS+javascript或其他脚本集合，指代一套新的开发流程和模式。HTML5最大的变革：标签语义化。

6.1 结构标签

在这里插入图片描述

  • 页面头部：header
  • 导航栏：nav
  • 文章内容：article
  • 一个区块，与div相似：section
  • 侧边栏：aside
  • 页脚：footer

6.2 新增表单标签

type属性值说明
email限定用户输入的必须是email类型
url限定用户输入的必须是网络地址，包含http://
datetime-local限定用户输入的必须是时间日期类型
date限定用户输入的必须是日期类型
week限定用户输入的必须是周类型
time限定用户输入的必须是时间类型
month限定用户输入的必须是月类型
number限定用户输入的必须是数值类型
search搜索框
color产生一个拾色器
range产生一个滑块

6.3 音视频频标签

音频标签：在网页中插入一段声音资源。
语法：
<audio autoplay controls loop>
对不起，您的浏览器不支持该标签
<source src = "路径1" />
<source src = "路径2" />
</audio>

  • autoplay: 设置该声音自动播放（部分浏览器不兼容）
  • controls：调用当前设备自带的播放控制，可以调节音量等
  • loop：设置循环播放
  • autoplay、controls、loop属性值和属性名相同，可以只写属性名
  • audio里的文字会在浏览器不兼容该标签时显示出来
  • 存在多个路径是因为当前互联网环境下没有哪一个浏览器可以兼容所有的声音格式，也没有哪种声音格式可以支持所有浏览器。出于兼容性考虑，一般引入多个格式
  • 不同浏览器下会有不同的显示效果

视频标签（video）：语法和属性与audio相同

艸雨田*
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML基础知识
12-20
HTML前端网页设计的一些小知识，非常适合初学者学习，
你是不是已经超纲了？一文解决JavaWeb中要求的HTML，是什么样的？
叶绿体不忘呼吸
02-07 861
初学JavaWeb，前端HTML需要掌握什么？需要了解什么？你是不是已经超纲了？超文本“醉翁之意”，标记“画地为牢”，给HTML文件“解衣”，HTML有什么潜规则，标签也双标，段落超链接，无处不在的表单，“脚踏多条船”的复选框，下拉列表，按钮“打开潘多拉魔盒”......
HTML基础知识点
qq_40046544的博客
07-27 8138
网页是一个包含HTML标签的纯文本文件，它可以存放在世界某个角落的某一台计算机中，是万维网中的一页，是超文本标记语言格式。它通常是由图片、文字、链接、声音、视频等元素组成。通过网页浏览器访问。HTML指的是超文本标记语言（HyperTextMarkupLanguage），它是用来描述网页的一种语言。web标准也成为网页标准，它是由一系列标准组成，这些标准大部分由W3C负责定制，也有一些标准由其他标准组织制定。绝对路径指目录下的绝对位置，可以直接到达目标位置，通常从盘符开始的路径。例如D从。...
HTML基础标签
weixin_45348240的博客
03-23 6027
一、HTML介绍 1、什么是HTML? HTML是一门语言，所有的网页都是用HTML这门语言编写出来的。HTML(HyperText Markup Language):超文本标记语言。 超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容。 标记语言：由标签构成的语言 HTML运行在浏览器上，HTML标签由浏览器来解析 HTML标签都是预定义好的。例如:使用< img>展示图片 2、W3C标准:网页主要由三部分组成 结构:HTML 表现:css 行为:
全网最全HTML基础
a1085653724的博客
04-20 4822
1.HTML结构 认识 HTML 标签 ，HTML 代码是由 "标签" 构成的。 形如: <body>hello</body> (1).标签名(body)放到<>中. (2).大部分标签成对出现,<body>为开始标签,</body>为结束标签. (3).少数标签只有开始标签, 称为 "单标签". (4).开始标签和结束标签之间, 写的是标签的内容.(hello everyone) (5).开始标签中可能会带有 "属性". id
html基础
02-20
html基础
HTML中的文档声明
小卡酷谋的博客
04-22 1138
浏览器都开始采纳新标准，但存在一个问题就是如何保证旧的网页还能继续浏览，在标准出来以前，很多页面都是根据旧的渲染方法编写的，如果用的标准来渲染，将导致页面显示异常。书写文档声明原因是不同版本所支持的 HTML 元素类型是不同的，我需要告诉浏览器以哪一种文档类型方式来解析当前的这个 HTML 文件。模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置高度，子元素设置一个百分比的高度是无效的。为保持浏览器渲染的兼容性，使以前的页面能够正常浏览，浏览器都保留了旧的渲染方法（如：微软的。
用html写一个旋转菜单
liulang68的博客
04-24 584
【代码】用html写一个旋转菜单。
Web前端开发之HTML_3
zx1026409886的博客
04-23 899
表单在Web网页中用来给用户填写信息，从而采集用户信息，使网页具有交互功能。所有的用户输入内容的地方都用表单来写，如登录注册、搜索框。表单是由容器和控件组成的，一个表单一般应包含用户填写信息的输入框，按钮等，这些输入框、按钮叫做控件，表单就是容器，它能够容纳各种各样的控件。
HTML随机点名程序
m0_65992344的博客
04-22 280
HTML随机点名程序
HTML
2401_83693610的博客
04-25 800
分为前端（html、css、js）和后端（php、mysql、Java），前端是看到的内容，由前端人员开发。但网页的固定结构叫做整体、头部、标题、主体... 2.网页中的结构是通过特定的HTML标签进行描述。浏览器：是网页显示、运行的平台，是前端开发必备利器。常见的浏览器包括：IE、火狐浏览器（Firefox）、谷歌（chrome）、Safari浏览器、Opera（欧朋）。三、1.html的概念：专门用于网页开发的语言，主要通过HTML标签对网页中的文本、图片、音频、视频等内容进行描述。
基于java,SpringBoot和HTML实验室预约管理系统设计
程序猿大波的博客
04-23 481
本研究旨在设计并实现一个基于Java, Spring Boot和HTML的实验室预约管理系统，以解决实验室资源分配不均、管理混乱和预约流程繁琐等问题。系统采用B/S架构设计，后端使用Spring Boot框架进行开发，前端使用HTML进行页面设计，实现了用户登录、实验室预约、查看预约状态以及管理员对实验室的管理等功能。首先，系统通过Spring Boot实现了快速开发和部署，简化了项目的配置和管理。
用html画一个四叶草
liulang68的博客
04-20 1235
以上是部分代码，需要请看主页加联系方式。
HTML中的页面可见性
小卡酷谋的博客
04-22 376
所以，所谓页面可见性，就是获取当前页面的可见状态。因为对于用户来讲可以打开好多标签页面来回切换，然而始终只有一个页面处于显示状态。所以我们可以通过页面可见性（Page Visibility）API 来判断当前页面是显示状态还是隐藏状态。页面事件来判断当前页面可见性的状态，并针对性的执行某些任务。长期以来一直缺少一个判断用户是否正在浏览某个指定标签页的方法。里页面可见性接口就提供给了程序员一个方法，让他们使用。用户是否去看别的网站了？更多有关页面可见性的内容可以参阅。"页面切换了~目前不可见"
vue echarts折线图 折线堆积图和折线面积图
最新发布
Z18834071903的博客
04-26 232
vue echarts折线图 折线堆积图和折线面积图
html笔记 ai问答
qq_50437196的博客
04-23 379
在HTML中，`text-align: center` 属性是用来设置内联内容（比如文本或链接）在其块级容器（比如`<div>`, `<p>`, 或 `<h1>` 等）内部水平居中的。- `$("p span")`会选择所有位于`p`元素内的`span`元素，无论`span`元素嵌套在`p`元素内部的深度如何。在这个例子中，尽管 `text-align: center` 是应用在 `<h1>` 上的，但 `<span>` 作为内联元素会继承这个对齐方式，从而使得其中的文本居中。
HTML使用jQuery实现两个点击按钮，分别控制改文本字体颜色和字体大小
m0_65992344的博客
04-22 411
jQuery 是一个广泛使用的 JavaScript 库，旨在简化对 HTML 文档的操作、事件处理、动画效果和 AJAX 等操作。
html基础手册下载
12-31
你可以在网上找到很多关于HTML基础手册的下载资源。可以在搜索引擎上输入关键词“HTML基础手册下载”，然后浏览搜索结果找到适合自己的下载链接。同时，你也可以在一些知名的学术网站或者技术论坛上寻找HTML基础手册的下载资源，通常这些网站提供的资源更加权威和可靠。 另外，一些在线教育平台也会提供HTML基础手册的下载服务，如果你愿意在线学习，可以考虑在这些平台上搜索相关资源。此外，你还可以直接访问一些技术社区或者开发者论坛，这些地方通常都会有人分享HTML基础手册的下载链接。 当然，如果你更喜欢实体书籍，可以考虑购买一本关于HTML基础的书籍，这样不仅可以得到手册的内容，还可以拥有实体书的收藏价值。总的来说，无论是在线资源还是实体书籍，都有很多途径可以获取到HTML基础手册的下载或购买信息，希望你能找到适合自己的方式获取这份资料，加油！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值