html基础

最新推荐文章于 2025-05-30 22:33:54 发布

Ministar-jie

最新推荐文章于 2025-05-30 22:33:54 发布

阅读量760

点赞数 5

分类专栏： python爬虫 web开发文章标签： html html5

本文链接：https://blog.youkuaiyun.com/weixin_49432344/article/details/116429055

版权

python爬虫同时被 2 个专栏收录

5 篇文章

订阅专栏

web开发

1 篇文章

订阅专栏

这篇博客详细介绍了HTML的基础知识，包括网页和HTML的定义、HTML标签的使用，如标题、段落、图像、表格等。还展示了如何创建基本的HTML页面，并解释了重要的HTML元素，如`<head>`、`<title>`、`<body>`、`<img>`、`<table>`等。此外，提到了HTML文档的结构和一些关键属性，如`alt`、`title`、`width`、`height`等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML基础

1.1 什么是网页？

网站：是指因特网上根据一定的规则，使用HTML等制作的用于展示特定内容相关网页的集合。
网页：是网站中的一个页面，通常是HTML格式的文件，它需要一个浏览器来打开。网页是构成网站的基本元素，它由图片、链接、文字、声音、视频等元素构成，我们通常看到的网页常见是以.html结尾，因此又称为html文件。

1.2 什么是HTML

1.2.1 HTML指的是超文本标记语言（Hyper Text Markup language），它是用来描述网页的一种语言，但是它不是一种编程语言，而是一种标记语言。
1.2.2 标记语言是一套标记标签
1.2.3 超文本，有两层含义：
（1）它可以加入图片、声音、动画、多媒体等内容（超越了文本限制）
（2）它还可以从个文件跳转到另一个文件，与世界各地主机文件建立连接。（超级链接文本）

标签名	定义	说明
HTML标签	HTML标签	网页中最大的标签,称为根标签
head标签	文档的标题	在head标签中必须设置的标签是title标签
title标签	文档的标题	让页面拥有一个属于自己的网页标题
body标签	文档的主题	元素包含文档的所有内容

1.3 创建第一个页面

在这里插入图片描述

1.4 利用pycharm新建一个html文件

1.4.1 <!DOCTYPE html>:文档类型声明,作用就是告诉浏览器使用哪种HTML版本来显示网页,当前这句话是使用H5版本,要注意的是它不属于html标签里面的一部分,只是声明整个文档的类型
1.4.2 <html lang="en">:lang是languige的缩写,用来定义当前文档显示的语言.zh-CN为中文
1.4.3 <meta charset="UTF-8">:charset(character set)字符集和,以便计算机能够识别和存储各种文字.charset常用的值有:GB2312,BIG5,GBK,和UTF-8
1.5 标题标签:h,head的缩写
<h1> 文章的大标题标签 ，具有默认的字体大小、加粗、上下外边距 </h1>
    <h2> 文章的二级标题标签 </h2>
    <h3> 文章的三级标题标签 </h3>
    <h4> 文章的四级标题标签 </h4>
    <h5> 文章的五级标题标签 </h5>
    <h6> 文章的六级标题标签 </h6>
1.6 段落标签 p,paragraph
<p> 段落标签，包含大量的文字内容 </p>
1.7 span标签
<span> 文字标签，放置少量的文字内容 </span>
1.8 strong标签,加标签
<strong> 粗体文字，具有强调作用，放置少量的文字内容 </strong>
1.9 b:加粗标签
<b> 粗体文字，放置少量内容，无强调 </b>
1.10 u:下划线标签
<u> 下划线文字， </u>
1.11 i:斜体标签
<i> 斜体文字 </i>
1.12 删除线标签
<del> 删除线 </del>
1.13 <br /> 换行标签
人生苦短<br />我爱ptyhon
1.14 div和span标签
<div> 和 <span>是没有语意的,他们是一个盒子用来装饰内容的
Div:是division的缩写,表示分割分区
Span:意为跨度,跨距
<div>我是一个div标签,我一个人单独占一行</div>123
<div>我是一个div标签,我一个人单独占一行</div>
<span>百度</span>
<span>新浪</span>
<span>搜狐 </span>
1.15 图像标签,是一个单标签Img:image的缩写
<img src=”图像URL”>
（1）属性1:src:指定图片
<img src="地球.jpg">
（2）属性2,alt替换文本,图像显示不出来的时候显示文本
<h4>alt:替换文本,图像显示不出来的时候显示文本</h4>
<img src="地球.jpg" alt="这是地球图片">
（3）属性3,title,提示文本将鼠标放图像上,提示文字
 <h4>title:提示文本,将鼠标放图像上,提示文字</h4>
 <img src="地球.jpg" alt="这是地球图片" title="地球">
（4）属性4,witdth:像素,设定图像的宽度
<h4>属性4,witdth:像素,设定图像的宽度</h4>
<img src="地球.jpg" alt="这是地球图片" title="地球" width="500">
（5）属性5,height:像素,设定图像的高度
    <h4>属性5,height:像素,设定图像的高度</h4>
    <img src="地球.jpg" alt="这是地球图片" title="地球" width="500" height="600">
（6）属性6,border:像素,设定图像的边框粗细
<h4>属性6,border:像素,设定图像的边框粗细</h4>
<img src="地球.jpg" alt="这是地球图片" title="地球" width="500" height="600" border="15">
1.16 表格标签<table> </table>
<tr></tr>:用于定义表格中的行,必须嵌套在<table> </table>内
<td></td>:用于定义表格中的单元格,必须嵌套在<tr></tr>内
<th></th>:表头单元格,表头单元格里面的内容会加粗居中显示

1.16 table标签

table标签相关属性

属性	说明
width	表格的宽度
height	表格的高度
align	表格的对齐方式
border	表格的边框
bordercolor	边框的颜色
cellspaning	单元格之间的距离
csllpadding	单元格与内容之间的距离
bgcolor	表格的背景颜色
background	表格的背景图片

<body>
    <h1> 文章的大标题标签 ，具有默认的字体大小、加粗、上下外边距 </h1>
    <h2> 文章的二级标题标签 </h2>
    <h3> 文章的三级标题标签 </h3>
    <h4> 文章的四级标题标签 </h4>
    <h5> 文章的五级标题标签 </h5>
    <h6> 文章的六级标题标签 </h6>
    <div>我是一个div标签,我一个人单独占一行</div>123
    <div>我是一个div标签,我一个人单独占一行</div>
    <span>百度</span>
    <span>新浪</span>
    <span>搜狐 </span>
    <img src="地球.jpg">
    <h4>alt:替换文本,图像显示不出来的时候显示文本</h4>
    <img src="地球.jpg" alt="这是地球图片">
    <h4>title:提示文本,将鼠标放图像上,提示文字</h4>
    <img src="地球.jpg" alt="这是地球图片" title="地球">
    <h4>属性4,witdth:像素,设定图像的宽度</h4>
    <img src="地球.jpg" alt="这是地球图片" title="地球" width="500">
    <h4>属性5,height:像素,设定图像的高度</h4>
    <img src="地球.jpg" alt="这是地球图片" title="地球" width="500" height="600">
    <h4>属性6,border:像素,设定图像的边框粗细</h4>
    <img src="地球.jpg" alt="这是地球图片" title="地球" width="500" height="600" border="15">
    <table>
        <tr><th>姓名</th><th>性别</th><th>年龄</th></tr>
        <tr><td>刘德华</td><td>男</td><td>50</td></tr>
        <tr><td>郭富城</td><td>男</td><td>51</td></tr>
        <tr><td>张学友</td><td>男</td><td>52</td></tr>
        <tr><td>黎明</td><td>男</td><td>53</td></tr>
    </table>

</body>

HTML其他基础

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title> h5的常用标签 </title>
</head>
<body>
    <!-- 
        h5中，标签的结构分两种：标签和单标签(meta, img, link)

     -->
    <!-- a:超链接标签，默认鼠标放置在文字上时，指针显示手型，说明内容可以点击，点击时会跳转至其他页面 -->
    <a href="http://www.baidu.com">
        百度一下
    </a>

    <h1> 文章的大标题标签 ，具有默认的字体大小、加粗、上下外边距 </h1>
    <h2> 文章的二级标题标签 </h2>
    <h3> 文章的三级标题标签 </h3>
    <h4> 文章的四级标题标签 </h4>
    <h5> 文章的五级标题标签 </h5>
    <h6> 文章的六级标题标签 </h6>
    <p> 段落标签，包含大量的文字内容 </p>
    <span> 文字标签，放置少量的文字内容 </span>
    <strong> 粗体文字，具有强调作用，放置少量的文字内容 </strong>
    <b> 粗体文字，放置少量内容，无强调 </b>
    <u> 下划线文字， </u>
    <i> 斜体文字 </i>
    <del> 删除线 </del>
    <img src="https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/static/protocol/https/home/img/qrcode/zbios_efde696.png" alt="">

    <div>
        没有任何特殊含义的容器标签，多用于做布局
    </div>
    <!-- 

        ul：无序列表的容器标签，其子元素只能是li
        li:每一个列表项标签
     -->
    <ul>
        <li> 列表项1 </li>
        <li> 列表项2 </li>
        <li> 列表项3 </li>
    </ul>

    <header>
        网页的头部标签，通常只出现一次
    </header>
    <footer>
        网页的底部标签，通常只出现一次
    </footer>
    <main>
        网页的主体标签，通常只出现一次
    </main>
    <nav>
        网页的主导航标签，通常出现一次
    </nav>
    <aside>
        网页的侧边栏标签
    </aside>

    <article>
        文章的内容容器标签
    </article>
    <section>
        文章的一部分或者一小节
    </section>

</body>
</html>