01、html常用标签

来源：互联网发布：linux下批量删除文件编辑：程序博客网时间：2024/05/18 03:27

HTML里所有的标签一共只分为两种大类，即：

1、可视化标签:可以通过css样式表设置标签样式

html body div p img a .....
2、非可视化标签：不可以通过css样式表设置标签样式

head meta style link .....

对标签：

简单的说就是成对出现的标签，例如我们之前学到的<title></title>就是对标签
基本语法：

<标签名属性名="属性值" 属性名="属性值">内容</标签名>

单标签：

单标签：meta link base img input br hr......

对标签：html head body div a p span ..ul li ol dl ....

理解方式：某些标签是不可能包含文本内容和子标签的，这些标签都是单标签

备注：单标签与双标签的区别：

（1）<单标签属性="属性值" 属性="属性值"/>；

（2）<双标签>内容</双标签>

（3）单标签的内容通过属性设置，否则不能对其内容设置样式

（4）双标签的内容只能放在标签中间（<双标签>内容</双标签>），否则不能对其内容设置样式

head中的标签

title, link, meta, script, style等常用标签

body中的标签

body是html网页结构最重要的标签，也叫主体内容标签，一般网页内容均放入此标签组之间。

body 包含文档的所有内容（比如文本、超链接、图像、表格和列表等等）

标签知识点：

1、html注释：
2、h1-h6 （标题标签）块级元素

其中<h1>定义最大标题，<h6>定义最小标题

注意：不能用于段落中文字加粗，不推荐使用align，text-align:文本的对齐方式块级元素

3、p 段落标签块级元素

可以将HTML文档分割成若干段落
4、span 行内元素 (指定宽高无用，由其内部的内容撑开宽高度)，常用来单独改变一行内不某一部分元素的样式等。

5、a 超链接标签（行内元素）：href="地址" target=“跳转的位置”（_blank 新的窗口、_self、当前窗口、_parent、父框架_top、跳出框架）
锚标记

相当于书签，当使用锚标记时，我们可以创建直接跳至该命名锚的链接
语法：创建使用该锚的链接：

<a name=“自定义名字">锚（显示在页面上的文本）</a>

<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="Author" content=""><meta name="Keywords" content=""><meta name="Description" content=""><title>Document</title><style></style></head><body><a href="#baidu">百度</a><a href="#qq">qq</a><a href="#163">网易</a><p>ajgpeja;hejahjel;kahje;lajhl;ewamhew;hlehh</p><p>ajgpeja;hejahjel;kahje;lajhl;ewamhew;hlehh</p><p>ajgpeja;hejahjel;kahje;lajhl;ewamhew;hlehh</p><p>ajgpeja;hejahjel;kahje;lajhl;ewamhew;hlehh</p><p>ajgpeja;hejahjel;kahje;lajhl;ewamhew;hlehh</p><p>ajgpeja;hejahjel;kahje;lajhl;ewamhew;hlehh</p><p>ajgpeja;hejahjel;kahje;lajhl;ewamhew;hlehh</p><p>ajgpeja;hejahjel;kahje;lajhl;ewamhew;hlehh</p><p>ajgpeja;hejahjel;kahje;lajhl;ewamhew;hlehh</p><p>ajgpeja;hejahjel;kahje;lajhl;ewamhew;hlehh</p><p>ajgpeja;hejahjel;kahje;lajhl;ewamhew;hlehh</p><p>ajgpeja;hejahjel;kahje;lajhl;ewamhew;hlehh</p><p>ajgpeja;hejahjel;kahje;lajhl;ewamhew;hlehh</p><a name="baidu"><h2>百度</h2></a><p>ajgpeja;hejahjel;kahje;lajhl;ewamhew;hlehh</p><p>ajgpeja;hejahjel;kahje;lajhl;ewamhew;hlehh</p><p>ajgpeja;hejahjel;kahje;lajhl;ewamhew;hlehh</p><p>ajgpeja;hejahjel;kahje;lajhl;ewamhew;hlehh</p><p>ajgpeja;hejahjel;kahje;lajhl;ewamhew;hlehh</p><p>ajgpeja;hejahjel;kahje;lajhl;ewamhew;hlehh</p><p>ajgpeja;hejahjel;kahje;lajhl;ewamhew;hlehh</p><p>ajgpeja;hejahjel;kahje;lajhl;ewamhew;hlehh</p><p>ajgpeja;hejahjel;kahje;lajhl;ewamhew;hlehh</p><p>ajgpeja;hejahjel;kahje;lajhl;ewamhew;hlehh</p><p>ajgpeja;hejahjel;kahje;lajhl;ewamhew;hlehh</p><p>ajgpeja;hejahjel;kahje;lajhl;ewamhew;hlehh</p><p>ajgpeja;hejahjel;kahje;lajhl;ewamhew;hlehh</p><a href="http://www.qq.com" name="qq"><h2>qq</h2></a><p>ajgpeja;hejahjel;kahje;lajhl;ewamhew;hlehh</p><p>ajgpeja;hejahjel;kahje;lajhl;ewamhew;hlehh</p><p>ajgpeja;hejahjel;kahje;lajhl;ewamhew;hlehh</p><p>ajgpeja;hejahjel;kahje;lajhl;ewamhew;hlehh</p><p>ajgpeja;hejahjel;kahje;lajhl;ewamhew;hlehh</p><p>ajgpeja;hejahjel;kahje;lajhl;ewamhew;hlehh</p><p>ajgpeja;hejahjel;kahje;lajhl;ewamhew;hlehh</p><p>ajgpeja;hejahjel;kahje;lajhl;ewamhew;hlehh</p><p>ajgpeja;hejahjel;kahje;lajhl;ewamhew;hlehh</p><p>ajgpeja;hejahjel;kahje;lajhl;ewamhew;hlehh</p><p>ajgpeja;hejahjel;kahje;lajhl;ewamhew;hlehh</p><p>ajgpeja;hejahjel;kahje;lajhl;ewamhew;hlehh</p><p>ajgpeja;hejahjel;kahje;lajhl;ewamhew;hlehh</p><a name="163"><h2>163</h2></a></body></html>

6、 img :加载图片四要素（width 宽度 height 高度 src 图片地址 alt 解释（只有当图片显示不正常的时候才显示解释文字，否则不显示解释文字））
路劲：绝对路劲相对路径
注意：图片需要自适应的时候，需要在img外加一个div，然后图片的宽度和高度要通过百分百设定，同时div的宽高度也需要通过百分百进行设定。

7、 iframe:内框架创建包含另外一个文档的内联框架（即行内框架）
src="" 里面显示内容的地址 name =" name" 名字 scrolling(yes/no/auto) 滚动条frameborder(1/0）边框

<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="Author" content=""><meta name="Keywords" content=""><meta name="Description" content=""><title>Document</title><style>#ifr{width:500px;height:300px;margin:50px;border:5px solid yellow;}div{width:1000px;height:500px;border:1px solid red;}</style></head><body><a href="http://www.baidu.com" target="show">百度</a><div><iframe id="ifr" name="show" scrolling="yes" frameborder="0" src="http://www.163.com" scrolling="yes"></iframe></div></body></html>

8、 pre:标签最常见的应用就是用来表示计算机源代码

符号类需要借助转义字符，例如：空格   小于 < 大于 >可以导致段落断开，<p>和 <address> 标签绝不能包含在 <pre> 所定义的块里

注意：可以导致段落断开，<p>和 <address> 标签绝不能包含在 <pre> 所定义的块里

9、 div 盒子模型 p i span h1-h6 ul li

0 0