Html详细的介绍，让你一目了然

最新推荐文章于 2022-10-17 11:08:56 发布
最新推荐文章于 2022-10-17 11:08:56 发布
阅读量306 收藏 1
点赞数

HTML:HTML 快速入门

一、浏览器内核分类

  • Trident——IE/Edge器浏览使用
  • Gecko——火狐浏览器使用
  • Webkit——safari浏览器使用
  • Chromium/Blink——Chrome浏览器使用
  • Presto——Opera浏览器使用（新版Opera已经使用Blink内核）

二、Web标准构成

Web标准是由W3C及其他标准化资质制定的标准集合。包括：结构（Structure）、表现（Presentation）、行为（Behavior）

  • 结构标准：用于对网页元素进行整理和分类，包括 xml、xhtml 两部分
  • 样式标准：用于设置网页元素的版式、颜色、大小等外观，主要指 Css
  • 行为标准：网页模型的定义及交互的编写。包括 DOM和ECMAScript两部分

所以，理想状态下，一个网页的源码中需要包含：.html、.css、.js

三、HTML开发工具

  • Dreamweaver、Sublime、WebStorm、HBuilder、Visual Studio Code

     

四、html基本骨架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

1、<!DOCTYPE>

<!DOCTYPE>位于文档的最前面，用于向浏览器说明当前.html文件使用的是哪种HTML或者XHTML标准规范。浏览器会按照此处指定的规范对html文件进行解析。

HTML5可以向下兼容，所以，现在直接指定为<!DOCTYPE html>即可。

2、charset（字符编码集）

  • GB2312：简体中文字符集，含6763个常用汉字
  • BIG5：繁体中文，港澳台地区使用
  • GBK：含全部中文字符，是对GB2312的扩展，支持繁体字
  • UTF-8：支持中文和英文等，是最常用的字符集

五、HTML标签

HTML大量使用语义化标签，所谓语义化就是见名知意，

1、排版标签

（1）、标题标签 <h1></h1>

  • h 即 head 的简写
  • 有<h1>、<h2>、<h3>、<h4>、<h5>、<h6> 6种，从左到右字号依次变小。
  • 基本格式<h1></h1>
  • 像<h7>这种错误的标签在展示时不起作用

（2）、段落标签<p></p>

  • p 即 paragraph 的简写
  • 基本格式<p>段落内容</p>
  • 段落中的文本内容超出浏览器宽度之后会执行自动换行

（3）、水平线标签<hr />

  • hr 即 horizontal 的缩写
  • 其作用是在页面中插入一条水平线
  • 基本格式<hr />
  • 这是一个自闭合标签。（普通标签成对出现；自闭合标签不需要包裹内容，自己就执行了开始和结束的操作）

（4）、容器标签 <div></div> 和 <span></span>

  • div 即 division 的缩写，分割、区分的意思
  • span 即 span ，跨度、范围的意思
  • 这俩本质上是一个容器，类似于 Android 中的ViewGroup
  • 基本格式<div>这是div标签中的内容</div> <span>这是span标签中的内容</span>

2、文本格式化标签

标签效果
<b></b>、<strong></strong>加粗，XHTML推荐使用<strong>
<i></i>、<em></em>斜体，XHTML推荐使用<em>
<s></s>、<del></del>删除线，XHTML推荐使用<del>
<u></u>、<ins></ins>下划线，XHTML推荐使用<ins>

关于 HTML 和 XHTML的区别，可以参考http://www.w3school.com.cn/xhtml/xhtml_html.asp、https://www.zhihu.com/question/19783105

3、标签的属性

  • 基本格式：<标签名 属性1=”属性值1“ 属性2=”属性值2“></标签名>
  • 标签可以拥有多个属性
  • 属性必须写在开始标签中，位于标签名后面
  • 属性之间不区分顺序
  • 标签名与属性、属性与属性之间使用空格隔开
  • 任何属性都有默认值，省略该属性表示使用默认值

4、图像标签 <img />

  • img 即 image 的缩写
  • 基本格式<img src="图片URI/URL" />
  • <img />常用属性如下：
属性属性值属性含义
srcURI/URL图像的路径
alt文本图像无法正常显示时的提示文本
title文本鼠标悬停于图像时显示的文本
width像素（XHTML 不支持按页面百分比显示）图像的宽度
height像素（XHTML 不支持按页面百分比显示）图像的高度
border数字设置图像边框的宽度
  • 设置图像的宽高时，如果想等比缩放，则只设置其中一个即可

5、超链接标签

(1)、超链接标签<a></a>

  • anchor 的缩写
  • 基本格式 <a href="跳转目标url" target="目标窗口的弹出方式">超链接文本或图像</a>
    • href 即 HyperText Reference , 指定要跳转的URL地址
    • target , 指定目标窗口的打开方式。取值为 self / blank , self 为默认值，blank 表示新窗口打开

注意：

  • 外链需要添加 http:// 或 https:// 前缀
  • 内部链接 直接链接内部页面名称即可，如 <a href="index.html">首页</a>
  • 如果当时没有确定链接目标时，可以为 href 赋值 为 “#” ,即 href="#",表示一个空连接
  • 各种网页元素，如 文本、图像、表格、音频、视频等都可以作为超链接的载体
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接文本示例</title>
</head>
<body>
    <a href="https://www.jianshu.com/u/414acf7abc2b" target="_blank">CnPeng简书</a>
    <br/>
    <a href="https://blog.csdn.net/north1989">CnPeng CSDN</a>
    <br/>
    <a href="aTag.html" target="_blank">内部链接--再打开一个aTag.html</a>
    <br/>
    <a href="#">空的超链接</a>
</body>
</html>

（2）、锚点

  • 通过创建锚点，可以快速定位到目标内容区域
  • 创建锚点分为两步
    • 为目标内容（即锚点）创建id 并赋值
    • 将超链接文本与锚点的id 关联，<a href="#id名称"> 超链接文本 </a>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a href="#createAnchor">点击跳转到锚点位置</a>
    <br/>
    通过创建锚点，
    可以快速定位到目标内容区域

    <!--加这一堆br是为了增加页面高度，不然显示不出锚点效果-->
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br>

    <h3 id="createAnchor">创建锚点分为两步</h3>
    <hr/>
        为目标内容（即锚点）创建id 并赋值
    <br/>
        将超链接文本与锚点的id 关联，&lt;a href="#id名称"&gt; 超链接文本 &lt;/a&gt;
</body>
</html>

 

qq_42279090
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【网页开发】网页的相关概念
Jane_xxxxxy的博客
07-26 434
一、什么是网页 网站是指在因特网上根据一定的规则，使用 HTML 等制作的用于展示特定内容相关的网页集合。 网页是网站中的一“页”，通常是 HTML 格式的文件，它要通过浏览器来阅读。 1、网页的组成： 网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以 .htm 或 .html 后缀结尾的文件，因此将其俗称为 HTML 文件。 2、什么是HTML： HTML 指的是超文本标记语言 (Hyper Text Markup Language) ，它是用来描
个人爱好兴趣技能介绍html5单页模板
04-02
兴趣和爱好部分可以使用HTML5的列表元素来组织，比如`<ul>`和`<li>`，让用户一目了然。技能部分可以通过进度条或星级评分来可视化展示，利用CSS3的伪元素和过渡效果增加视觉吸引力。简历部分可以利用HTML5的section...
HTML详细教程
qq_40046544的博客
10-17 6784
HTML 是网页使用的语言，定义了网页的结构和内容。浏览器访问网站，其实就是从服务器下载 HTML 代码，然后渲染出网页。HTML 的全名是超文本标记语言（HyperText Markup Language），上个世纪 90 年代由欧洲核子研究中心的物理学家蒂姆·伯纳斯-李（Tim Berners-Lee）发明。它的最大特点就是支持超链接，可以跳转到其他网页，从而构成了整个互联网。1999 年，HTML 4.0.1 发布，成为广泛接受的 HTML 标准。
HTML详解
weixin_40055163的博客
10-08 1万+
HTML 概念：HTML（Hypertext Markup Language ) 超文本标记语言。 HTML 不是一种编程语言，而是一种标记语言。 Html主要用来描述网页中所需要的组件，例如：文本框、表格、图片、视频等等，也对网页进行排版。 HTML的源文件，称为“网页”，通常以.html或者.htm为结尾。 可以使用任意文本编辑器编辑，需要使用浏览器执行。 访问：https://www.w3school.com.cn/ 1 标记（标签）基本语法 1.定义标签 HTML语言以标签形式体现，这些标签通常
HTML是什么？HTML简介
ccc369639963的博客
01-22 1万+
HTML是什么？HTML简介 HTML 英文全称是 Hyper Text Markup Language，中文译为“超文本标记语言”，专门用来设计和编辑网页。 使用 HTML 编写的文件称为“HTML 文档”，一般后缀为.html（也可以使用.htm，不过比较少见）。HTML 文档是一种纯文本文件，您可以使用 Windows 记事本、Linux Vim、Notepad++、Sublime Text、VS Code 等文本编辑来打开或者创建。 每个网页都是一个 HTML 文档，使用浏览器访问一个链接（URL）
HTML（超详细）（图+文）
Czc1357618897的博客
01-12 1万+
HTML各个知识点超详解 ！！！
简洁单页企业介绍html网站模板
04-02
这种设计风格强调视觉连贯性和整体性，让访问者可以一目了然地获取所需信息。 其次，“简洁”是这个模板的另一大特点。简洁的设计意味着去除不必要的元素，使页面内容清晰、易于理解。这包括使用简单的布局、有限的...
HTML基础系统、详细整理.md
07-01
详细地整理html基础知识，贯穿整个html知识，系统地整理，一目了然。
大数据可视化HTML模版
03-03
大数据可视化HTML模版是用于展示复杂数据集的一种高效方式，它通过使用前端技术将大量信息转化为易于理解的图形或图表，使数据的洞察力一目了然。在本模版中，HTML作为基础结构语言，提供了页面布局和交互的基础框架...
产品介绍单页网页模板
01-22
这通常通过高质量的产品图片、详细的描述、用户评价或者视频来实现。 其次，“单页”意味着整个网站只有一个页面，所有内容都集中在这个页面上，而不是分散在多个链接之间。这样的设计减少了用户的导航负担，使他们...
HTML超详细基础知识总结
全粘小谭的博客
09-25 3780
第一次写博客，这次打算把暑期复习的一些前端知识点（干货满满哦）发出来，主要是一些基础的东西，有时候在做一些小项目时，会发现网页写的很难受，主要原因就是基础不牢靠，所以复习的时候还是花了很多心思的，当基础学扎实了，无论多漂亮的网页都能自己写出来了，这种感觉还是挺爽的🤣
HTML的详细介绍
qq_45623923的博客
06-01 1113
HTML简介 什么是HTML？ 超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。 HTML不是一种编程语言，而是一种标记语言 HTML文档是由标签和文本组成的。 HTML使用标记标签来描述网页。 什么是HTML标签？ HTML 标签是由尖括号包围的关键词，比如 HTML 标签通常是成对出现的，比如 和 标签对中的第一个标签是开始标签，第二个标签是结束标签 开始和结束标签也被称为开放标签和闭合标签 HTML文件是怎么运行
HTML
weixin_30467087的博客
11-03 182
前端概述 import socket def main(): sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM) sock.bind(('localhost',8089)) sock.listen(5) while True: connecti...
HTML标签图文详解（一）
liuzuoping的博客
12-25 1417
前两篇博文我们熟悉了前端的开发利器VSCode VSCode的安装与基本使用 VSCode的好用的插件 本文主要内容 头标签 排版标签：<p>、 <div>、 <span>、<br> 、 <hr> 、 <center> 、 <pre> 字体标记：<h1>、 <font>、 <b&gt...
HTML-JavaScript基础（非常详细）
热门推荐
南劲竹的博客
09-15 5万+
什么是JavaScript JavaScript是一种基于对象和事件驱动的、并具有安全性能的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。 JavaScript特点 是一种解释性脚本语言（代码不进行预编译）。  主要用来向HTML（标准通用标记语言...
01-HTML详细介绍
仰望与追逐的博客
07-04 438
01-HTML详细介绍1、B/S 软件的结构2、前端的开发流程3、网页的组成部分4、HTML 简介5、创建 HTML 文件6、HTML 文件的书写规范7、HTML 标签介绍8、常用标签介绍 1、B/S 软件的结构 JavaSE C/S Client Server B/S Browser Server 2、前端的开发流程 3、网页的组成部分 页面由三部分内容组成！ 分别是内容（结构）、表现、行为。 内容（结构），是我们在页面中可以看到的数据。我们称之为内容。一般内容 我们使用 html 技术来展示。 表
HTML介绍
xiao_suan_cai的博客
04-17 298
html介绍
HTTP响应报文与工作原理详解（转）
09-07 1755
超文本传输协议(Hypertext Transfer Protocol，简称HTTP)是应用层协议。HTTP 是一种请求/响应式的协议，即一个客户端与服务器建立连接后，向服务器发送一个请求;服务器接到请求后，给予相应的响应信息。 　HTTP 请求报文 　　HTTP 请求报文由请求行、请求头部、空行 和 请求包体 4 个部分组成，如下图所示： 　　下面对请求报文格式进行简单的分析...
超好看个人主页html介绍页源码
最新发布
12-15
接着，页面主体部分采用了分段式的排版，清晰地展示了个人的介绍信息、技能专长、工作经历和项目展示等内容，让人一目了然地了解该主页的所有者的全貌。此外，页面底部还设置了联系方式及社交媒体链接，方便了解者与...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值