使用HTML

1.使用HTML的基本标签创建网页

2.使用相关的标签对文本信息进行排版

3.使用相关的图像标签,将图像和文本排版相结合

4.使用<a>标签创建超链接,锚链接以及功能性链接

使用vs code工具

HTML网络基本结构包括:网页头部 and 主体部分

成对的标签分别叫做:开放标签和闭合标签

二.标签

1.标题标签

复制代码
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

2.段落标签

复制代码
<h1>北京欢迎你</h1>
<p>北京欢迎你,有梦想谁都了不起!</p>
<p>有勇气就会有奇迹。</p>

3.换行标签

<br>

4.水平线标签

<hr/>

5.字体样式标签

​ 加粗

​ 斜体

复制代码
空格	&nbsp;
大于号(>)	&gt;
小于号(<)	&lt;
引号(")	&quot;
版权符号@	&copy;

6.图像标签

复制代码
<img    src="path"   alt="text"    title="text"       wide="x" height="y"   /> 

src :图像地址;

alt :图像的替代文字;

title:鼠标悬停提示文字;

width:图像宽度;

height:图像高度;

复制代码
 实例:   
 <img
src="image/hetao.jpg"
alt="无漂白薄皮核桃"
title="无漂白薄皮核桃"
width="160" height="160"  
/>

内部路径

​ 绝对路径 从根目录开始

​ 相对路径 图片相对于文件的位置在哪

外部路径

​ 需要带http

7.链接标签

复制代码
<a href="path" target="目标窗口位置">链接文本或图像</a>

h ref:链接路径;

target:链接在哪个窗口打开;

复制代码
<a  href="detail.html"  target="_blank">姑娘,欢迎降落在这残酷的世界</a>
<a  href="detail.html"  target="_blank">
    <img src="image/img1.png" alt="姑娘,欢迎降落在这残酷的世界"
           title="姑娘,欢迎降落在这残酷的世界" />
</a>

8.锚链接

复制代码
<a href="#marker">甲位置</a>
跳转到→         
<a name="marker">乙位置</a>

9.功能性链接

复制代码
//QQ打开临时对话
<a href="tencent://message/?Menu=yes&uin=QQ号& Service=300&sigT=45a1e5847943b64c6ff3990f8a9e644d2b31356cb0b4ac6b24663a3c8dd0f8aa12a595b1714f9d45">qq留言</a>
//打电话
<a href = "tel: 电话">目标电话</a>
idconfig查看本机ip地址
相关推荐
陈随易1 小时前
bm2,Node.js 与 Bun 项目部署新选择
前端·后端·程序员
福兮说2 小时前
canvas 旋转图片的六个坑:四角被裁、Math.ceil 多出 1px 黑边、JPG 角发黑、翻转方向反了
前端·javascript·图像处理·canvas
传人once4 小时前
多图片上传预览功能如何写
前端·css·html·jquery·html5
Eric.464 小时前
Wan‑Animate+MiniMax-H3 本地部署 AI 漫剧流水线:8G 显存动作迁移与动态分镜工程实战
前端·人工智能·comfyui·ai漫剧
库拉镜像AI牛牛5 小时前
短剧内容自动化生产:知漫剧工作室落地教程
大数据·服务器·前端·人工智能·语音识别
律宏阔5 小时前
Flutter 列表图片内存优化:CachedNetworkImage 与 ClipRRect 的取舍
前端·flutter
行者全栈架构师5 小时前
【鸿蒙心迹】相册文搜图工程化落地:HarmonyOS 7.0 端侧 AI 检索全链路实战与 5 个踩坑解法
前端
律宏阔6 小时前
Dart 3 Record:解决 Future.wait 异构返回值的类型问题
前端·flutter
Seraphina366 小时前
DVWA(XSS Reflected/Stored High,CSRF Low)
前端·xss·csrf
默_笙7 小时前
🍔 中间件不只是打日志:四个钩子、一次短路,和自带的工具
前端·javascript