HTML||初始HTML（超文本标记语言）_3.1超文本标记语言html<html><heactitle>文字显示和段落控制</title></-程序员宅基地

技术标签： HTML札记  HTML||初始HTML（超文本标记语言）  

HTML简介

  • HTML 指的是超文本标记语言 (Hyper Text Markup Language)

  • HTML 不是一种编程语言，而是一种标记语言 (markup language)

  • 标记语言是一套标记标签 (markup tag)

总结： HTML 作用就是用标记标签来描述网页，把网页内容在浏览器中展示出来，用文字来描述网页标签

 

 

HTML骨架格式

HTML 有自己的语言语法骨架格式：

<HTML>   
    <head>     
        <title></title>
    </head>
    <body>
    </body>
</HTML>

其中：

  • HTML标签：

作用所有HTML中标签的一个根节点。 最大的标签   根标签

  • head标签： 文档的头部

文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

注意在head标签中我们必须要设置的标签是title

  • title标签： 文档的标题

作用：让页面拥有一个属于自己的标题。

  • body标签：文档的主体  以后我们的页面内容 基本都是放到body里面的

body 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。）

HTML标签分类

在HTML页面中，带有“< >”符号的元素被称为HTML标签，如上面提到的 <HTML>、<head>、<body>都是HTML骨架结构标签。所谓标签就是放在“< >” 标签符中表示某个功能的编码命令，也称为HTML标签或 HTML元素

1.双标签

<标签名> 内容 </标签名>

该语法中“<标签名>”表示该标签的作用开始，一般称为“开始标签（start tag）”，“</标签名>” 表示该标签的作用结束，一般称为“结束标签（end tag）”。和开始标签相比，结束标签只是在前面加了一个关闭符“/”。

比如 <body>我是文字  </body>

2.单标签

<标签名 />

单标签也称空标签，是指用一个标签符号即可完整地描述某个功能的标签。

比如  <br /> <hr /> <img src="..." />
<br></br>

文档类型<!DOCTYPE>

标签位于文档的最前面，用于向浏览器说明当前文档使用哪种 HTML 或 XHTML 标准规范，必需在开头处使用标签为所有的XHTML文档指定XHTML版本和类型，只有这样浏览器才能按指定的文档类型进行解析。

​注意： 一些老网站可能用的还是老版本的文档类型比如 XHTML之类的，但是我们学的是HTML5,而且HTML5的文档类型兼容很好(向下兼容的原则)，所以大家放心的使用HTML5的文档类型就好了。

字符集

<meta charset="UTF-8" />

utf-8是目前最常用的字符集编码方式，常用的字符集编码方式还有gbk和gb2312。

gb2312 简单中文 包括6763个汉字

BIG5 繁体中文 港澳台等用

GBK包含全部中文字符 是GB2312的扩展，加入对繁体字的支持，兼容GB2312

UTF-8则包含全世界所有国家需要用到的字符

记住一点，以后我们统统使用UTF-8 字符集, 这样就避免出现字符集不统一而引起乱码的情况了。

HTML标签的语义化

白话： 所谓标签语义化，就是指标签的含义。

为什么要有语义化标签

  1. 方便代码的阅读和维护

  2. 同时让浏览器或是网络爬虫可以很好地解析，从而更好分析其中的内容

  3. 使用语义化标签会具有更好地搜索引擎优化

核心：合适的地方给一个最为合理的标签。

语义是否良好： 当我们去掉CSS之后，网页结构依然组织有序，并且有良好的可读性。

白话，一眼看去，就知道那个是重点，结构是什么，知道每块的内容是干啥的。

遵循的原则：先确定语义的HTML ，再选合适的CSS。

HTML常用标签

首先 HTML和CSS是两种完全不同的语言，我们学的是结构，就只写HTML标签，认识标签就可以了。 不会再给结构标签指定样式了。

HTML标签有很多，这里我们学习最为常用的，后面有些较少用的，我们可以查下手册就可以了。

排版标签

排版标签主要和css搭配使用，显示网页结构的标签，是网页布局最常用的标签。

标题标签 

单词缩写： head 头部. 标题 title 文档标题

为了使网页更具有语义化，我们经常会在页面中用到标题标签，HTML提供了6个等级的标题，即

 <h1>、<h2>、<h3>、<h4>、<h5>和<h6>
标题标签语义：  作为标题使用，并且依据重要性递减

其基本语法格式如下：

<hn>   标题文本   </hn>

注意： h1 标签因为重要，尽量少用，不要动不动就向你扔了一个h1。 一般h1 都是给logo使用，或者页面中最重要标题信息。

 

段落标签

单词缩写： paragraph 段落 [ˈpærəgræf] 无须记这个单词

在网页中要把文字有条理地显示出来，离不开段落标签，就如同我们平常写文章一样，整个网页也可以分为若干个段落，而段落的标签就是

<p>  文本内容  </p>

是HTML文档中最常见的标签，默认情况下，文本在一个段落中会根据浏览器窗口的大小自动换行。

水平线标签

单词缩写： horizontal 横线 [ˌhɔrəˈzɑntl] 同上

在网页中常常看到一些水平线将段落与段落之间隔开，使得文档结构清晰，层次分明。这些水平线可以通过插入图片实现，也可以简单地通过标签来完成，<hr />就是创建横跨网页水平线的标签。其基本语法格式如下：

<hr />是单标签

在网页中显示默认样式的水平线。

换行标签

单词缩写： break 打断 ,换行

在HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后自动换行。如果希望某段文本强制换行显示，就需要使用换行标签

<br />

这时如果还像在word中直接敲回车键换行就不起作用了。

div span标签

div span 是没有语义的 是我们网页布局主要的2个盒子 css+div

div 就是 division 的缩写 分割， 分区的意思 其实有很多div 来组合网页。

span, 跨度，跨距；范围

语法格式：

<div> 这是头部 </div>    <span>今日价格</span>

文本格式化标签

在网页中，有时需要为文字设置粗体、斜体或下划线效果，这时就需要用到HTML中的文本格式化标签，使文字以特殊的方式显示。

b  i  s  u 只有使用 没有 强调的意思 strong em del ins 语义更强烈

图像标签img

HTML网页中任何元素的实现都要依靠HTML标签，要想在网页中显示图像就需要使用图像标签，接下来将详细介绍图像标签<img />以及和他相关的属性。其基本语法格式如下：

该语法中src属性用于指定图像文件的路径和文件名，他是img标签的必需属性。

<img src="图像URL" />

链接标签

单词缩写： anchor 的缩写 [ˈæŋkə(r)] 。基本解释 锚, 铁锚 的

在HTML中创建超链接非常简单，只需用标签环绕需要被链接的对象即可，其基本语法格式如下：

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

href：用于指定链接目标的url地址，当为标签应用href属性时，它就具有了超链接的功能。 Hypertext Reference的缩写。意思是超文本引用

target：用于指定链接页面的打开方式，其取值有self和blank两种，其中self为默认值，blank为在新窗口中打开方式。

路径

实际工作中，通常新建一个文件夹专门用于存放图像文件，这时再插入图像，就需要采用“路径”的方式来指定图像文件的位置。

根目录 当前目录

路径可以分为： 相对路径和绝对路径

相对路径

以引用文件之网页所在位置为参考基础，而建立出的目录路径。因此，当保存于不同目录的网页引用同一个文件时，所使用的路径将不相同，故称之为相对路径。

  1. 图像文件和HTML文件位于同一文件夹：只需输入图像文件的名称即可，如<img src="logo.gif" />。

  2. 图像文件位于HTML文件的下一级文件夹：输入文件夹名和文件名，之间用“/”隔开，如<img src="img/img01/logo.gif" />。

  3. 图像文件位于HTML文件的上一级文件夹：在文件名之前加入“../” ，如果是上两级，则需要使用 “../ ../”，以此类推，如<img src="../logo.gif" />。

绝对路径

绝对路径以Web站点根目录为参考基础的目录路径。之所以称为绝对，意指当所有网页引用同一个文件时，所使用的路径都是一样的

“D:\web\img\logo.gif”，或完整的网络地址，例如“http://www.itcast.cn/images/logo.gif”。

 

 

 

 

 
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/JockLiu/article/details/97974282

智能推荐

在类Unix平台实现TCP客户端-程序员宅基地

文章浏览阅读1k次，点赞8次，收藏16次。我们这个TCP客户端将从命令行接收两个参数，一个是IP地址或域名，另一个是端口，并尝试连接在这个IP地址的TCP服务端。

彩虹外链网盘界面UI美化版超级简洁好看-程序员宅基地

文章浏览阅读114次。彩虹外链网盘，是一款PHP网盘与外链分享程序，支持所有格式文件的上传，可以生成文件外链、图片外链、音乐视频外链，生成外链同时自动生成相应的UBB代码和HTML代码，还可支持文本、图片、音乐、视频在线预览，这不仅仅是一个网盘，更是一个图床亦或是音乐在线试听网站。适合小文件快速共享，文件可以设置访问密码，doc，图片等文件可以预览，音频可以在线播放，也适合做图床，支持在线下载，美化前台UI，运行天数和友链在后台统计代码修改。访问后台/admin 默认账号密码admin/123456。

vue项目启动不显示Network，及Network无法访问的问题_vue network网址访问不了-程序员宅基地

文章浏览阅读4k次，点赞2次，收藏15次。首先找到build文件夹下webpack.dev.conf.js文件，修改compilationSuccessInfo里边的messages属性。在vue.config.js（或者配置config了的，就在config下的index.js ）文件下设置。最后在package.json文件中 scripts 下的 dev 或者 serve 后面加上。以上设置可以显示Network 调试地址，但是无法访问，还需设置一下。回车后会出现一串信息，复制IPV4 地址即可。地址 ,获取IPV4 地址方法，_vue network网址访问不了

C++cin.getline和std::getline的用法和区别-程序员宅基地

文章浏览阅读632次。从文件或控制台读入数据。都可以一次性读入多个字符，即读一串字符。cin.getline 是类函数。是基本输入流的函数。标准输入流，是一个类对象。也可以是。std::getline 是标准函数，使用时需要引入头文件 。cin.getline读入的数据一般放在字符数组中，std::getline读入的数据一般放在string对象中。由于cin.getline函数读入的数据放在字符数组中，所以要给出读入字符的（最大）数量。std::getline函数需要给出读入的文件流对象。 : 指向要存储字符到的字符数组的_std::getline

倍福--EL2521控制步进_倍福el2521接线图-程序员宅基地

文章浏览阅读944次。使用了EL2521控制步进电机。对于脉冲型步进或伺服驱动器，可使用EL2521模块控制操作流程1.1. EL2521简介1.1.1. 外观和接线EL2521 xxxx输出端子改变二进制信号的频率并输出（与K总线电气隔离）。频率由来自自动化设备的16位值预设。EtherCAT端子的信号状态由发光二极管指示。LED与输出同步，每个LED显示一个活动输出。1.1.2. EL2521信号类型EL2521模块的后缀有-0000，-0024，-0025，-0124几种，各种类型的接线是不同的，这点要稍_倍福el2521接线图

转载-mac下完全卸载Node.js(亲测可用)_mac 卸载 node.js-程序员宅基地

文章浏览阅读46次。【代码】转载-mac下完全卸载Node.js(亲测可用)_mac 卸载 node.js

随便推点

变色龙哈希函数 Chameleon Hash 可变型区块链_变色龙哈希改写区块-程序员宅基地

文章浏览阅读1.3w次，点赞7次，收藏42次。哈希函数 Hash：众所周知，区块链有着极其优秀的安全性就是因为其充分使用了哈希函数。哈希简单用一句话来讲，就是：将任意长度输入的字串可转换成一个固定长度的字串，通过原始字串可以很容易地算出转换后的字串，通过转换后的字串很难还原出原始字串。哈希函数特征：1. 对于任意m作为输入，得到输出的结果，很难找到另一个输入m' （m'不等于m），使得m'的Hash结果也为同样的输出_变色龙哈希改写区块

【LSTM回归预测】基于蜣螂算法优化长短时记忆DBO-LSTM风电数据预测（含前后对比）附Matlab代码-程序员宅基地

文章浏览阅读796次，点赞13次，收藏17次。基于蜣螂算法优化长短时记忆（DBO-LSTM）模型的风电数据预测是一个备受关注的研究领域。风电是一种清洁能源，其预测对于能源规划和市场运营具有重要意义。本文旨在通过对比蜣螂算法优化前后的长短时记忆（DBO-LSTM）模型在风电数据预测中的表现，探讨蜣螂算法在优化风电数据预测模型中的有效性。首先，长短时记忆（LSTM）是一种适用于时间序列数据的深度学习模型，它能够捕捉数据中的长期依赖关系，因此在风电数据预测中具有较好的表现。

小米便签data包源码解读_小米便签开源代码注释-程序员宅基地

文章浏览阅读1.8k次，点赞36次，收藏53次。对于小米便签data包源码的一些解读，可能不是很准确_小米便签开源代码注释

KE分析之slub_debug功能使用记录_photonicmodulat-程序员宅基地

文章浏览阅读2.1k次。1. 前记前段时间遇到一个问题，具有一定的代表性，特此记录，后续遇到类似问题时，可以参考这个方向2. 问题说明此问题为低概率煲机测试类问题，概率较低，需要长时间的运行才可以触发到，排查起来比较困难；2.1 测试方法设置机器为自动化休眠唤醒测试，时间周期为1分钟；usb 口有连接u盘，唤醒后会自动播放u盘内歌曲；无其他特别步骤测试时通过串口打印debug信息，另外打开系统中集成的debug功能，即收集logcat + kernel log信息，在遇到anr\je\ne\ke\hwt时会将现场_photonicmodulat

Spring + spring Mvc No Servlet Set 错误_no servletcontext set-程序员宅基地

文章浏览阅读60次。在使用注解开发，SpringMvc配置类的情况下开启@EnableWebMvc,如果在springConfig类中的@Component扫描Bean对象再次扫描到spring和springMvc的配置Bean对象就会出现No Servlet Set错误。_no servletcontext set

初学cesium时的一些笔记，过于潦草看看就好_cesium pbr 3200-程序员宅基地

文章浏览阅读840次。Cesium ion（假如要用自己的数据则需要上传数据）Cesium依赖：基于HTML5标准，无插件，跨平台；无法单独运行，依赖于浏览器（Cesium Lab基于Electron架构）浏览器基于HTTP协议，所以必须有HTTP ServerCesium功能介绍：定义影像矢量模型：{1使用3d tiles格式模式加载各种不同的3d数据，包含倾斜摄影模型，三位建筑物，CAD和BIM的外..._cesium pbr 3200

推荐文章

热门文章

相关标签