HTML5基础

1.HTML网页结构

<!DOCTYPE html>

<html>

<head lang="en">

<meta charset="utf-8"/>

<title>我的第一个网页</title>

</head>

<body>

我的第一个网页

</body>

</html>

2.基本标签

|-------------|------------------------------------|--------------------------------------------------|
| 名称 | 标签 | 示例 |
| 标题标签 | <h1>~<h6> | <h1>静夜思</h1> |
| 段落和换行标签 | <p>...</p><br/> | <p>床前明月光<br/>疑是地上霜</p> |
| 水平线标签 | <hr/> | <hr/> |
| 斜体 | <em>...</em> | <em>举头望明月</em> |
| 字体加粗 | <strong>...</strong> | <strong>低头思故乡</strong> |

3.特殊符号

|-----------------|---------------------|---------------------------------------------------------------------------------------------------------------------|
| 特殊符号 | 字符实体 | 示例 |
| 空格 | &nbsp; | <ahref="#">百度</a>&nbsp;|&nbsp; <ahref="#">新浪</a> |
| 大于号**(>)** | &gt; | 如果时间**&gt;晚上6点,就坐车回家** |
| 小于号
(<)** | &lt; | 如果时间
&lt;早上7点,就走路去上学** |
| 引号
(")** | &quot; | **W3C
规范中,HTML的属性值必须用成对的**&quot;引起来 |
| 版权符号
©** | &copy; | &copy;2018课工场 版权所有 |

4.图像标签

语法 <img src="path" alt="text" title="text" width="x" height="y"/>

src图像地址 alt图像的替代文字 width图像宽度 height图像高度

5.链接标签

语法 <a herf="" target="">链接文本或图像</a>

6.超链接的应用

1、页面间链接:A页到B页,网上常见链接

<a href="detail.html" target="_blank">姑娘,欢迎降落在这残酷的世界</a>

2、锚链接:跳至自身固定位置,或A页跳到B页固定位置,需锚标记

创建跳转标记 <a name="marker">乙位置</a>

创建跳转标签 <a herf="#marker">甲位置</a>

3、功能性链接:电子邮件、QQ、MSN等链接

<a href="mailto:ke@kgc.cn">联系我们</a>

7.行内元素与块元素

行元素:无论内容多少,该元素独占一行(h1,p)

块元素:内容撑开宽度,左右都是行内元素的可以排在一行(a,strong,em)

相关推荐
前端工作日常1 天前
我学习到的AG-UI的概念
前端
韩师傅1 天前
前端开发消亡史:AI也无法掩盖没有设计创造力的真相
前端·人工智能·后端
XiaoYu20021 天前
第12章 支付宝SDK
前端
双向331 天前
RAG的下一站:检索增强生成如何重塑企业知识中枢?
前端
拖拉斯旋风1 天前
从零开始:使用 Ollama 在本地部署开源大模型并集成到 React 应用
前端·javascript·ollama
asing1 天前
🤯 为什么我的收银台在鸿蒙系统“第一次返回”死活拦不住?一次差点背锅的排查实录
前端·harmonyos
德育处主任1 天前
『NAS』在群晖部署图片压缩工具-Squoosh
前端·javascript·docker
Hao_Harrision1 天前
50天50个小项目 (React19 + Tailwindcss V4) ✨| ThreeDBackgroundBoxes(3D背景盒子组件)
前端·3d·typescript·react·tailwindcss·vite7
加个鸡腿儿1 天前
经验分享2:SSR 项目中响应式组件的闪动陷阱与修复实践
前端·css·架构
心.c1 天前
如何基于 RAG 技术,搭建一个专属的智能 Agent 平台
开发语言·前端·vue.js