前端入门知识点之html标签

笑笑泡泡堂

已于 2023-03-25 08:48:21 修改

阅读量520

点赞数

文章标签： html 前端 css

于 2023-03-24 15:52:42 首次发布

本文链接：https://blog.csdn.net/weixin_54420253/article/details/129750302

版权

本文详细介绍了HTML的基础知识，包括HTML的定义、如何创建HTML文件、标签语法、各种类型的标签如标题、段落、换行、水平线、文本格式、超链接、图片、视频、列表和表格等。特别强调了HTML标签的语义化及其在网页设计中的重要性。

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

什么是HTML

全称是 HyperText Markup Language 即超⽂本标记语⾔，⼀种⽤于创建⽹⻚的标准标记语⾔。

如何创建⼀个HTML文件

想要使⽤HTML需要创建HTML文件，每个网页都是⼀个HTML文件，html文件就是以 .html 结尾的⽂件。
在文件夹中右键新建文本文档，将文本文档修改后缀为 .html 即可。

<!DOCTYPE HTML>
<html>
</html>

HTML标签

标签语法

html是由标记（标签）组成的，标签由标签名和属性组成

标签写法

标签的写法 <标签名></标签名> 或者 <标签名 />

<!-- 标题 -->
<h1></h1>
<!-- 图片 -->
<img />

标签属性
在每个HTML标签上都由属性 <标签名属性名=“属性值” 属性名=“属性值”></标签名>

<h1 class="title"></h1>
<a href="https://www.baidu.com">百度</a>

标签分类
● 双标签和单标签
○ 双标签：如：<h2><h2/>、
○ 单标签：如：<input/>、<img/>
● 块级元素、⾏内元素和⾏内块级元素
○ 块级元素：单独占⼀⾏，允许设置宽⾼值
○ ⾏内元素：不会单独占⼀⾏，从左往右排列，设置宽⾼值不起效
○ ⾏内块级元素：不会单独占⼀⾏，从左往右排列，能设置宽⾼值

格式标签

标题标签

< h1~6 align= "left|right|center"> </h1~6>

段落标签

给⽂本添加⼀个段落的语义，告诉浏览器，哪些⽂字是⼀个段落

< p align="left|right|center" >< /p >

换行标签 (用来输入空行，而不是分割段落)

< br />

水平线标签

< hr  width="" size="" align="" color=""  noshade / >

无意义标签

< span>< /span > < div></ div >

用来组合文档中的行内元素，没有固定的格式表现，使用样式时，才有样式上的变化

文本标签

字体标签 
粗体标签 
斜体标签 
下划线标签 
删除线标签 < del></ del>
上标标签 
下标标签 

字符实体

● 在 HTML 中，某些字符是预留的，比如HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签
● 如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体，比如<用 < 或< 表示
● 字符实体由三部分组成：
○ 以&开始
○ 中间为实体名或实体编号
○ 以 ; 结束
● 实体名称便于记忆而实体编号的浏览器兼容性更好
● 实体名称区分大小写

超链接标签

普通链接
基础语法：< a href=“链接地址” target=“blank | self” title=“描述”>文本或图片</ a>
href：连接路径
target：标的意思，跳转后的网站是否在新标签页打开； blank新窗口跳转， self当前窗口跳转
title：鼠标悬浮显示文字
空链接 < a href=“##”>< /a >
返回页面顶部 < a href=“#”>< /a>
保持原位置 < a href=“javascript:; ”>< /a >
脚本链接 < a href=“javscript:alert(‘hello world’)”>< /a>
电子邮件链接 < a href=“mailto:邮箱地址” >< /a >
拨打电话 < a href=“tel:电话号码” >< /a >
注意：
a标签不仅可以给⽂字添加超链接，也可以给图⽚，视频，⾳频，表格等添加超链接。
如果通过a标签的href属性指定⼀个URL，那么必须在地址前加上http://或者https://。

URL相对地址与绝对地址

● 协议://主机:端口号/文件/附加资源
● http://www.yunhedata.com.cn/info.html?uname=tina&age=20&sex=female
● 相对URL:
Images/logo.gif
…/css/demo.css
…/…/js/demo.js
./admin/index.php
● 绝对URL:
C:/appserv/www/image/logo.gif
/usr/local/apache/htdocs/www/index.php
http://www.yunhedata.com.cn/

锚点链接

● 使用 name 属性创建 HTML 页面中的锚点
● 当使用锚时，我们可以创建直接跳至该命名锚的链接，这样使用者就无需不停地滚动页面来寻找他们需要的信息了
● 步骤：
a. 创建锚点 < a name=“锚点名称”></ a>
b. 链接到锚点
同一页面 : < a href=“#锚点名称”></ a>
不同页面 : < a href=“目标文档URL# 锚点名称”>< /a>

图片标签

基础语法：
src source的缩写，来源，表示图⽚的来源、路径。必须的属性
alt 图像无法显示时的替代文本，搜索引擎可以通过它指定的文字搜索该图片
width 图片宽度
height 图片高度
border 图片边框

设计网页时经常使用的图片有三种格式：
● GIF – 最多支持256色,支持透明,支持多帧动画显示效果.
● JPEG | JPG-- 支持多种颜色,可以有很高的压缩比,使用了有损压缩,不支持透明,不支持动画效果.256256256
● PNG – 是一种新的图片技术,可以表现品质比较高的图片,使用了无损压缩,支持透明,不支持动画

热点地图

<img  src="" alt="" usemap="#test">
<map name="test"  id="test">
    <area shape="rect" coords="x1,y1,x2,y2" alt="" href=""/>
    <area shape="circle" coords="x,y,r" alt