HTML总结

最新推荐文章于 2023-07-05 11:18:20 发布
最新推荐文章于 2023-07-05 11:18:20 发布
阅读量1.3k 收藏
点赞数
分类专栏： 网站 文章标签： 前端 html web 网页 网站 Powered by 金山文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhiwenganyong/article/details/128757280
版权

web开发是创建Web页面或App等前端界面呈现给用户的过程。web开发开发是从网页制作演变而来，早期网站主要内容都是静态，用户使用网站的行为也以浏览为主。随着互联网技术的发展，各种终端设备应用程序与用户沟通交互的界面，都是由Web开发完成。现今，前端开发领域就更加广泛，包含后端(nodejs)，小程序开发，Android和ios的App开发，游戏，大数据，桌面应用等。

什么是网页

  • 网页是网站的基本单位，也叫Web页面，是承载各种网站应用的平台。

  • 网页由主要由文字，图片和链接构成，除此之外，网页的元素还包括表格、动画、音频、视频等等

浏览器

浏览器（browser application）是用来访问和浏览万维网页面的客户端软件，是显示、运行网页的平台。

组成部分

  1. 用户界面 包括浏览器中可见的地址输入框，浏览器前进返回按钮，打开书签，打开历史记录等用户可操作性的功能选项。

  1. 浏览器引擎(渲染引擎) 渲染引擎负责读取网页内容，整理讯息，计算网页的显示方式并显示页面。

  1. JS 解释器 用来解释和执行 JavaScript 代码，例如 V8 引擎，执行 javascript语言来实现网页的动态效果。

Web 标准

Web标准，使得Web开发更加容易。Web标准由万维网联盟（W3C）制定，可以确保所有浏览器正确显示您的网站而无需费时重写。

构成

主要包括结构（Structure）、表现（Presentation）和行为（Behavior）三个方面。

  • 结构

  • 用于对网页元素的进行整理和分类，指的就是html；

  • 表现

  • 用于设置网页元素的版式、颜色、大小等外观样式，指的就是css

  • 行为

  • 指网页模型的定义以及交互的编写，主要指的就是javascript；

简单理解，结构写到html文件中，表现写到css文件中，行为写到Javascript文件中。

VSCode

Visual Studio Code (简称 VS Code / VSC) 是由微软开发的一款开源源代码编辑器，免费开源的现代化轻量级代码编辑器，支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义热键、括号匹配、代码片段、代码对比 Diff、GIT 等特性，支持插件扩展，并针对网页开发和云端应用开发做了优化。软件跨平台支持 Win、Mac 以及 Linux。

HTML

HTML 的全称为 超文本标记语言（Hyper Text Markup Language）

所谓超文本，因为它可以加入图片、声音、动画、多媒体等内容，不仅如此，它还可以从一个文件跳转到另一个文件，与各地主机的文件连接。

  • HTML 指的是超文本标记语言 (Hyper Text Markup Language)

  • HTML 不是一种编程语言，而是一种标记语言 (markup language),标记语言是一套标记标签 (markup tag)

基本文档结构

创建一个HTML文档，最简单的方法是创建一个文本文件，然后将其扩展名保存成.html

  • <html>元素说明这是html

  • <head>元素提供了关于这篇文档的信息。

  • <title>定义页面标题。

  • <body>定义文档的主体，用户所看到的内容。

完整文档结构

<!-- doc:document文档 type:类型 -->
<!DOCTYPE html>
<!-- 文档的主要语言为：en:英文；zh:中文 -->
<html lang="en">
<head>
    <!-- charset：字符集 utf-8 万维码 -->
    <meta charset="utf-8">
    <title>myweb</title>
</head>
<body>
    <!-- 我会很快完成第一个项目开发 -->
    Hello,My first html page
</body>
</html>
<!-- 
    1.<!DOCTYPE html>:文档的声明和版本的类型
    2.<html lang="en">:文档主题语言
    3.文档编码---utf-8
 -->

HTML元素

元素（Element）：由开始标签、闭合标签以及标签之间的内容组成。

HTML 属性

元素可以用属性进行配置。属性由属性名和属性值组成，例如：

HTML常用标签

排版标签

排版标签主要和css搭配使用，显示网页结构的标签，是网页布局最常用的标签。

标题标签

为了使网页更具有语义化，我们经常会在页面中用到标题标签，HTML提供了6个等级的标题

 <h1>一级标题</h1>
 <h2>二级标题</h2>
 <h3>三级标题</h3>
 <h4>四级标题</h4>
 <h5>五级标题</h5>
 <h6>六级标题</h6>
注意： h1 标签表示页面中最重要标题信息，要求只能有一个h1标签。
段落标签

标签表示文本的段落，段落通常在文档中表示为文本块，会自动在其前后创建一些空白。

<p>  文本内容  </p>
换行标签

在HTML中，用来设置文本强制换行显示。

<br/>
div标签

div标签本身没有含义，在html中布局使用最多标签为div，用来为HTML文档内大块的内容提供结构。

<div> 这是块内容 </div> 
<div> 这是块内容 </div>
<div> 这是块内容 </div>
是块级元素，独占一行
span标签

span本身没有什么含义，可用作文本的容器，包含着文本内容，还可以通过对span标签对象设置不同样式实现我们要的美化效果。

<span> 文本内容 </span> 
<span> 文本内容 </span>
<span> 文本内容 </span>
<span>是行内元素

文本格式化标签

在网页中，有时需要为文字设置粗体、斜体或下划线效果，这时就需要用到HTML中的文本格式化标签，使文字以特殊的方式显示。

图像标签img

HTML网页中任何元素的实现都要依靠HTML标签，要想在网页中显示图像就需要使用图像标签

<img src="图像URL" />
属性

  • src：该属性指定图片文件所在的位置，可以是相对路径，也可以是绝对路径。

  • alt：该属性指定一段文本，用来作为该图片的提示信息。

  • height：指定图片的高度，属性值可以是百分比，也可以是像素值。

  • width：指定图片的宽度，属性值可以是百分比，也可以是像素值。

注意引入路径问题：

1. 图像文件和HTML文件位于同一文件夹：只需输入图像文件的名称即可，如<img src=”logo.gif” />。  
2. 图像文件位于HTML文件的下一级文件夹：输入文件夹名和文件名，之间用“/”隔开，如<img src="images/img01/logo.gif"  />。  
3. 图像文件位于HTML文件的上一级文件夹：在文件名之前加入“../” ，如果是上两级，则需要使用 “../ ../”，以此类推，如<img src="../logo.gif" />。

链接标签

在HTML中创建超链接非常简单，只需用标签环绕需要被链接的对象即可

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
属性

  • href( Hypertext Reference的缩写)：意思是超文本引用，用于指定链接目标的url地址，当为标签应用href属性时，它就具有了超链接的功能。

  • target：用于指定链接页面的打开方式，其取值有_self和_blank两种，其中_self为默认值，_blank为在新窗口中打开方式。

1.外部链接需要添加 http:// www.baidu.com(opens new window)
2.内部链接直接链接内部页面名称即可 比如 < a href=”index.html”> 首页
3.如果当时没有确定链接目标时，通常将链接标签的href属性值定义为“#”(即href=”#”)，表示该链接暂时为一个空链接。
4.不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。

锚点定位

通过创建锚点链接，用户能够快速定位到目标内容。

创建锚点链接分为两步：

  1. 使用链接文本创建链接文本（被点击的元素）

  1. 使用相应的id名标注跳转目标的位置。 (找目标位置元素)

网页的icon图标

<head> 元素包含了所有的头部标签元素,使用link标签添加icon图标，meta标签添加网站相关信息。

<link rel="shortcut icon" href="http://example.com/favicon.ico" type="image/x-icon">

使用特殊字符

实体是浏览器用来替代特殊字符的一种编码。

  • &nbsp;

  • 空格(不换行空格)

  • &emsp;

  • 空格（全角）

  • &lt;

  • 小于号

  • &gt;

  • 大于号

  • &copy;

  • 版权

注释标签

在HTML中还有一种特殊的标签——注释标签。如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标签。使用ctrl + / 或者 ctrl +shift + / 快捷键就可

<!-- 注释语句 -->
注释内容不会显示在浏览器窗口中，但是作为HTML文档内容的一部分，也会被下载到用户的计算机上，查看源代码时就可以看到。

HTML标签分类

  • 双标签

  • 由开始标签和结束标签组成的一对标签，它可以嵌套和承载内容。

  • 单标签

  • 指没有内容的标签，在开始标签中自动闭合。

HTML列表

无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

无序列表使用 <ul> 标签

<ul> 是 unordered list 的缩写，表示无序列表。默认情况下，无序列表的每一项都使用实心圆符号表示；它有一个属性type，type属性值有disc（实心圆默认）、circle（空心圆）、square（实心正方形）、none（取消前缀）。

有序列表

<ol>:order list的缩写，表示有序列表。它为列表的每一项进行编号，默认的type类型是数字，且从数字1开始。它有两个属性：type和start。

type有五个属性值：1、a、A、i、I(罗马数字)，表示列表前缀的格式；

自定义序列表

自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

<dl>：definition list的缩写，表示定义列表。<dl></dl>里面只能包含<dt>和<dd>。

<dt>：定义标题。<dt>和<dd>个数没有限制，通常是一个<dt>对应多个<dd>。

<dd>：definition description 的缩写，定义描述。定义描述一般是对定义标题的解释说明；但是自定义列表没有前缀，但有缩进。

像向日葵一样~
关注
专栏目录
html总结.xmind
09-08
自己总结的html的笔记，绘制了详细的思维导图，每个思维导图中均有详细的博文解释，方便大家学习和理解，免费分享给大家。适合网页前端的爱好者和学习者
HTML实战项目总结（一）
LygTom的博客
07-19 7476
HTML实战项目总结（一） HTML实战：今天做了一天的项目实战，感觉自己离一个真正的前端开发者而言距离还是有些遥远。不过我相信这种距离是会渐渐的缩近的，相信自己。 下面给自己进行总结一下，一是为了提醒自己，警钟长鸣。而是让后来人少走弯路，积累经验。 第一：自己不够细心，在实战项目中标签使用的越多就会出现嵌套不正确，往往会使一个标签嵌套到另一个标签中，这种错误经常会使整个项目布局出现凌乱，使
HTML项目结束总结。2020-09-24
weixin_51051897的博客
09-24 608
HTML项目结束总结 一，关于项目 1，首先先分析项目结构，将页面分开来做分析，做好页面框架结构。 2，将页面板块分划好，然后细化板块内的内容，找到合适的标签，来构建板块，再用相应的属性达到合适的效果。 ...
HTML项目总结（元素标签、表格、表单、列表、知识点）
weixin_51051149的博客
09-23 803
HTML项目总结 HTML项目总结 经过半个月的学习，本人通过厚溥实训机构的谢经理的讲解，自己对项目进行总结。 元素标签 1.首先标签一般分为双标签（中间为内容）和单标签（）。 2.前端代码中在中的"utf-8"所表示的意思为可将所有代码的文字识别(包括中文)，不至于乱码。 3.排版标签 ......为标题标签,中间内容的字体大小也逐渐缩减。 段落标签，可将中间的内容独立成段。 水平线标签。 换行标签。 4.div和span标签的差别 中间内容独立成行。 中间内容不独立成行，只有以空格的间距。 5.文本格式
前端-HTML总结
cjxiaobaic的博客
12-24 502
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、使用步骤 1.引入库 代码
HTML总结【详细】
CYL_2021的博客
03-18 2747
什么是HTML？ HTML 是 HyperText Markup Language（超文本标记语言）的缩写，它是用于创建网页 的标准标记语言。HTML 使用标记标签来描述网页，由浏览器来解析，即使用 HTML 来建 立 Web 站点，通过 Web 浏览器读取 HTML 文档，并以网页的形式显示出来。 一.网页.html页面主要内容 <!-- 文档类型声明，作用就是告诉浏览器使用那种HTML版本来显示网页，下面是HTML5 --> <!DOCTYPE html> 用来定义当前文档.
HTML总结.xmind
02-23
HTML总结.xmind
html总结.
03-02
html总结.
html总结文档
05-12
html常用标签总结，包含各种表单标签 1.表单：<form></form> 主要属性：id name action method 2.input元素： 主要属性：name type value class type： text submit button radio checkbox hidden...
前端html项目总结,web前端开发项目总结.docx
weixin_36210213的博客
06-27 1297
web前端开发项目总结前端开发经验总结　　通过此次大作业的设计到完成，我负责的是web前端的开发，经过此次作业和结合W3C上的自学，我渐渐有了一些对前端开发的小小经验。WEB标准是什么？　　说是WEB标准，不过我这里主要是对HTML5和的一些经验总结。因为WEB含盖的内容实在是太多了，“WEB标准”是一系列标准的总称，包括、、、、、、、、等等。所以这里要跟大家指出来一下，WEB标准不是我们所说的D...
静态页面项目总结.docx
08-05
个人项目总结，以便于以后的查找，记录更有利于自身知识的提高和汇总。
HTML+CSS项目开发经验总结(推荐)
12-13
好几天没更新博客了，刚实战完一个HTML+CSS的简单项目。经过几天的摸索，发现收益良多。之前只是单纯得写demo，看知识点，没有亲自实战项目。但实战过后才会了解，如何才能更好地提升自己的技术。针对这次项目开发，我总结了以下内容： 一、技术总结 1、公共样式的设定 在开始项目之前，我们可以先大体了解一下项目中每个页面的内容，比如字体样式，段落结构，文字大小等。我们可以针对这些内容来设定一个固定的样式文件。在开发中    就可以直接引入此文件，而无需再重复敲CSS代码。 CSS Code复制内容到剪贴板 /*基本样式*/   * {        margin:0;   
MyHtml:项目开发过程总结的一些常用效果基于（jquery-1.8.3）
05-31
MyHtml 项目开发过程总结的一些常用效果基于（jquery-1.8.3） 1、ajax远程请求数据，请求时刻菊花狂转，请求成功，数据停止转动，再次请求提示数据存在 2、checkbox全选，反选，全不选 3、table本地搜索 4、基于插件jquery.lazyload.js插件的图片加载
一个后端人员的前端笔记之HTML
qq_34800986的博客
09-29 2154
HTML 简介 1:网页 1.1什么是网页 网站是指在因特网上根据一定的规则，使用 HTML 等制作的用于展示特定内容相关的网页集合。网页是网站中的一“页”，通常是 HTML 格式的文件，它要通过浏览器来阅读。网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以 .htm 或 .html 后缀结尾的文件，因此将其俗称为 HTML 文件。 1.2 什么是 HTML HTML 指的是超文本标记语言 (Hyper Text Markup Language) ，它是用
学习网页设计html学习总结
最新发布
2301_78256053的博客
07-05 1398
然后在具体的规划一个网页时，可以用树状结构先把每个页面的内容大纲列出来，尤其要制作一个大的网站 (有很多页面) 的时候，特别需要把这个架构规划好，也要考虑到以后可能的扩充性，免得做好以后又要一改再改整个网站的架构，很浪费时间和财力。复制了他的代码，把上面的内容修改成我的网站需要的文字。但是，我已经迈入了网页设计的大门，只要我再认真努力的去学习，在今后的闲余时间学习制作网页的更多知识以实现自身技能的提高，我坚信将来设计出的网页会更加专业，更加华丽，使它最终成为自己的一项技能。把它的文件名更改为保存的图片。
HTML项目总结
LH0420的博客
09-24 1263
HTML项目总结 1.写之前需要构思好需要几个板块，以免导致最后布局出现错乱 2.切换图，删除，图片放大，全选这几个还是需要熟练掌握 3.这个项目整体写的还行，就是首页因为布局原因导致最后整体页面布局太乱，有的地方完全找不到 4.项目做得还是有些慢，对于标签使用还是不够熟悉 5. HTML 一些常用的属性： class属性：为html元素定义一个或多个类名。 id属性：定义元素的唯一id。 style属性：规定元素的行内样式。 6.table一些常用属性 ①border： 规定表格边框的宽度  ②bgcol
大二学生web期末大作业 在线电影网站 HTML+CSS+JS
热门推荐
HTML网页设计 专注大学生网页设计
09-18 6万+
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件
html5中canvas线段绘制太阳花
无
07-27 1336
canvas线段绘制太阳花                                                  var canvas=document.getElementById("myCanvas");             var context=canvas.getContext("2d");                          cont
html画熊代码,HTML+CSS画一朵向日葵(示例代码)
weixin_39983384的博客
06-07 1696
1 2 3 4 5 6 7 8 9 10 .petal{11 position:absolute;12 width:50px;13 height:130px;14 transform-origin:50% 150%;15 opacity:.9;16 }17 .petal > div:nth-child(1){18 position:absolute;19 left:0;20 top:0;21...
HTML常用标签总结及用法实例
经过一段时间的学习，对于HTML也有了基础的认识。在网页基本结构中，一个HTML网页最基本由网页头...希望通过对HTML常用标签的总结和学习，能够帮助大家更好地理解和应用HTML标签，为日后的网页开发工作打下坚实的基础。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

像向日葵一样~

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值