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)

相关推荐
晚霞的不甘5 小时前
Flutter for OpenHarmony天气卡片应用:用枚举与动画打造沉浸式多城市天气浏览体验
前端·flutter·云原生·前端框架
xkxnq5 小时前
第五阶段:Vue3核心深度深挖(第74天)(Vue3计算属性进阶)
前端·javascript·vue.js
三小河5 小时前
Agent Skill与Rules的区别——以Cursor为例
前端·javascript·后端
Hilaku5 小时前
不要在简历上写精通 Vue3?来自面试官的真实劝退
前端·javascript·vue.js
三小河5 小时前
前端视角详解 Agent Skill
前端·javascript·后端
Aniugel5 小时前
单点登录(SSO)系统
前端
鹏多多5 小时前
移动端H5项目,还需要react-fastclick解决300ms点击延迟吗?
前端·javascript·react.js
serioyaoyao5 小时前
上万级文件一起可视化,怎么办?答案是基于 ParaView 的远程可视化
前端
万少6 小时前
端云一体 一天开发的元服务-奇趣故事匣经验分享
前端·ai编程·harmonyos
WindrunnerMax6 小时前
从零实现富文本编辑器#11-Immutable状态维护与增量渲染
前端·架构·前端框架