HTML入门教学（一）；详细教学！！！包会！！！

最新推荐文章于 2024-05-14 20:08:50 发布

java缝合怪

最新推荐文章于 2024-05-14 20:08:50 发布

阅读量235

点赞数

分类专栏： HTML 文章标签： html java

本文链接：https://blog.csdn.net/weixin_53262248/article/details/119860022

版权

HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

THML详细教学！包学会铁铁们！！！
昨天呢有点事情断更了，抱歉了铁铁们；
在这里插入图片描述

今天我们来讲一讲HTML入门吧！
这个很简单的！！！
所以赶快认真学习吧铁铁们！！！
在这里插入图片描述

好啦下面直接进入主题！！！

HTTP 概述

超文本传输协议（HTTP，HyperText Transfer Protocol)是互联网上应用最为广泛的一种网络协议。所有的 WWW 文件都必须遵守这个标准。设计 HTTP 最初的目的是为了提供一种发布和接收 HTML 页面的方法。1960 年美国人 Ted Nelson 构思了一种通过计算机处理文本信息的方法，并称之为超文本（Hypertext）,这成为了 HTTP 超文本传输协议标准架构的发展根基。Ted Nelson 组织协调万维网协会（World Wide Web Consortium）和互联网工程工作小组（Internet Engineering Task Force ）共同合作研究，最终发布了一系列的 RFC，其中著名的 RFC 2616 定义了 HTTP 1.1。
常见状态码
200 ：成功。
400 ：客户端请求有语法错误，服务器端不能理解。
401 ：该请求可能未经过授权。
403 ：服务器端收到该请求，但是拒绝为它提供服务，可能是没有权限等等。
404 ：该资源没找到。
500 ：服务器端发生了一个不可预知的错误。
503 ：服务器端当前还不能处理客户端的这个请求，可能过段时间之后才能恢复正常。

HTML 基本网页结构

<!DOCTYPE html>
<html>
  <head>
    <title>HTML 简介</title>
  </head>
  <body></body>
</html>

<!DOCTYPE html> 是我们的文档声明头。他告诉了浏览器，本文档处理的是 HTML 文档。html 标签即根元素，此处表示文档的开始。head 标签是网页的头部，设置网页的相关信息。title 标签设置网页标题。body 标签定义文档的主体，也就是我们的主要内容。
HTML 注释

<!DOCTYPE html>
<html>
  <body>
    <!--这是一段注释。注释不会在浏览器中显示。-->

    <p>这是一段普通的段落。</p>
  </body>
</html>

注意：在开始标签中有一个惊叹号，但是结束标签中没有。浏览器不会显示注释，但是能够帮助记录。

HTML 标签

一、双标签（双标记）
是指由开始和结束两个标记符组成的标记

<html></html>
<head></head>
<title></title>
<body></body>
<h1></h1>
<p></p>
<div></div>
<span></span>
<a></a>
<ul></ul>

二、单标签（单标记）
是指用一个标记符号即可完整地描述某个功能的标记

<br />
<!--换行-->
<hr />
<!--水平分隔线-->
<meta />
<img />

三、标签的关系
1.嵌套关系

<head>
  <title> </title>
</head>

2.并列关系

<head></head>
<body></body>

HTML常用标签

这个在我上期文章资料中有的，铁铁们可以去直接向下载的~（免费的啦！）

HTML 元素

HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。
例子：

<p>Love you！！！</p>

注意：这个元素定义了 HTML 文档中的一个段落。这个元素拥有一个开始标签 <p>，以及一个结束标签 </p>

容器标签（div 和 span）

div：
可将网页页面分割成不同的独立部分，通常用于定义文档中的区域或节。该标签是一个块级元素，浏览器会自动在 <div> 和 </div> 所标记的区域前后自动放置一个换行符。
span：
通常作为文本的容器，它没有特定的含义和样式，只有与 CSS 同时使用才可以为指定文本设置样式属性。该标签是一个内联元素，他与块级元素相反，内联元素不会自动在前后自动放置换行符，因此内联元素会默认显示在同一行。
下面我们举个例子：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <style>
      #box {
        width: 200px;
        height: 200px;
        background: red;
      }
    </style>
  </head>
  <body>
    <div id="box">这是div标签，自动换行</div>
    <input type="text" /><span>这是span标签，不自动换行</span>
  </body>
</html>

运行效果如下：
在这里插入图片描述

HTML 列表

HTML 列表分为：有序列表（ol），无序列表（ul）以及自定义列表（dl）。

<p>无序列表</p>
<ul>
  <li>列表项1</li>
  <li>列表项2</li>
</ul>

<p>有序列表</p>
<ol>
  <li>列表项1</li>
  <li>列表项2</li>
</ol>

运行效果如下：
在这里插入图片描述

列表的 type 属性

一、<ul> 标签的 type 属性：

disc（默认）：实心圆；
circle ：空心圆；
square ：小方块；
二、<ol> 标签的 type 属性：
1（默认）：数字表示（1，2，3…)；
A ：大写字母表示（A,B,C…)；
a ：小写字母表示（a,b,c…)；
I ；大写罗马数字表示(I,II,III…)；
i ：小写罗马数字表示(i,ii,iii…)；
那么我们来看这个例子：

<p>无序列表</p>
<ul type="circle">
  <li>空心圆列表项1</li>
  <li>空心圆列表项2</li>
</ul>

<p>有序列表</p>
<ol type="A">
  <li>列表项1</li>
  <li>列表项2</li>
</ol>

运行效果：
在这里插入图片描述
三、自定义列表（dl）
自定义列表不仅仅是一列项目，而是项目及其注释的组合。自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。自定义列表的列表项前没有任何项目符号。
语法格式：

<dl>
  <dt>名词1</dt>
  <dd>名词1解释1</dd>
  ...
  <dt>名词2</dt>
  <dd>名词2解释1</dd>
  ...
</dl>

——————————————————————手动分割———————————————————
好啦铁铁们到这里今天的讲解就结束了；
要是觉得不错就记得关注哈！铁铁们！
明天还会继续更新HTML入门教学的~
在这里插入图片描述

好啦明天见咯！！！

java缝合怪

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
1
评论
HTML入门教学（一）；详细教学！！！包会！！！

HTTP 概述超文本传输协议（HTTP，HyperText Transfer Protocol)是互联网上应用最为广泛的一种网络协议。所有的 WWW 文件都必须遵守这个标准。设计 HTTP 最初的目的是为了提供一种发布和接收 HTML 页面的方法。1960 年美国人 Ted Nelson 构思了一种通过计算机处理文本信息的方法，并称之为超文本（Hypertext）,这成为了 HTTP 超文本传输协议标准架构的发展根基。Ted Nelson 组织协调万维网协会（World Wide Web Consorti
复制链接

扫一扫