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标签符号也许用字符实体替代

特殊符号

字符实体

示例

空格

&nbsp;

<a href="#">百度</a>&nbsp;|&nbsp;

<a href="#">新浪</a>

大于号(>)

&gt;

如果时间&gt;晚上6点,就坐车回家

小于号(<)

&lt;

如果时间&lt;早上7点,就走路去上学

引号(")

&quot;

W3C规范中,HTML的属性值必须用成对的&quot;引起来

版权符号@

&copy;

&copy; 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)

posted @   Oops_wz  阅读(70)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
点击右上角即可分享
微信分享提示