2 初识HTML

最新推荐文章于 2024-03-08 14:14:11 发布

江湖上的程序员

最新推荐文章于 2024-03-08 14:14:11 发布

阅读量123

点赞数

分类专栏：前端0基础学习相关文章标签： html

本文链接：https://blog.csdn.net/qq_37043837/article/details/109380372

版权

前端0基础学习相关专栏收录该内容

10 篇文章 0 订阅

订阅专栏

HTML指的是超文本标记语言
1. HTML不是一种编程语言，而是一种标记语言
2. 标记语言是一套标记标签（mark tag）
常用的快捷键
1. 生成页面骨架的两种快捷方式
  1. html：5 然后按tab键
  2. ！然后按tab键
文档类型 DOCTYPE
1. <!DOCTYPE html>声明位于文档中的最前面的位置，处于<html>标签之前。此标签可告知浏览器文档使用哪种HTML（快捷键 html：5 tab键）或者XHTML（html：xt tab键）规范

<!DOCTYPE html> //这个是HTML5的文档声明团队约定：HTML文件必须加上DOCTYPE声明，并统一使用HTML5的文档声明

页面语言 lang

<html lang="en">//指定html语言种类常见的2个： 1.en定义语言为英语 2.zh-CN定义语言为中文 <html lang="zh-CN">指定该html标签内容所用的语言为中文团队约定：考虑浏览器和操作系统的兼容性，目前依然使用zh-CN属性

拓展阅读：

简单来说，可能对于程序来说没有太大的作用，但是它可以告诉浏览器，搜索引擎，一些处理HTML的程序对页面语言内容来做一些对应的处理或者事情。

比如可以

- 1. 根据lang属性来设定不同语言的CSS样式或者字体
  2. 告诉搜索引擎做精确的识别
  3. 让语法检查程序做语言识别
  4. 帮助翻译工具做识别
  5. 帮助页面阅读程序做识别
  6. 等等
字符集

文本格式化标签（熟记）

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

标签	显示效果
<b></b> <strong></strong>	文字以粗体方式显示（XHTML推荐使用strong）
<i></i> <em></em>	文字以斜体方式显示（XHTML推荐使用em）
<s></s> <del></del>	文字以加删除线方式显示（XHTML推荐使用del）
<u></u> <ins></ins>	文字以加下划线方式显示（XHTML不赞成使用u）

区别：

b只是加粗 strong除了可以加粗还有强调的意思，语义更强烈。

图像标签（img）

属性	属性值	描述
src	URL	图像的路径
alt	文本	图像不能显示时的替换文本
title	文本	鼠标悬停时显示的内容
width	像素（XHTML不支持%页面百分比）	设置图像的宽度
height	像素（XHTML不支持%页面百分比）	设置图像的高度
border	数字	设置图像边框的宽度

border后面用css也可以实现相同的效果。

注意：

1. 标签可以拥有多个属性，必须写在开始标签中，位于标签名后面。
2. 属性之间部分先后顺序，标签名与属性、属性与属性之间均以空格分开。
3. 任何标签的属性都有默认值，省略该属性则取默认值。
4. 采取键值对的格式 key=“value” 的格式
链接标签a

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

属性	作用
href	用于指定链接目标的url地址，当为标签应用href属性时，它就具有了超链接的功能
target	用于指定链接页面的打开方式，其取值有self和_blank两种，其中self为默认值，_blank为在新窗口中打开方式。

注意：

1. 外部链接需要添加 http://www.baidu.com
2. 内部链接直接连接内部页面名称即可比如<a href="index.html">首页</a>
3. 如果当前没有确定链接目标时，通常将链接标签的href属性值定义为“#”，表示该链接暂时为一个空链接
4. 不仅可以创建文本超链接，在页面中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。
注释标签

在HTML中还有一种特殊的标签——注释标签。如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的文字，就需要使用注释标签。

简单解释：

注释内容不会显示在浏览器窗口中，但是作为HTML文档内容的一部分，也会被下载到用户的计算机上，查看源代码时就可以看到。

格式：  团队约定一般用于简单的描述，如某些状态描述、属性描述等。注释内容前后各一个空格，注释位于要注释代码的上面，单独占一行

路径

实际工作中，我们的文件不能随便乱放，否则用起来很难快速的找到他们，因此我们需要一个文件夹来管理他们。

- 1. 就是普通的文件夹，里面只不过存放了我们作业面所需要的相关素材，比如html文件、图片等
- 根目录

- 1. 打开目录文件夹的第一层就是根目录

页面中的图片会非常多，通常我们再新建一个文件夹专门用于存放图片文件（images），这时再插入图像，就需要采用“路径”的方式来指定图像文件的位置。路径可以分为相对路径和绝对路径。

1. 相对路径

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

1. 绝对路径

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

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

注意：

绝对路径用的比较少，理解下就可以了。但是要注意，他的写法，特别是符号 \ 并不是相对路径的 /

锚点定位
1. 通过创建锚点链接，用户能够快速定位到目标内容。
2. 创建锚点连接分为两步：

1.使用相应的id名标注跳转目标的位置。 <h1 id="two">第二集</h1> 2.使用<a href="#id名">链接文本</a>创建连接文本（被点击的） <a href="#two"></a>

base标签

总结：

- 1. base可以设置整体链接的打开状态
  2. base写在<head></head>之间
  3. 把所有的a链接都默认添加 target="_blank”属性

全体链接~ 到~ 全体集合所有链接以新窗口打开页面~ 是~

预格式化文本pre标签

<pre></pre>标签可以定义预格式化的文本。

被包围在<pre></pre>标签元素中的文本通常会保留空格和换行符。而文本也会显示成等宽字体。

所谓的预格式化文本就是，按照我们预先写好的文字格式来显示页面，保留空格和换行等。

有了这个标签，里面的文字，会按照我们书写的模式显示，不需要段落和换行标签了。但是，比较少用，因为不好整体控制。

什么是XHTML？

XHTML是更严格更纯净的HTML代码。

XHTML指可扩展超文本标记语言
XHTML的目标是取代HTML
XHTML与HTML4.01几乎是相同的
XHTML是更严格更纯净的HTML版本
XHTML是作为一种XML应用被重新定义的HTML
XHTML是一个W3C标准

HTML和XHTML之间有什么区别？

XHTML指的是可扩展的超文本标记语言

XHTML与HTML4.01几乎是相同的
XHTML是更严格更纯净的HTML版本
XHTML是作为一种XML应用被重新定义的HTML
XHTML是2001年1月发布的W3C推荐标准
XHTML得到所有主流浏览器的支持
XHTML元素是以XML格式编写的HTML元素。XHTML是严格版本的HTML，例如它要求标签必须要小写，标签必须被正确关闭，标签顺序必须正确排列，对于属性都必须使用双引号等。