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)

相关推荐
WebDesign_Mu21 小时前
为了庆祝2025英雄联盟全球总决赛开启,我用HTML+CSS+JS制作了LOL官方网站
javascript·css·html
@PHARAOH21 小时前
WHAT - 前端性能指标(交互和响应性能指标)
前端·交互
噢,我明白了21 小时前
前端js 常见算法面试题目详解
前端·javascript·算法
im_AMBER21 小时前
Web 开发 30
前端·笔记·后端·学习·web
Jonathan Star21 小时前
Webpack 打包优化与骨架屏结合:双管齐下提升前端性能与用户体验
前端·webpack·ux
做好一个小前端21 小时前
后端接口获取到csv格式内容并导出,拒绝乱码
前端·javascript·html
第七种黄昏21 小时前
前端面试-箭头函数
前端·面试·职场和发展
Youyzq21 小时前
前端box-shadow出现兼容性问题如何处理
前端
携欢1 天前
PortSwigger靶场之将 XSS 存储到onclick带有尖括号和双引号 HTML 编码以及单引号和反斜杠转义的事件中通关秘籍
前端·html·xss
三小河1 天前
工作中的Ai工具汇总
前端