HTML零基础入门(一)

简介: HTML零基础入门(一)

文章目录


1.HTML常用标签

1、h1-h6标题标签逐一递减,每一个标签占一行。

2、< p>段落标签,自动换行< /p>

3、强行打断换行< br />

4、body内容标签,head头部,title页面标题内容

5、html表示结构,css表示外表,JavaScript表示行为


2.文本格式化标签

语义 标签 说明
加粗 < strong>< /strong>或< b>< /b> 第一个语义更加强烈!
倾斜 < en>< /en>或< i>< /i> 第一个语义更加强烈!
删除线 < del>< /del>或< s>< /s> 第一个语义更加强烈!
下划线 < ins>< /ins>或< u>< /u> 第一个语义更加强烈!


3.< div>和< span>标签

div和span是没有语义的,是一个盒子,用来装内容

特点:div标签用来布局,一行只能放一个div,大盒子

span标签用来布局,一行上可以多个span,小盒子


4.图像标签

< img>标签用于定义HTML页面中的图像

<img src="图像url" />

src是< img>标签的必须属性,它用于指定图像文件的路径和文件名

alt替换文本 图像显示不出来的时候用文字替换

<img src="img1.jpg" alt="不存在的图片"/>

title 提示文本 鼠标放在图像上,提示的文字

<img src="img.jpg" alt="不存在的图片" title="存在图片"/>

图片需要设置宽度width、高度height、边框粗细border


5.图像标签和路径

相对路径:以引用文件所在位置为参考基础,而建立的目录路径。

这里简单来说,图片相对于HTML页面的位置

相对路径分类 符号 说明
同一级路径 图像文件位于HTML文件同一级 <img src="img.jpg"/>
下一级路径 / 图像文件位于HTML文件下一级 <img src="images/img.jpg">
上一级路径 …/ 图像文件位于HTML文件上一级<img src="../img.jpg">

绝对路径:是指目录下的绝对位置,直接到达目标位置,通常是从盘符开始的路径。


6.超链接标签(重点)

1.外链接:

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
<a href="http://www.qq.com" target="_blank">腾讯</a>

target 打开窗口的方式 默认的值是_self 当前窗口打开页面 _blank 新窗口打开页面

2.内链接:网站内部页面之间的相互链接,直接链接内部页面名称即可

<a href="img.html">首页</a>

3.空链接:如果当时没有确定链接目标时

<a href="#">首页</a>

下载链接:如果href里面地址是一个文件或者压缩包,会下载这个文件

<a href="img.zip">下载文件</a>

地址链接是文件.exe或者是zip等压缩包形式

5.网页元素链接:网页中的各种网页元素,如文本、图像、表格、音频、视频等都可以添加超链接

<a href="http://www.baidu.com"><img src="img.jpg"/></a>

6.锚点链接:点我们点击链接,可以快速定位页面中的某个位置。

在链接文本的href属性中,设置属性值为#名字的形式,

<a href="#冠军">中国好声音第一季</a>

第一季的内容

<h3 id="冠军"></h3>


7.特殊字符

空格符

&nbsp;

小于号

&lt;

大于号

&gt;


相关文章
|
存储 NoSQL Java
使用Redisson RLock锁防止定时任务短周期重复执行
在开发定时任务时,如果任务执行周期较短,可能会导致任务在前一次执行尚未完成时就再次触发,从而产生重复执行的问题。为了解决这个问题,我们可以借助Redisson的RLock锁机制,确保任务只有在前一次执行完成后才能再次执行。本文将介绍如何使用Redisson RLock锁来避免定时任务的重复执行。
800 0
使用Redisson RLock锁防止定时任务短周期重复执行
|
XML Java 编译器
java aspectjrt AOP 用法
java aspectjrt AOP 用法
372 0
|
7月前
|
Web App开发 前端开发 JavaScript
鸿蒙5开发宝藏案例分享---Web适配一多开发实践
这是一份实用的鸿蒙Web多设备适配开发指南,针对开发者在不同屏幕尺寸下的布局难题提供了解决方案。文章通过三大法宝(相对单位、媒体查询和窗口监听)详细介绍如何实现智能适配,并提供了多个实战案例,如宫格布局、对话框变形和自适应轮播图等。此外,还分享了调试技巧及工具推荐,帮助开发者快速上手并优化性能。最后鼓励读者实践探索,并提示更多官方资源等待发现。
|
数据格式 UED
记录一次NPOI库导出Excel遇到的小问题解决方案
【11月更文挑战第16天】本文记录了使用 NPOI 库导出 Excel 过程中遇到的三个主要问题及其解决方案:单元格数据格式错误、日期格式不正确以及合并单元格边框缺失。通过自定义单元格样式、设置数据格式和手动添加边框,有效解决了这些问题,提升了导出文件的质量和用户体验。
966 3
|
人工智能 前端开发 JavaScript
人工智能文生图技术介绍
文生图技术将文字描述转化为图像,免除了设计师的参与。它分为&quot;代码式&quot;和&quot;AI&quot;两类。代码式如PlantUML、Mermaid和Reveal.js,适合开发人员通过特定语法创建图表。AI文生图如MidJourney和文心一言,能根据文本生成图像,MidJourney在文生图领域表现突出。这些工具为不同工作场景提供了便利。
人工智能文生图技术介绍
|
安全 应用服务中间件 网络安全
Nginx入门 -- 了解Nginx中证书配置
Nginx入门 -- 了解Nginx中证书配置
518 0
|
前端开发 JavaScript UED
CSS Transition(过渡效果)详解
CSS Transition(过渡效果)详解
1523 1
|
前端开发 应用服务中间件 网络安全
nginx配置SSL证书配置https访问网站 超详细(附加配置源码+图文配置教程)
nginx配置SSL证书配置https访问网站 超详细(附加配置源码+图文配置教程)
1723 2
【计算机网络】—— 详解码元,传输速率的计算|网络奇缘系列|计算机网络
【计算机网络】—— 详解码元,传输速率的计算|网络奇缘系列|计算机网络
1321 0
|
安全 网络安全
允许Traceroute探测漏洞和ICMP timestamp请求响应漏洞解决方法(三)
允许Traceroute探测漏洞和ICMP timestamp请求响应漏洞解决方法(三)
2818 0