前端基础之HTML+CSS（一）

最新推荐文章于 2024-09-11 14:09:02 发布

南门酒巷

最新推荐文章于 2024-09-11 14:09:02 发布

阅读量90

点赞数 2

分类专栏：前端基础之HTML+CSS 文章标签： html css 前端

本文链接：https://blog.csdn.net/weixin_46685715/article/details/131524700

版权

前端基础之HTML+CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文介绍了HTML的基本概念，它是一种用于描述网页的标记语言，不是编程语言。文章详细讲解了HTML的起源、基本语法，如文档声明、字符集设置，以及常见的标签，如标题、段落、图像和链接等。此外，还提到了相对路径、锚点定位和基础标签的作用。

摘要由CSDN通过智能技术生成

前言

从此开始我的第一篇博客，记录我的学习历程。

提示：以下是本篇文章正文内容，是我从各个渠道学习到的并总结出来的一些知识点

一、什么是HTML

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

HTML指的是超文本标记语言(Hyper Text Markup Language)；
HTML不是一门编程语言，而是一种用于定义内容结构的标记语言；
标记语言是一套标记标签；

Web标准的制定

W3C-万维网联盟(World Wide Web Consortium)

1994年由麻省理工学院、东京庆应大学、欧洲数学与信息学研究联盟、北京航空航天大学组建
Web标准的组成

二、HTML的基本语法

<!DOCTYPE html> 
<!-- 特殊且固定的文档声明标签 -->
<html lang="***"></html> 
<!-- "en"代表英语；"zh-CN"代表中文；"ja-jp"代表日文。搜索引擎优化和浏览器有帮助-->

<meta charset="***">	
<!-- ASCII-美国信息交换标准代码；ISO-8859-1-拉丁字母表的字符编码；-->
<!-- GB2312-汉字编码字符集；UTF-8-Unicode万国码字符编码 -->
<!-- UTF-8 包括绝大多数人类已知语言的字符。基本上 UTF-8 可以处理任何文本内容，还可以避免以后出现某些问题，没有理由再选用其他编码。 -->

HTML常用标签

html骨架标签

<html> <!-- HTML标签 页面最大的标签-根标签 -->
    <head> <!-- 文档头部 head标签中必须要设置title标签 -->
        <title></title> 
        <!-- 文档标题 页面专属的网页标签。该元素设置页面的标题，显示在浏览器标签页上，也作为收藏网页的描述文字。 -->
    </head>
    <body> <!-- 文档主体 包含文档所有内容 -->
    </body>
</html>

排版标签

<h1-6></h1-6> <!-- 标题标签 重要性递减 -->
<p></p> <!-- 段落标签 -->
<hr /> <!-- 水平线标签 一条水平线 -->
<br /> <!-- 换行标签 -->
<div></div> <!-- div标签 一行只能放一个div -->
<span></span> <!-- span标签 一行可以放很多span -->

文本格式化标签

<b></b> <strong></strong> <!-- 文字设置粗体 XHTML推荐strong -->
<i></i> <em></em> <!-- 文字设置斜体 XHTML推荐em -->
<s></s> <del></del> <!-- 文字设置加删除线 XHTML推荐del -->
<u></u> <ins></ins> <!-- 文字设置加下划线 XHTML不推荐u -->

图像标签

<img src="图像URL" />	
<!-- 属性有：src-图像路径；alt-图片不能显示时的替换文本；title-鼠标悬停时显示的内容 -->
<!-- width-图像宽度；height-图像高度；border-图像边框宽度 -->

链接标签

<a href="跳转目标" target="目标窗口弹出方式"></a>
<!-- target：self-默认值/_blank-在新窗口打开 -->

相对路径

下级路径："/"；上级路径："../"；上两级路径："../../"；

锚点定位

利用id名查找跳转目标

<h1 id="two"></h1>
<a href="#two"></a>

base标签

<base target="_blank" />
<!-- base设置整体链接的打开状态；可以写到<head></head>之间； -->

pre标签

<pre></pre>
<!-- 用预先写好的文字格式来显示页面，保留空格和换行 -->