【HTML】HTML入门

灵境程序

已于 2022-09-04 21:23:07 修改

阅读量562

点赞数 3

分类专栏：前端文章标签：大数据 html 前端 js 其他

于 2022-07-10 11:41:05 首次发布

本文链接：https://blog.csdn.net/qq_61845982/article/details/125703784

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文详细介绍了HTML的基础知识，包括基本语法、标签属性、常见标签如h系列、p标签、img标签和锚点的使用。特别讨论了标签的分类，如容器级和文本级标签，并讲解了无序列表、有序列表和定义列表的创建。此外，还阐述了相对路径和绝对路径的概念及其在图片引用中的应用。

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

目录

前言

一、html的基本语法

二、标签入门

1.标签属性

2.标签列表

三、常用标签介绍

1. h系列标签

2. p标签

3. imge标签

4. 锚点

关于相对路径和绝对路径的理解

5.布局标签

总结

前言

例如：本文为关于html的一些入门的简单介绍

一、html的基本语法

1. 标签名必须书写在一对尖括号<>内部

2. 标签分为单标签和双标签，双标签必须成对出现，有开始标签和结束标签

3. 结束标签必须有关闭符号/.

4. 根据标签内部存放的内容不同，将不同的标签划分为两个级别.

注意：文本的空白折叠现象

在普通文字之间，如果有空格，换行，缩进导致的空白，在浏览器中加载时会被折叠成

一个空格显示，这就是空白折叠现象

一些空白要想在浏览器中正常显示，需要使用一些替换写法书写不同的空白。

·空格：可以使用字符实体替换书写，在代码中书写&nbsp；替换空格

·换行：可以使用br单标签进行书写

二、标签入门

1.标签属性

标签属性是标签身上的一些特殊性质，就是给标签加上了某个属性，相当于给标签赋予了

职能，前提是有这些职能

1.书写位置：在开始标签或单标签的标签名后面，添加一个空格，空格后面书写属性

2.属性包含属性名（key）和属性（value）两部分，根据英文表示，习惯将属性写法称为

键值对写法，标签属性的键值写法是：k=“v”

····特殊注意：标签之前对空白换行缩进不敏感

·文字的位置不会根据书写标签位置决定，而是根据标签的种类决定

（块级还是行内级，后面css课程中讲）

·html语法中，认识标签的开始和结束，不论有没有换行都只认标签开始结束

·标签之间还认识嵌套关系

·在书写的过程中，为了让代码是容易解读的，建议进行合理的换行和缩进

·在上传代码过程中，为了提高传输速度，可以将代码进行压缩，删除多余的空白

单标签	双标签
Img	h1-h6
br	Div
Hr	Span
	p
	a
	ul+il

根据标签的种类分为两个等级，分别是容器级和文本级

·容器级：元素内部除了可以存放文本之外，还可以嵌套标签

·文本级：元素内部只能存放文本或者文本级标签

2.标签列表

列表:列表都不是单打独斗的,通常都是一组标签组成

1.无序列表

作用:定义一个没有顺序的列表结构

由两个标签组成，u1，li

u1:英文UNordered list无序列表

li:英文list item列表项

都是容器级

无序列表之间没有任何先后顺序之分的

列表项之前的前缀样式是css去控制的，目前只负责结构的搭建就可以了

代码如下（示例）：

<h2>四大名著</h2>
    <ul>
        <li>西游记</li>
        <li>红楼梦</li>
        <li>水浒传</li>
        <li>三国演义</li>
    </ul>

ul内部嵌套li，他们是父子关系

规定:ul标签的内部必须之恶能嵌套li，li标签的内部可以嵌套任何标签，甚至ul

有序列表

作用:定义一个有序列表的列表结构

需要两个标签组成 ol，li

与无序一样

有数字的排名顺序

定义列表

1.作用:定义一个标题和内容自定义的列表结构

2.由三个标签组成，dl，dt，dd

dl英文:definition list 表示创建一个自定义的列表结构

dt:definition description 定义解释项，表示解释前面的主题内容

dl内部只能存放dt和dd，dt和dd是同级关系

该处使用的url网络请求的数据。

三、常用标签介绍

1. h系列标签

英文：headline（标签）

包含一共六级标题，有：h1，h2，h3，h4，h5，h6

都是双标签，容器级标签

作用：给内部内容添加对应级别标题的语义

标签根据重要性不同，认为权重不同，所有的标题标签的权重都比别的标签要高

<h1></h1>从h1-h6字体逐级减小

·从我们对文本的定义来讲，权重就是文本的权重，比如设置h标签的文字就赋予了标题的语义

·如果从浏览器的角度去考虑，它的权重在搜索引擎的优化，搜索引擎的优化除了会抓取

meta标签配置的keywords之外还会优先抓取标题的内容，h1标签的权重是最高的，一个页面

只使用一个h1，通常用来制作网页的logo，如果你在页面中设置了多个h1标签，搜索引擎会认为你

在作弊，而降低你的排名

2. p标签

英文：paragraph（段落）

双标签，文本级标签

作用：添加一个完整段落的语义

注意：

//http是无连接的，每一次都需要重新请求

纯文本和超文本的区别

·定义：纯文本只包含文字内容，不能包含文字以外的，例如图片，视频等

·纯文本文件：文件内部只能书写纯文本，而且不能保存样式。最常见的.txt文件

html，css，js

·非纯文本文件：最常见的word文档.doc

·超文本：超文本文件是一种含有特殊标记的文本文件，其作用类似于word中的排版

标记，常用格式.doc，.ppt

3. imge标签

英文：imge（图片）

单标签，文本级标签

作用：在指定位置插入一张图片

img 标签的属性

src：作用是引入图片的路径

alt：图片加载不出来时候的替换文本 <img src="image/01.jpg" alt="我是鸟巢">

 <!--width:设置图片的宽度-->
    <!--height:设置图片的高度  两个都设置的话，图片可能变形
    因为如果只单独设置一个属性比如宽度，高度会等比例进行缩放
    -->
    <!--title:作用是设置鼠标以上图片时候的悬停文本-->
    <!--border:作用是给图片添加边框，单位是像素
        只是个黑色的边框，了解即可，我们真正加边框是通过css实现的，因为边框不可能只有黑色
    -->

4. 锚点<a></a>

英文：anchor（锚）

双标签，文本级标签

作用：在指定位置添加一个超级链接，从而实现相应的跳转

实现点击链接从而实现页面内的跳转

a标签有几个属性，是给超级链接添加相应的作用

·herf:英文：hypertext reference（超文本引用）

 <a href="http://www.baidu.com">跳转到百度</a>

上面的代码href属性跳转到百度网站，这个是绝对路径，我们也可以设置相对路径跳转

·target：作用是是否在新标签打开链接,值一定是下划线blank

<a href="http://www.baidu.com" target="_blank">跳转到百度</a>

·title属性：作用是鼠标移上文字之后的悬停文本

name:空锚点，可以和href实现超链接

<a href="#jbcxx">基本信息</a>
       <a name="jbxx"></a>  name不能加中文，否则露馅

第二种方法

设置锚点的点为标签的id属性

锚

 <a href="#jbxx">基本信息</a>

锚点的点:由原来的a标签的name属性变为了其他标签id属性，id属性的值要和href一样

 <h3 id="jbxx">基本信息</h3>

关于相对路径和绝对路径的理解

<!-- 
        相对路径和绝对路径 
     ·相对路径：从html出发，找到对应图片位置的路径
     如果进入某个文件夹使用“/ ”，如果出某个文件用 “ .. / ”
     如果需要出多个文件夹，使用多个../
      <img src="../image/01.jpg" alt="我是鸟巢">
    ·绝对路径
   ·盘符 <img src="C:/Users/48480/Desktop" alt="我是鸟巢">
    通过c盘根目录去查找你对应文件位置，工作中不使用这种方法，因为服务器中没c盘
    网址绝对地址
    可以放网址
    -->

5.布局标签

 <!--
            html布局标签
        div和span都是常用的布局标签，俗称盒子
        div:分割跨度大跨度，大盒子
        span:小区域小跨度
        作用是分割页面的布局，div指的是跨度布局分割，span是文字分割
        -->