HTML基础(一)

最新推荐文章于 2024-05-09 11:16:38 发布
最新推荐文章于 2024-05-09 11:16:38 发布
阅读量223 收藏
点赞数
分类专栏： web前端 文章标签： 前端 编程
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37289115/article/details/88364242
版权

一、HTML

1. 什么是HTML

HTML是用来描述网页的一种语言。
HTML指的是超文本标记语言 (Hyper Text Markup Language)
HTML不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML使用标记标签来描述网页

2. HTML 标签(元素)

HTML标记标签通常被称为 HTML 标签 (HTML tag)。
HTML标签是由尖括号包围的关键词，比如<html>
HTML标签通常是成对出现的，比如<b>和</b>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签

3. HTML 文档 = 网页

HTML文档描述网页
HTML文档包含 HTML 标签和纯文本
HTML文档也被称为网页
Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。
浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容

4.HTML的基本结构

HTML基本结构

<!DOCTYPE html>             <!--文档类型-->
<html lang="en">            <!--根标签-->
<head>                      <!--网页头部-->
    <meta charset="UTF-8">  <!--国际编码 UTF-8-->
    <title>Title</title>    <!--网页标题-->
</head>                     
<body>                      <!--网页的主体 可视化部分-->

</body>
</html>

二、常用标签

1. 标题标签:h

一般用在文章的标题，有h1~h6

<!--h1在一个页面上出现一次 h2-h6自己分配-->
<!--敲h1 按tab可以自动补全-->
<h1>我是h1标签</h1>
<h2>我是h2标签</h2>
<h3>我是h3标签</h3>
<h4>我是h4标签</h4>
<h5>我是h5标签</h5>
<h6>我是h6标签</h6>
<h7>hello world</h7>
<h8>hello world</h8>

我是h1标签

我是h2标签

我是h3标签

我是h4标签
我是h5标签
我是h6标签
hello world hello world

标题标签只有h1-h6，没有其他的，这些超标的就当普通文字对待


我是上面的a标签

2. 段落标签:p

会把 HTML文档 分割成若干段落

<p>&emsp;&emsp;和小朋友喝茶谈女人。 “我们女人什么时候开始老，你看得出吗？”小朋友问。 “看得出。”我说。 “这么厉害？说来听听。” “当她们后颈上的毛脱光了，就是开始老的现象。”我说。 “哇，这也给你看出！”小朋友说。 ...</p>

<p>&emsp;&emsp;和小朋友喝茶谈女人。 “我们女人什么时候开始老，你看得出吗？”小朋友问。 “看得出。”我说。 “这么厉害？说来听听。” “当她们后颈上的毛脱光了，就是开始老的现象。”我说。 “哇，这也给你看出！”小朋友说。 ...</p>

  和小朋友喝茶谈女人。 “我们女人什么时候开始老，你看得出吗？”小朋友问。 “看得出。”我说。 “这么厉害？说来听听。” “当她们后颈上的毛脱光了，就是开始老的现象。”我说。 “哇，这也给你看出！”小朋友说。 ...

3. 粗体标签:b,strong

将文字加粗

    <!--b标签 只是物理加粗   strong 不仅加粗 还利于seo搜索-->
    <b>我是b标签加粗</b>
    <strong>我是strong加粗</strong>

我是b标签加粗
我是strong加粗

4. 斜体标签:i,em

将文字倾斜

<!--i标签 只是斜体   em 不仅斜体 还利于seo搜索-->
    <i>我是i斜体标签</i>
    <em>我是em斜体标签</em>

我是i斜体标签
我是em斜体标签

5. 标签嵌套

<b><i>我是加粗的斜体标签</i></b><br>
    <i><b>我是加粗的斜体标签</b></i>
    <!--br 换行标签   hr水平线标签-->

我是加粗的斜体标签


我是加粗的斜体标签

我是加粗的斜体标签

6. 换行标签:br,hr

<br>和<hr>

7. 超链接标签:a

一般用于网页之间的跳转还能做锚点，进行跳转

<!--href 是a标签的标签属性 写路径，网址-->
<!--
      target属性：
          _self 当前页面打开  默认
          _blank 在新窗口打开
-->
<a href="http://www.baidu.com">在当前窗口打开百度</a>
<a href="http://www.baidu.com" target="_blank">在新标签页中打开百度</a>

在当前窗口打开百度
在新标签页中打开百度

    <!--标签之间的跳转-->
    <a href="#box">去上面的a标签</a>
    <a href="#box1">锚点</a>
    <a href="javascript:void(0);">死链接</a>
    <a href="#">回到顶部</a>
    <!--
        只有拥有name属性的a标签才有锚点
        其他标签可以通过id属性实现锚点
        一般不用id属性，因为id有唯一性
    -->

去上面的a标签
锚点
死链接
回到顶部

8. 图片标签:img

用于向页面插入图片

  1. 从网页抠图
    1. 右键-复制图片地址
    2. F12审查元素复制地址
  2. 从本地导入图片
    在同级下新建个img文件夹，把图片放在里面
网络路径
<img src="https://gss2.bdstatic.com/-fo3dSag_xI4khGkpoWK1HF6hhy/baike/s%3D220/sign=3707d191fa03738dda4a0b20831bb073/279759ee3d6d55fb3cfdd81761224f4a20a4ddcc.jpg" width="500" height="400" title="lalalal" alt="你的路径错了">
相对路径
<img src="img/01.jpg " alt="你的路径错了">
<img src="img/1.jpg" alt="你的路径错了" width="100" height="80" title="我是Python图标">
你的路径错了 你的路径错了 你的路径错了 - src 定义图片路径 相对、绝对 alt 图片描述，用于seo搜索 当图片路径错误的时候 会显示在页面上 - width 定义图片宽度 - height 定义图片高度 - title 鼠标划入 有提示 注：当width/height只给一个值的时候，另一个值等比例缩放，然后不给默认图片大小

9. 列表标签:ul>li

分为无序列表，有序列表和自定义列表

(1) 无序列表

ul>li{$}*4 tab键
>这个后面 跟的是子元素 *代表前面的元素几个

    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <ul type="circle">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <ul type="square">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
  • 1
  • 2
  • 3
  • 4

type属性讲解：

  • disc 默认 小黑圆点
  • circle 空心圆
  • square 小方框

(2) 有序列表

ol>li{$}*4

<ol type="A">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
</ol>
  1. 1
  2. 2
  3. 3
  4. 4
type属性:
  • 1 1 2 3 4 默认
  • a a b c d
  • A A B C D
  • I I II III IV
  • i i ii iii iv

(3) 自定义列表

<dl>
        <dt>前端</dt>
        <dd>html</dd>
        <dd>css</dd>
        <dd>js</dd>
    </dl>
前端
html
css
js

10. 行内(不自动换行)和块级(会自动换行)不同点

  1. 块级元素前后会自动换行
    行内元素前后不会换行
  2. 块级元素可以包含行内和块级
    行内元素包含文本和其它行内元素，不建议包含块级
  3. 块级元素可以给宽高度
    行内元素不能给宽高度
  4. 行内元素不能给上下外边距
    块级元素则都可以

11. 块级标签:div

块级标签：display: block;
块级标签

div{
            width: 100px;
            height: 25px;
            background: red;
            display: block;
        }
<div>第一个</div>
<div>第二个</div>
第一个
第二个
  • display:block;
  • 可以包含任何块和行内元素
  • 独占一行，支持设置宽高
  • 如果没有设置宽高，高度由内容撑开，宽度默认浏览器宽度
  • 没有内容，在网页上肉眼看不到东西，但是审查元素，宽度是浏览器宽度，高度0

12. 行内标签:span

行内标签：display: inline-block;
行内标签

span{
            width: 100px;
            height: 25px;
            background: yellowgreen;
            display: inline;
        }
<span>11111</span>
<span>2</span>

11111
2

  • display:inline;
  • 可以和其他行内元素位于同一行
  • 行内元素不要包块级元素
  • 不支持设置宽高
  • 内容撑开宽高

13. 行内块元素

div{
            width: 100px;
            height: 25px;
            background: red;
            /*display: block;*/
            display: inline-block;
        }
        span{
            width: 100px;
            height: 25px;
            background: yellowgreen;
            /*display: inline;*/
            display: inline-block;
        }
<div>第一个</div>
<div>第二个</div>
<span>11111</span>
<span>2</span>
  • display:inline-block;
  • 块级元素可以横排展示
  • 行内元素可以设置宽高
  • 元素既能设置宽高，也能排在一排

14. 隐藏标签

div{
            width: 100px;
            height: 25px;
            background: red;
            /*display: block;*/
            /*display: inline-block;*/
            display: none;
        }
        span{
            width: 100px;
            height: 25px;
            background: yellowgreen;
            /*display: inline;*/
            /*display: inline-block;*/
            display: none;
        }
<div>第二个</div>
<span>11111</span>
  • display:none
  • 隐藏元素,包括他的子标签，在页面中不占位置，等同于消失了
奋斗在阿尔卑斯的皮卡丘
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html5基础一
03-04
以后陆续上传html5资料，一共二十三章
HTML零基础入门教程（详细）
热门推荐
ZONGXP的博客
10-22 21万+
HTML 是用来描述网页的一种语言。HTML 是一种在 Web 上使用的通用标记语言。HTML 允许你格式化文本，添加图片，创建链接、输入表单、框架和表格等等，并可将之存为文本文件，浏览器即可读取和显示。 HTML 指的是超文本标记语言:HyperTextMarkupL...
HTML基础知识点
qq_40046544的博客
07-27 8187
网页是一个包含HTML标签的纯文本文件，它可以存放在世界某个角落的某一台计算机中，是万维网中的一页，是超文本标记语言格式。它通常是由图片、文字、链接、声音、视频等元素组成。通过网页浏览器访问。HTML指的是超文本标记语言（HyperTextMarkupLanguage），它是用来描述网页的一种语言。web标准也成为网页标准，它是由一系列标准组成，这些标准大部分由W3C负责定制，也有一些标准由其他标准组织制定。绝对路径指目录下的绝对位置，可以直接到达目标位置，通常从盘符开始的路径。例如D从。...
web前端开发（一）—HTML基础
mdxiaohu的博客
07-31 10万+
  目录 web前端简介 什么是HTML？ HTML标签 HTML基本结构 HTML 段落标签 HTML 换行标签 HTML标题 HTML 水平线 HTML注释 HTML 标签 HTML 列表标签 HTML表格 HTML超链接 HTML 图片 HTML表单 表单元素-文本、密码框 表单元素-多行文本框 表单元素-选择框 表单元素-下拉选择框 表单元素-按钮...
全网最全HTML基础
a1085653724的博客
04-20 4890
1.HTML结构 认识 HTML 标签 ，HTML 代码是由 "标签" 构成的。 形如: <body>hello</body> (1).标签名(body)放到<>中. (2).大部分标签成对出现,<body>为开始标签,</body>为结束标签. (3).少数标签只有开始标签, 称为 "单标签". (4).开始标签和结束标签之间, 写的是标签的内容.(hello everyone) (5).开始标签中可能会带有 "属性". id
HTML基础标签
weixin_45348240的博客
03-23 6031
一、HTML介绍 1、什么是HTML? HTML是一门语言，所有的网页都是用HTML这门语言编写出来的。HTML(HyperText Markup Language):超文本标记语言。 超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容。 标记语言：由标签构成的语言 HTML运行在浏览器上，HTML标签由浏览器来解析 HTML标签都是预定义好的。例如:使用< img>展示图片 2、W3C标准:网页主要由三部分组成 结构:HTML 表现:css 行为:
HTML基础练习题
weixin_50108821的博客
09-23 1万+
第一题 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>嘿嘿嘿</title> </head> <body> <table border="1" cellspacing="0" cellpadding="0"> <tr align="center">
头歌-HTML基础
somewon的博客
03-06 8814
四川师范大学 头歌 web应用开发
HTML基础之表单制作
TangJing_的博客
05-14 2万+
一、知识点 1、表单的作用： 信息的收集 数据的验证 在线考试 调查问卷 2、表单的构成 提示性文字：提示用户如何操作（一般由placeholder属性完成） 表单域：相当于一个容器，包含若干表单控件 表单控件：具体的功能项（按钮，下拉列表，输入框等） 3、表单域 <form action="远程服务器的URL(存放地址)" method="信息的提交方式" name="表单名"> 表单内容 </form> 4、表单控件 （1）input：输入框。都有val
html基础教程之HTML 标题
html基础教程
02-03 4437
HTML标题 在 HTML 文档中，标题很重要。 HTML 标题 标题（Heading）是通过 <h1> – <h6> 标签进行定义的. <h1> 定义最大的标题。 <h6> 定义最小的标题。 实例 <h1>这是一个标题。</h1> <h2>这是一个标题。</h2> <h3>这...
HTML基础——HTML
weixin_45651821的博客
08-10 8万+
一、基础语法 1. 什么HTML HTML（Hypertext Markup Language） - 超文本标记语言 标记语言 - 在不同的文本中加不同的标记让文本的意义和功能不同, 例如：markdown、html HTML大小不敏感： html == Html == HTML == hTMl (小写和大写功能一样) 2. 标签 - 就是标记， 标签是HTML的基本结构，不同的标签功能不一样 语法： 双标签(标准标签): <标签名 属性1=属性值1 属性2=属性值2 …>标签内容&lt
html基础教程
07-22
资源名称：html基础教程内容简介：HTML基础-第一讲HTML基础-第二讲HTML基础第三讲---字体HTML基础第四讲---图像HTML基础第五讲---控制表格及其表项的对齐方式HTML基础第六讲---表格HTML基础第七讲---框架HTML基础第...
html基础知识（一）
11-13
html基础知识
HTML基础知识点学习一
06-30
前端入门基础知识点,HTML知识点整理,用Typora写的
HTML基础 HTML的组成结构
09-28
HTML是网页主要的组成部分，基本上一个网页都是由HTML语言组成的，所以要学习网站怎样建设，必须从网页的基本语言学起。
【Web】CTFSHOW 中期测评刷题记录(1)
uuzeray的博客
05-02 1852
访问./cache/6a992d5529f459a44fee58c733255e86.php，命令执行拿flag。login.php是在./templates下的，而./flag.php与./templates均为web目录。注意到用./template/error.php中存在{{username}}，可以用其cache来写马。这时候重开下靶机再去读./templates/index.php，发现是给了提示的。访问./config/settings.php，命令执行拿到flag。
50个前端实战项目之04：隐藏的搜索小组件
前端开发博客
05-03 1119
大家好，我是宝哥。今天讲50个前端实战项目之04：隐藏的搜索小组件。源码下载地址https://github.com/bradtraversy/50projects50days/tree/master/hidden-search前端实战项目系列正在更新：04/5001：可展开卡片02：进度条03：旋转导航动画04：隐藏的搜索小组件项目介绍本项目演示了一个简洁实用的隐藏式搜索小部件。点击搜索按钮后，...
rbac权限和多级请假设计的流程演示和前端页面实现
最新发布
m0_54597180的博客
05-09 206
多级请假：7级及以下申请请假需要部门经理审核，若是请假时长超过72小时，则需要总经理审核，7级申请请将需要总经理审核，总经理请假自动审核通过。业务流程测试：王美美[高级研发工程师]（7级以下用户）登录并申请请假（超过了72小时需要部门经理和总经理申请）部门经理审核通过，需要总经理审核（8级）登录，首页消息通知审核通过。如果部门经理审核不通过，则总经理不需要处理也没有系统通知。王美美请假（查过72小时）,需要部门经理和总经理审核。部门经理（7级）登录消息通知审核消息并处理审核。王美美查看部门经理审核结果。
前端Vue 后端FastApi 跨域 CORS
weixin_44656422的博客
05-06 344
前端是localhost:3000,后端是localhost:8000 ，就是跨域了。
html基础手册下载
12-31
当然，如果你更喜欢实体书籍，可以考虑购买一本关于HTML基础的书籍，这样不仅可以得到手册的内容，还可以拥有实体书的收藏价值。总的来说，无论是在线资源还是实体书籍，都有很多途径可以获取到HTML基础手册的下载或...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值