HTML基本结构与常用标签
HTML基本结构
基础样式
<!DOCTYPE html> 声明浏览器使用什么规范 <html> <head> <meta charst=”utf-8”> 声明页面编码格式(常用gb2312中文,uft-8) <meta name=”keywords” content=”*****”> keywords 搜索关键字 content内容用于seo收录 <meta name=”desciption” content=”******”>desciption 页面内容描述 content内容用于seo收录 <title>标签标题</title> </head> <body> 页面内容 </body> </html>
常用基本标签
标题标签
h1-h6标签一级比一级小(独占一行),h6之后7...标签不生效 (浏览器会自动添加h6标签)
<h1>标题1</h1> . . <h6>标题6<h6>
段落标签
p标签 段落标签(独占一行)
<p>1111111111</p> <p>1111111111</p>
换行标签,水平线标签
<br>换行 <hr>换行并添加一条水平线
两标签均为单标签
字体样式标签
<strong>粗体</strong> <em>斜体</em>
标签可嵌套使用
<p> <strong></strong> <em></em> <strong><em>加粗斜体</em></strong> </p>
特殊字符
内容中多个空格仅显示一个需添加字符实体实现多个空格
部分符号涉及html标签符号也许用字符实体替代
特殊符号 |
字符实体 |
示例 |
空格 |
|
<a href="#">百度</a> | <a href="#">新浪</a> |
大于号(>) |
> |
如果时间>晚上6点,就坐车回家 |
小于号(<) |
< |
如果时间<早上7点,就走路去上学 |
引号(") |
" |
W3C规范中,HTML的属性值必须用成对的"引起来 |
版权符号@ |
© |
© 2003-2013北大青鸟 |
图像标签
<img src=”图片地址” alt=”图片不显示时替代文字” title=”鼠标悬停文字” width=”宽度” heigt=”高度”>
src与alt必选
链接标签
<a href=”链接路径” target=“打开窗口”>链接文本or图像</a>
锚链接
从本页面的甲位置跳转到本页中的乙位置
<a href="#marker">甲位置</a> <a name="marker">乙位置</a>
功能链接
<a href=”mailto:xxx@xxx.com”>
块元素和行元素
块元素无论内容多少独占一行 (p,h)
行元素根据内容撑开宽度,元素并排排列不分行(h1,h2,img,a)
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库