HTML笔记

最新推荐文章于 2024-09-12 18:22:06 发布
最新推荐文章于 2024-09-12 18:22:06 发布
阅读量57 收藏
点赞数
分类专栏： 前端 文章标签： html 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Ashiu/article/details/130469526
版权
本文介绍了互联网的三大基石——URL、HTTP和HTML。URL是统一资源定位符，用于标识网络资源；HTTP是超文本传输协议，具有简单、无状态、可靠和可扩展的特点；HTML是超文本标记语言，用于创建网页结构。文中详细讲解了各个部分的构成和常见标签的用法。
摘要由CSDN通过智能技术生成

HTML 笔记

网络传输三大基石

URL

Uniform Resource Locator(统一资源定位符)，是互联网上用于标识和定位资源的一种标准格式

典型的URL格式： ‘protpcal://host/path?query#fragment’

  • protocal (协议)
    指的是访问资源时使用的协议，例如HHTP, HTTPS, FTP, SFTP等
  • host (主机名)
    指的是存储资源的服务器主机或IP地址
  • path (路径)
    指的是资源在服务器上的位置和名称，可以是文件路径或者目录路径
  • query (查询字符串)
    指的是附加在URL后面的一组键值对，用于传递参数和数据
  • fragment (片段)
    指的是文档内的特定部分，可以用于直接跳转到文档中的某个位置

HTTP

Hypertext Transfer Protocal (超文本传输协议)，是一种用于Web上传输数据的协议， 是Web通信的基础

特点

  • 简单：http是一个简单的请求-响应协议，使用简单的请求和响应模型来方便开发和调试
  • 无状态： http是一种无状态的协议，客户端和服务器间的通信不会保留状态信息，每次请求都是独立的
  • 可靠：http使用TCP/IP协议作为传输层协议，保证数据的可靠传输
  • 可扩展： http的请求和响应消息都可以包含自定义的头部信息，可根据需求扩展协议
  • 便捷： 请求和响应消息都包含头部信息和主体消息内容，头部信息以ASCII码形式给出，而消息内容则具有一个类似MIME的格式，使开发和部署直截了当

HTML

HyperText Markup Language(超文本标记语言)，是一种用于创建网页的标记语言，它是Web的基础技术之一， 由一系列的标签(tag)和属性(attribute)组成。HTML文件是由纯文本编写的，通过浏览器解析和渲染后以网页的形式显示

HTML的标签使用
<html>
	<head>
	</head>
	<body>
	</body>
</html>
  • html标签
    • 限定了文档的开始点和结束点
    • 在他们之间是文档的头部标签和主体标签
  • head标签
    • 内部放置的是页面的配置信息，用于定义网页的元数据，包括网页的标题、字符编码、关键词、样式表等信息
    • 只包含一些对浏览器的说明和信息，用于优化搜索引擎的检索，提高网页的访问效率和用户体验
    • 可包含多个元素，例如title、meta、link、style、script、base等
      • titile元素定义网页的标题，显示在浏览器的标题栏或者标签页上
      • meta元素定义网页的元数据，如字符编码、关键词、描述等
      • link元素用于引入外部资源，如样式表(stylesheet)、图标(favicon)等
      • style元素用于定义内部样式表
      • script元素用于引入JavaScript脚本
      • base元素用于为文档中所有相对链接设置一个相同的URL前缀，从而简化链接的编写，它只能在head中出现一次
    • 标签位置应当放在文档开始处，紧跟在后面，并处于前面
  • body标签
    • 内部放的是页面上展示出来的内容，是定义网页内容的部分
    • 包含了页面的主要内容，如文本、图像、链接、表格、表单、音频、视频等元素
    • 通常位于head元素之后，作为文档的第二个部分，定义了网页中可见的内容
  • 文本标签
    • 用于显示文本内容的标签，如标题、段落、链接、列表等，通过html标记创建，由浏览器解析和显示
    • 一些常用的html文本标签及用途
      • <h1>到<h6>: 用于定义标题，数字代表不同级别的标题
        <h1>这是h1标签</h1>
<h2>这是h2标签</h2>
<h3>这是h3标签</h3>
<h4>这是h4标签</h4>
<h5>这是h5标签</h5>
<h6>这是h6标签</h6>
      • <p>: 用于定义段落，显示一段文本内容
        <p>这是段落标签</p>
      • <a>: 用于定义链接，将文本或者图像转换为可点击的链接
        <a href="">这是超链接文本标签</a>
<a href=""><img src="" />这是超链接图片标签</a>
<!-- 双引号内放置本地资源或是网络资源-->
<a name="某锚点"></a>
<a href="#某锚点">锚点</a>
<!--设置锚点，能够帮助用户在页面过长的情况下将锚点设置在在不同位置进行跳转, 这里的'maodian'是自己命名的-->
<a href="某页面名.html#某锚点">
<!--不同页面设置锚点-->
      • <img>: 图像标签，用于插入图像到页面中
        <img src="img/img1.jpg" title="图片标题" alt="当图片加载失败后的替代文本"/>
<!--图片来自于img/img1.jpg: (img文件夹下名为img1的jpg格式的图片)-->
      • <ul>和<ol>: 分别用于定义无序列表和有序列表
        • <li>: 用于定义列表项，嵌套在<ul>或是<ol>中
          <ul type="square">
	<li>内容1</li>
	<li>内容2</li>
	<li>内容3</li>
	<li>内容4</li>
</.ul>
<!--type设置列表前图表的样式-->
<!--可以用css技术更改图标: style="list-style: url(img/act.jpg);"-->
<ol type="A" start="2">
	<li>内容1</li>
	<li>内容2</li>
	<li>内容3</li>
	<li>内容4</li>
</ol>
<!--type: 可以设置列表标号( 1; a; A; i; I)-->
<!--start: 可以设置起始标号-->
      • <br>: 换行符
      • <hr>: 水平线
      • <table>: 表格标签，用于创建一个表格
        • <tr>: 表格行标签 用于定义表格中的一行
        • <td>: 表格单元格标签 用于定义表格中的一个单元格
        • <th>: 表格头单元格标签 用于定义表格中的一个表头单元格
          <table border="1px" cellspacing="0px">
	<tr>
		<th>班级</th>
		<th>姓名</th>
		<th>学号</th>
	</tr>
	<tr>
		<td rowspan="2">一班</td>
		<td>大牛</td>
		<td>23</td>
	</tr>
	<tr>
		<td>大壮</td>
		<td>31</td>
	</tr>
</table>
<!--border: 设置边框大小; cellspacing: 设置单元格和边框之间的间隙-->
<!--rowspan: 行合并: colspan: 列合并-->
      • <form>: 表单标签，用于创建一个表单
        • <input>: 输入框标签，用于在表单中创建一个输入框
        • <textarea>: 文本框标签，同于在表单中创建一个文本输入框
        • <button>: 按钮标签，用于在表单中创建一个按钮
        • <label>: 标签标签，用于为表单中的控件定义标签
          <form action="url" method="get|post" name="myform">
	用户名：<input type="text" name="username" />
	<br />
	密码： <input type="password" name="pwd" />
	<br />
	<input type="submit" />
	<input type="reset" />
</form>
<!--name: 表单提交时的名称; action: 提交到的地址; method: 提交方式，默认为get-->
<!--get方式提交数据可见，不安全，数据长度有限，效率高-->
<!--post方式提交数据不可见，安全，数据长度没限制，效率低-->
<!--常见的用户名密码登录，text type用于用户名输入，password type 用于密码输入，submit用于提交表单，reset则是重置-->
      • <pre>: 用于保留文本格式，不进行自动换行或者空格压缩等处理
    • 一些用于显示特殊文本内容的标签，为页面提供更多的排版和显示效果
      • <code>: 用于显示计算机代码或者编程语言中的文本，文本会按照等宽字体显示
      • <sup>和<sub>: 分别显示上标和下标，通常用于数学和化学等领域
      • <blockquote>: 用于显示长篇引用，通常会缩进并显示为斜体，可通过CSS样式设置自定义
      • <cite>: 用于定义书籍、文章等的标题，可以与<blockquote>标签配合使用
      • <abbr>: 用于定义缩写，对包裹的文本进行缩写
      • <del>和<ins>: 用于表示删除和插入的文本
      • <small>: 用于显示小号字体
      • <strong>: 用于表示重要的文本内容，加粗
      • <em>: 用于表示强调的文本内容，斜体
      • <time>: 用于表示日期和时间
      • <var>: 用于表示变量或数学符号
      • <figure>和<figcaption>: 分别用于显示图像和图像的标题
      • <progress>: 用于表示进度条
      • <meter>: 用于表示度量值
      • <mark>: 用于高亮显示文本
      • <kbd>: 用于显示键盘输入
  • 其他的标签
    https://www.w3schools.com/tags/tag_html.asp 英文
    https://www.w3schools.com.cn/tags/index.asp 中文
  • 实体字符
    • 常用
      显示结果描述实体名称实体编号
      空格&nbsp;&#160;
      <小于号&lt;&#60;
      >大于号&gt;&#62;
      &和号&amp;&#38;
      "双引号&quot;&#34;
      ’单引号&apos;(IE不支持)&#39;
    • 其他实体字符包含各种符号、特殊字符、希腊字母、数学符号等
    • 实体字符必须使用正确的实体名称或实体编号才能被正确解析和显示
Ashiu
关注
专栏目录
HTML笔记整理（个人笔记）
w3535222的博客
03-07 3784
个人笔记
HTML笔记（精简）
weixin_46160720的博客
03-08 1593
html 笔记 vscode 前端三大件
html笔记（完整版）
kaluomeng的博客
06-07 3908
标记 类型 译名或意义 作 用 备注 文件标记 ● 文件声明 让浏览器知道这是HTML文件 ● 开头 提供文件整体信息 ● 标题 定义文件标题，将显示于窗口标题 ● 本文 设计文件格式及内文所在 段落标记 ○ 说明标记 为文件加上说明，但不被显示 ○ 段落标记 为文字、图片、表格等之间留一空白行 ○ 换行标记 令文字、图片、表格等显示于下一行 ○ 水平线 插入一条水平线 ● 居中 令文字、图片、表格等显示...
HTML 笔记.zip
02-06
这个“HTML笔记.zip”文件显然包含了关于HTML的学习资料，可能包括了基础概念、语法、元素、属性、标签等内容，帮助初学者或进阶者巩固和理解HTML的核心知识。 在HTML中，我们通过一系列的标签来构建网页结构。例如...
HTML笔记传智讲师视频笔记适合初学者
04-16
"HTML笔记传智讲师视频笔记适合初学者"这个标题暗示了这是一份针对初学者的教程资料，可能包含了从基础到进阶的HTML知识，通过传智讲师的教学方式来讲解。 描述中的"html学习笔记"表明这是关于HTML学习的过程记录，...
HTML笔记.pdf
07-14
"HTML笔记.pdf" HTML笔记.pdf是一个详细的HTML笔记，涵盖了HTML的基础知识、标签、属性、事件、表单、超链接、图像、表格、列表等内容。下面是从文件中提取的相关知识点： 1. HTML基础知识： * DOCTYPE html是...
HTML笔记.txt
02-25
自己总结的html笔记标签 非常适合初学者参考大牛复习 每个标签都标注了用途 需要的可以下载。
HTML笔记(完整版).md
08-14
该笔记适合0基础学员学习，希望对各位学者有所帮助！
HTML的块级元素与行内元素
m0_65178842的博客
09-06 594
块级元素通常会在新的一行开始，并且占据整个行的宽度。它们可以包含其他块级元素或行内元素。
HTML 列表
qq_40107571的博客
09-06 464
HTML 列表
HTML、CSS实现树状图
p_s_p的博客
09-09 491
【代码】HTML、CSS实现树状图。
零基础上手WebGIS+智慧校园实例（长期更新#1）【html by js】
Asuna666w的博客
09-06 547
明天马上更新WebGIS的 1. 开发准备，2. 地图显示，3. 地图参数，4. 实时路况，5. 地图孔件6. 地图事件，7. 基于经纬度绘制点，8. 交互式绘制点，9， 实战作业-灵活的点标注之后代码+资料全部发到github里，希望大家能关注一下咱的Github。
【HTML】Html标签
最新发布
千里之行，始于足下
09-12 869
文本标签、表格标签、表单标签、列表标签、媒体标签、特殊字符、转义字符
使用HTML
nice66660的博客
09-09 645
a>
零基础上手WebGIS+智慧校园实例（长期更新#2）【html by js】
Asuna666w的博客
09-07 1469
等下再更新一下1. WebGIS矢量图形的绘制（超级详细！！），2. WebGIS计算距离， 以及智慧校园实例 with 3个例子！！！！，尽情期待！！！之后代码+资料全部发到github里，希望大家能关注一下咱的Github进行WebGIS开发时，引入API是一个关键步骤，它允许开发者将地图服务和功能集成到自己的Web应用中。
HTML生日蛋糕
兔子王
09-07 2206
用HTML语言实现生日蛋糕效果的完整代码。
Flex布局最后一行元素的对齐的解决方案
weixin_42576837的博客
09-10 1146
如果最后一行剩一个元素，默认会左对齐，如果剩4个元素，那就是正好两端对齐，所以我们需要考虑的就是剩2个或者3个的情况，但是为了统一，直接放置4个在末尾，高度为0，也不会占据高度，只是会额外的创建。宽度：由于每一个item元素没有设置margin,item宽度为24%，一行4个，就是96%，还剩4%的空白空间，这4%的空白空间平均分成了3分，才有了下面的间距。假如一行显示4个元素，最后一行在不够4个元素的时候，按照两端对齐显示，效果显得不好，我们希望假如最后一行不足4个元素的时候，默认从左向右排列。
张孝祥主讲经典HTML笔记：从基础到高级
本文档是一份由张孝祥主讲的HTML笔记，内容涵盖了JavaScript网页编程的基础课程，包括HTML语言的基础、高级概念、CSS、JavaScript语法、DOM对象模型编程以及脚本编程技术汇总。此外，还涉及到正则表达式的应用。文档...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值