首页 > 其他分享 >HTML基础

HTML基础

时间：2024-03-10 19:44:56浏览次数：26  
标签：行内 浏览器 这是 标记 标签 基础 HTML

【一】HTML简介

【1】什么是HTML

  • 超文本标记语言

  • 如果想要让浏览器能够渲染出写的页面，都必须遵从HTML语法

  • 我们浏览器看到的页面，内部其实都是HTML代码(所有的网站内部都是HTML代码)

  • HTML 是用来描述网页的一种语言。

  • HTML 指的是超文本标记语言: HyperText Markup Language

  • 超文本 就是网页上不光有文本，还有图片、音乐、视频等。

  • 标记语言是一套标记标签 (markup tag) div，span，font，i等标记

  • HTML 使用标记标签来描述网页

  • HTML 文档包含了HTML 标签及文本内容

  • HTML文档也叫做 web 页面，是以.html结尾的文件

  • HTML的主要目的：通过一系列的标记，来显示网页的不同效果、不同部分。

【2】最基础的页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>hellow zhangsan</h1>
<a href="https://www.baidu.com">click me!</a>
<img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.XJ-2yBSMNIAvjkHkW8-r9gHaHa?w=190&h=190&c=7&r=0&o=5&pid=1.7"
     alt="my wifi">
</body>
</html>

【二】HTML中的注释语法

  • 由于HTML代码非常杂乱无章且非常多，所以我们习惯性的用注释来划分区域方便后续的查找

【1】单行注释

<!-- 单行注释 -->

【2】多行注释

<!--
多行注释1
多行注释2
多行注释3
-->

【三】HTML的文档结构

【1】基础结构

<html>
    <head></head>:head内的标签不是给用户看的，而是定义一些配置，主要是给浏览器看的
    <body></body>:body内的标签，写什么浏览器就渲染什么，用户就能看到什么
</html>

注意：HTML代码是没有格式的，可以全部写在一行，只不过我们习惯了缩进来表示代码

【2】基本结构

  • HTML的文档结构通常遵循以下基本结构
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

<html>   //告诉浏览器后面的代码是html代码
<head>   //告诉浏览器当前网页如何显示，如编码，关键词
</head>
<body>  //告诉浏览器这里是主体部分，显示到网页中
</body>
</html>   //html结束


<!DOCTYPE html>：声明文档类型,告诉浏览器我的当前页面是那个版本的html
<html></html>：告诉浏览器，其中的代码用的什么格式；
<head></head>：告诉浏览器，这是网页的头部，包括了定义网页的一些内容的标签，如：标题、字符集等
<meta>：就是定义网页字符集、描述、关键词等内容的。
如：<meta charset=”utf8”>  字符集：功能：告诉浏览器，如何翻译汉字。
<meta name=”keywords” content=”html,css,javascript”>   关键词
http-equiv：模拟http协议的文件头原信息，主要目的是服务器向客户端返回时，用什么格式显示。
Content-type：内容类型。
Content：详细内容类型介绍。
Text/html：网页是text格式，html是文本中的小格式。
Charset：字符集，主要控制汉字如何显示。
Utf-8：多国语言编码，什么国家的语言都可以正常显示。
<title></title>：当前网页的标题，在网页中是必须的
定义浏览器工具栏中的标题
提供页面被添加到收藏夹时的标题
显示在搜索引擎结果中的页面标题 
<body></body>：网页的主体部分,网页中主要内容都要写到body里。

【四】HTML标签的分类

  • 根据标签的闭合情况，可以分为单标签和双标签

【1】双标签

  • 有头有尾
  • 内容写在中间
<h1></h1>
<a href==""></a>

【2】单标签(自闭标签)

  • 标签自己闭合，不需要另一半标签
<img/>

【五】标签

【1】head常用标签

<head>
    <!-- 默认编码格式 -->
    <!-- <meta charset="UTF-8">-->
    <meta charset="UTF-8" name="keywords" content="关键词">
    
    <!-- 控制页面上显示的小标题 -->
    <title>这是一个title标签</title>
    
    <!-- 这里面写CSS装饰代码 -->
    <style></style>
    
    <!-- 这里写JS代码，JavaScript -->
    <script></script>
    
    <!-- 用来引入外部CSS文件 -->
    <link rel="styleshhet" href="">
</head>

【2】Body常用标签

<body>
<!--标题标签-->
    <h1>【一】标题标签</h1>
    <h1>一级标签</h1>
    <h2>二级标签</h2>
    <h6>六级标题</h6>
    标题标签只能到 1 ~ 6 级，没有 7 级标题
    <h7>七级标题</h7>
    
    <h1>【二】文字相关的标签</h1>
    <h2>【1】加粗文字</h2>
    <p>这是没有加粗的文字</p>
    <b>这是加粗的文字</b>
    <h2>【2】字体倾斜</h2>
    <i>这是倾斜的文字</i>
    <h2>文字带下划线</h2>
    <u>这是带下划线的文字</u>
	<h2>【4】文字带删除线</h2>
	<s>这是带删除的文字</s>
    
    <h1>【三】段落标签</h1>
    <p>
        白日依山尽,
        黄河入海流。
    </p>
    <hr>
<h1>【四】换行标签</h1>
<p>
    白日依山尽,
    <br>
    黄河入海流。
</p>
<hr>
<h1>【五】水平分割线</h1>
<hr>

</body>

image-20240130194508511

【3】块级标签和行内标签

<h1>【一】块级标签</h1>
<h2>【1】介绍</h2>
<p>块级标签指的是占一行的HTML元素标签</p>
<h2>【2】常用的块级标签</h2>
<div>这是div标签</div>
<p>这是p标签</p><p>这是p标签</p>
<h6>这是级别标签</h6>
<ul>这是ul标签</ul>
<ol>这是ol标签</ol>
<table>这是table标签</table>

<h1>【二】行内标签</h1>
<h2>【1】什么是行内标签</h2>
<p>值在一行内现实的HTML元素,它们不会打断当前行并且只占据所需的内容宽度。</p>
<h2>【2】常见的行内标签</h2>
<span>这是span标签</span><span>这是span标签</span>
<br>
<p>行内标签两个标签在一行不会换行，块级标签两个标签在一行会自动换行</p>
<a href="https://juejin.cn/">这是一个超链接标签</a>
<br>
<strong>这是strong标签</strong>
<br>
<em>这是strong标签</em>
<br>
<img src="picture.jpg" alt="这是img标签">

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--标题标签-->
<h1>【一】块级标签</h1>
<h2>【1】介绍</h2>
<p>块级标签指的是占一行的HTML元素标签</p>
<h2>【2】常用的块级标签</h2>
<div>这是div标签</div>
<p>这是p标签</p><p>这是p标签</p>
<h6>这是级别标签</h6>
<ul>这是ul标签</ul>
<ol>这是ol标签</ol>
<table>这是table标签</table>

<h1>【二】行内标签</h1>
<h2>【1】什么是行内标签</h2>
<p>值在一行内现实的HTML元素,它们不会打断当前行并且只占据所需的内容宽度。</p>
<h2>【2】常见的行内标签</h2>
<span>这是span标签</span><span>这是span标签</span>
<br>
<p>行内标签两个标签在一行不会换行，块级标签两个标签在一行会自动换行</p>
<a href="https://juejin.cn/">这是一个超链接标签</a>
<br>
<strong>这是strong标签</strong>
<br>
<em>这是strong标签</em>
<br>
<img src="picture.jpg" alt="这是img标签">

</body>
</html>

image-20240130200932962

  • 块级标签可以修改长度，行内标签不可以，修改了也不会发生变化
  • 块级标签内部可以嵌套任意的块级标签和行内标签
    • 但是 p 标签虽然是块级标签，但是他只能嵌套行内标签不能嵌套块级标签
    • 如果套用这个，浏览器也会帮助处理，有报错，用户也感觉不到
  • 小结
    • 只要是块级标签都可以嵌套任意块级标签和行内标签(P标签除外)
  • 行内标签不能嵌套块级标签 可以嵌套行内标签
- ## 文本修饰标记

l <br/> ：换行，在需要换行的标记后面添加br标记就可以了

l <hr/>：水平线

v hr常用的属性：

Size：粗细   值：1-100

Color：颜色      值：颜色

Width：宽度     值：数值(固定)或百分比(根据浏览器的窗口大小自动调整)

百分比一般用于响应式网站的开发

l <h1>------<h6>标题标记：双标记，自动换行和加粗

l <p></p>：段落标记

l <pre></pre>：预排版标记

- ## 排版标记

l <br/> ：换行，在需要换行的标记后面添加br标记就可以了

l <hr/>：水平线

v hr常用的属性：

Size：粗细   值：1-100

Color：颜色      值：颜色

Width：宽度     值：数值(固定)或百分比(根据浏览器的窗口大小自动调整)

百分比一般用于响应式网站的开发

l <h1>------<h6>标题标记：双标记，自动换行和加粗

l <p></p>：段落标记

l <pre></pre>：预排版标记

【六】标签的两个重要属性

<div id="" class="">
    <p>id属性:相当于你在整个页面上的唯一标识</p>
    <p>class属性，可以放很多个样式或者是装饰</p>
</div>

【七】列表标签

<h1>【一】无序列表</h1>
<ul>
    <li>这是li标签</li>
    <li>这是li标签</li>
    <li>这是li标签</li>
    <li>这是li标签</li>
    <li>这是li标签</li>
    <li>这是li标签</li>
</ul>

<h1>【二】有序列表</h1>
<ol>
    <li>这是li标签</li>
    <li>这是li标签</li>
    <li>这是li标签</li>
    <li>这是li标签</li>
    <li>这是li标签</li>
    <li>这是li标签</li>
</ol>

<h1>【三】标题列表</h1>
<dl>
    <dt>标题</dt>
    <dd>内容</dd>
    <dt>标题</dt>
    <dd>内容</dd>
    <dt>标题</dt>
    <dd>内容</dd>
    <dt>标题</dt>
    <dd>内容</dd>
</dl>

image-20240130201937240

【八】特殊符号

【1】空格 

&nbsp;

【2】大于号>

&gt;

【3】小于号<

&lt;

【4】&符&

&amp;

【5】￥符¥

&yen;

【6】版权©

&copy;

【7】商标®

&reg;

【小结】

  • 特殊符号是指在文本中使用的一些非常规字符，这些字符通常不直接出现在键盘上，需要通过特定的键盘组合或者字符实体来输入。以下是一些常见的特殊符号及其对应的表示方法：
    • 版权符号：©，表示方法为 © 或者 ©。
    • 注册商标符号：®，表示方法为 ® 或者 ®。
    • 商标符号：™，表示方法为 ™ 或者 ™。
    • 惊叹号：！，直接输入 "!" 即可。
    • 问号：？，直接输入 "?" 即可。
    • 减号：-，直接输入 "-" 即可。
    • 加号：+，直接输入 "+" 即可。
    • 百分号：%，直接输入 "%" 即可。
    • 等于号：=，直接输入 "=" 即可。
    • 乘号：×，表示方法为 × 或者 ×。
    • 除号：÷，表示方法为 ÷ 或者 ÷。
    • 分号：；，直接输入 ";" 即可。
    • 冒号：：，直接输入 ":" 即可。
    • 单引号：'，直接输入 "'" 即可。
    • 双引号："，直接输入 """ 即可。

【九】常用标签

【1】div标签

  • 它是最常见的HTML容器标签，用于将文档分隔成独立的区块。
  • Div标签可以用来包裹其他标签，通过设置样式来控制其中内容的布局和外观。
  • 它没有具体的语义含义，常用于定义页面的整体结构或划分不同的内容区域。

【2】span标签

  • 它是一个内联元素，主要用于对文本或一小段文本进行样式上的控制。
  • Span标签通常用于对特定部分进行样式修饰或添加特殊效果
    • 例如修改文字颜色、加粗、斜体等，或者配合CSS实现一些交互效果。
  • 与Div标签不同，Span标签没有具体的语义意义，更多地用于样式上的调整。
  • 在构造初期最常使用，页面的布局一般先用div和span占位后再去调整样式，尤其是div使用最为频繁
  • 可以把div标签看成一块区域
    • 也就意味着div标签来提前规划所有的区域。之后再向该区域内填写内容即可
  • 普通的文本先用span占位
    • 然后再去装饰页面

【3】img标签

  • 图片标签
<img src="" alt="" title="" height="" width="">
  • src
    • 存放图片的路径(可以是本地也可以是网页链接)
  • alt
    • 当图片加载不成功时，加载出的图片描述性信息
  • title
    • 当鼠标悬浮在图片上面之后，自动展示图片信息
  • height/width
    • 高度和宽度
    • 当你在调整其中一个参数时，另一个参数也会等比例缩放
    • 当在调整两个参数而不考虑比例时，就会造成图片的失真

【4】a标签

  • 链接标签
<a href="" target="_blank"></a>
<a href="" target="_self"></a>

  • href

    • 指定 url 用户点击该链接就会跳转到目标链接
      • 当 a 标签指定的网址从来没有被点击过，那么a标签的字体颜色就是蓝色
      • 当 a 标签指定的网址从来被点击过后，那么a标签的字体颜色就是紫色
    • 可以放其他标签的id值，点击即可跳转到对应的标签位置

  • target

    • _self
      • 默认 a 标签是在当前页面完成跳转
    • _blank
      • 跳转到新建的标签页

  • a标签的锚点功能

    • 比如点击一个文本标题，自动跳转到标题对应的区域
    <a href="" id="d1">顶部</a>
  <a href="" id="d2">中间</a>
  <a href="" id="d3">底部</a>

  <a href="#d1">回到顶部</a>
  <a href="#d2">回到中间</a>

【5】总结

  • Div标签用于对页面进行布局和结构划分
  • 而Span标签则更多地用于对文字或一小段文本进行样式控制。
  • 根据需要，可以通过设置不同的class或id来给这些标签添加样式，并使用CSS来对其进行进一步的控制和美化。

标签：行内,浏览器,这是,标记,标签,基础,HTML
From： https://www.cnblogs.com/Fredette/p/18064653

相关文章

  • 网络开发基础客户端001
    在unity中的代码   暂时看来就是 首先需要定义一个 Socket 来接收  然后我们 需要定义byte【】来接收数据 以及一个string显示  第一步就是连接  这是一个异步 如果不用异步就会有阻塞  所有在里面首先先定义我们的socket然后设置连接......
  • 网络开发基础服务端001
    再服务端上    同上一期 客户端一样 也是定义Socket 绑定端口ip 然后进行监听  启动服务器 首先异步接收客户端  Console.ReadLine();是为了保证程序不会结束再异步应答中 其实就是一开始 先连接 然后在应答回调里面 进行接收回调 然后......
  • 三、MyBatis基础配置之映射文件Mapper.xml（均为单表查询示例）
    一）动态if需求：多条件组合查询。  二）动态foreach需求：多值查询。  三）动态抽取......
  • 电路分析基础----运放里的虚短虚断
    令人稀里糊涂的虚短虚断想必好多人在学习硬件电路分析时，都会听到虚短虚断这个专业术语，但是对于新手玩家，这个术语不好理解，比如我自己，经常将这两个概念混淆。最近刷到大佬的视频，讲解的非常简洁易懂，特意做个小笔记！1.电子小白学不会运放？一开始掌握这两个用法就够了！2.如何理解运放的......
  • HTML学习笔记
    简介HTML(HypertextMarkLanguage)，一种标记语言，使文章结构转化为逻辑块，达到功能的组合。学习笔记HTML标签不区分大小写元素的主要部分包含L:开始标签（Openingtag），内容（Content），结束标签（Closingtag)PS：空元素只有一个标签两种元素类别：块级元素和内联元素元素也可以拥有属性......
  • MySQL基础篇快速记忆和查询
    查询语法：SELECT标识选择哪些列FROM标识从哪个表中选择去重(Distinct)在SELECT语句中使用关键字DISTINCT去除重复行SELECTDISTINCTdepartment_idFROMemployees;过滤(Where)语法：SELECT字段1,字段2FROM表名WHERE过滤条件使用WHERE子句，将不满足条......
  • 浅醉和的基础讲解
    什么是前缀和前缀和的逆它是前缀和的转变a[i]=pre[i]-pre[i-1]Code:#include<bits/stdc++.h>usingnamespacestd;constintN=105;intpre[N];intmain(){intN;cin>>N;for(inti=1;i<=N;i++){cin>>pre[i];......
  • 【前端Vue】Vue从0基础完整教程第1篇：vue基本概念,vue-cli的使用【附代码文档】
    Vue从0基础到大神学习完整教程完整教程（附代码资料）主要内容讲述：vue基本概念，vue-cli的使用，vue的插值表达式，{{gaga}}，{{if(obj.age>18){}}}，vue指令，综合案例-文章标题编辑vue介绍,开发vue的方式,基本使用,如何覆盖webpack配置,目录分析与清理,vue单文件组件的说明,vue通......
  • mysql基础知识整理
    事务1.1事务的四大特性原子性（Atomicity）：事务包含的所有操作要么全部成功，要么全部失败回滚一致性（Consistency）：一个事务执行之前和执行之后都必须处于一致性状态隔离性（Isolation）：跟隔离级别相关，如readcommitted，一个事务只能读到已经提交的修改持久性（Durability）：一个事务一旦被......
  • 基础GamePlay知识-扇形检测
    将会持续更新gameplay的一些基础知识，一同学习。扇形检测扇形检测是Gameplay里面很常见的场景。比如荒野乱斗中，大部分的近战角色都是扇形攻击。在扇形范围内就认为是受击。扇形检测只有两个参数，一个是扇形的角度一个是扇形的半径大小。效果获取鼠标朝向技能必然是和鼠标朝......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99