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

智能推荐

基于ssm超市库存商品管理系统的设计与实现(源码+lw+部署文档+讲解等)-程序员宅基地

文章浏览阅读775次，点赞22次，收藏24次。功能对照表的目的是帮助开发团队了解软件的功能状况，及时修复功能缺陷和错误，并提高软件的质量和稳定性。功能编号功能名称功能描述功能状态备注1用户登录用户可以通过提供用户名和密码登录系统正常用户名和密码的验证机制安全性2用户注册用户可以通过提供用户名、密码和电子邮件地址注册新的账户正常无3密码修改用户可以通过提供原密码和新密码修改已有账户的密码正常用户密码的修改操作是否需要提供安全认证4用户信息查看用户可以查看自己的个人信息，如用户名、电子邮件地址、角色等正常无。

阿里云PAI大模型RAG对话系统最佳实践_rag最佳实践-程序员宅基地

文章浏览阅读745次，点赞12次，收藏21次。通过以上更具体的步骤和考虑因素，_rag最佳实践

python如何另存文件_python如何保存文本文件-程序员宅基地

文章浏览阅读3.1k次。python保存文本文件的方法：使用python内置的open()类可以打开文本文件，向文件里面写入数据可以用write()函数，写完之后，使用close()函数就可以关闭并保存文本文件了示例代码如下：执行结果如下：内容扩展：Python3将数据保存为txt文件的方法，具体内容如下所示：f = open("data/model_Weight.txt",'a') #若文件不存在，系统自动创建。'a'..._怎么保存python文件

Linux下打包qt和oracle,怎样编译Qt下的Oracle驱动-程序员宅基地

文章浏览阅读196次。Windows下编译Oracle驱动打开工程：C:\Qt\4.8.1\src\plugins\sqldrivers\oci修改oci.pro：TARGET = qsqlociSOURCES = main.cppinclude(../../../sql/drivers/oci/qsql_oci.pri)include(../qsqldriverbase.pri)INCLUDEPATH += D:\o..._linux 编译 oci.pro

PCF8591基础知识（AD/DA芯片）_pcf8591ain3-程序员宅基地

文章浏览阅读270次，点赞3次，收藏5次。PCF8591在板子上对应的是u16芯片。该芯片有4个ADC输入管脚，分别是AIN0~AIN3。AIN0对应的在排针J3上，AIN1对应的是光敏电阻与固定电阻R31的分压数值，AIN2不怎么考，AIN3对应的是旋转电位计的电压值。器件地址：1001 000（R/W非）表示51单片机从PCF8591读数据；表示51单片机向PCF8591写数据；另外，光敏电阻的阻值变化，光线越强，阻值越低；光线越暗，组织越高。对应的电压值，光线越暗，AIN1的电压越低。光线越强，阻值越高。_pcf8591ain3

torch.where（） RuntimeError: expected scalar type int but found float/double-程序员宅基地

文章浏览阅读521次。这个问题大多数是由于使用老版本torch导致的，github上有说这是某个版本的bug，再后续工作中已经进行了修复，要是非要使用该版本torch的话，我使用了一个比较笨拙的方法，写一个where代替torch.where（）这个版本是xy不需要同维度的，不过肯定没有torch写的快，不过能运行了。这是复现muzic中的getmusic时遇到并解决的问题。_runtimeerror: expected scalar type int but found float

随便推点

linux驱动开发：ft5x06的touch screen的IIC驱动程序编写_触摸屏a类协议和b类协议-程序员宅基地

文章浏览阅读2.8k次。触摸屏属于一个标注的input dev.所以我们按照输入子系统的流程来实现驱动开发。 实际板子与CTPM的通讯连接基于IIC总线，所以我们需要把驱动挂载到IIC总线下面去，也就是注册IIC驱动到iic_core.c中去。 实例化一个IIC设备有多种方式，仿照上一次的24cxx IIC设备的创建，我们来实现ft5x06IIC设备的创建。 因实际板子上TS IC使用的是ft5x02，所以先实例化设_触摸屏a类协议和b类协议

关于html中下拉菜单select的样式的改变_html设置select选择显示和下来显示怎么能不一致-程序员宅基地

文章浏览阅读5.2k次。关于html中下拉菜单select的样式的改变作者:菩提树下的杨过 日期:2006-06-12字体大小: 小 中 大 首先要告诉大家，如果你是用css的方法，除了箭头部分，其他都可以改变，这是很令人别扭的事，因为其他的样式改了，箭头部分改不了等于无用。下面举个css改select的例子 HTML代码 .box{border:1px solid#C0C0_html设置select选择显示和下来显示怎么能不一致

ZedBoard-自定义IP核实现+PS成功调用【详细步骤+流程介绍+源码】_zedboard教程-程序员宅基地

文章浏览阅读3.4k次。软件环境：WIN7_64 + ISE 14.4 (system_edition)硬件：Zedboard、USB-Cable线搭建图： 经过前几天的学习，查看数据手册、官方例程，笔者已经对Zedboard有了基本的了解，但是怎样才能充分发挥ZYNQ的优势呢？这个就不得不说下ZYNQ的基本架构了，它分为PS（Processing System）和PL（Progr_zedboard教程

使用H2O机器学习"十分钟"提交天池练习赛--工业蒸汽量预测，超过86%的队伍_练习赛-蒸汽数据集-程序员宅基地

文章浏览阅读430次。试用一下H2O全自动机器学习下载数据集天池练习赛"工业蒸汽量预测"，下个数据集：https://tianchi.aliyun.com/competition/entrance/231693/introduction安装H2OH2O requirements：pip install requestspip install tabulatepip install ..._练习赛-蒸汽数据集

VxLAN-分布式网关_vxlan分布式网关实验-程序员宅基地

文章浏览阅读603次。vLSW1、vLSW2充当虚拟交换机，给数据添加vlan tag。由于模拟器PC不会主动发送ARP，需要用PC ping 网关地址。查看VPN实例中的路由，学习到32位主机路由。查看OSPF邻居是否建立，路由是否学习到。CE1上学习到32位主机路由（回城路由）查看BGP EVPN学习的5类路由。测试PC访问外部网络Server。查看BGP EVPN邻居关系。同子网，PC1 访问PC2。跨子网，PC1 访问PC3。查看EVPN的3类路由。查看EVPN的2类路由。查看3层VxLan隧道。查看VPN实例内路由。_vxlan分布式网关实验

mac读写硬盘的软件Tuxera NTFS2023免费版下载-程序员宅基地

文章浏览阅读545次。Mac用户在使用NTFS格式移动硬盘时，会遇到无法写入硬盘的情况。要想解决无法写入的问题，很多人选择使用Mac读写软件。面对市面上“众多”的读写硬盘软件，用户应该怎么选择呢？初次接触移动硬盘的伙伴可能不知道移动硬盘怎么和电脑连接，本文就来告诉大家mac读写硬盘的软件有哪些，mac如何使用移动硬盘。因为Mac电脑不能写入NTFS格式磁盘，但是多数用户使用的是NTFS格式的移动硬盘、u盘，因此很多NTFS for Mac软件应运而生。但是市面上很多NTFS for Mac软件很多，例如：Tuxera NTFS

推荐文章

热门文章

相关标签