标签的标(标签li)

lxf2023-03-17 18:09:01

1.基本标签

<!DOCTYPE html> <!--表示文本类型--> <html> <!--<html></html>表示创建一个html文档--> <head> <!--<head></head>设置文档标题和其它在网页中不显示的信息--> <title>标题</title> <!--<title></title>设置文档的标题,就是最上方的名字--> </head> <body> <!--<body></body>设置文档的内容--> <p>原创作者:雨点的名字</p> </body> </html>
2.body内常用标签
<!----> 注释标签快捷键:Ctrl+Shift+/, 我用的是myeclipse
<br> 换行标签
<hr/> 横线标签
<p></p> 表示段落
<h1></h1> 表示标题,分为h1到h6字体依次递减

& ltstrong & gt& lt/strong & gt;和

& ltem & gt& lt/em & gt;和

& ltdel & gt& lt/del & gt;和

& ltins & gt& lt/ins & gt;和

& ltpre & gt& lt/pre & gt;具有有用的预编译格式的标记

<!DOCTYPE html> <head> <title>来吧</title> </head> <body> <!--这是一个注释标签,页面上你看不到--> <h4>我是标题哦</h4> <hr/> <p>我是p标签<b>我自动加粗的</b></p><br/> <s>我是删除线</s> <u>我是下划线</u><br/> <pre> 我是预编译, 我怎么输它就怎么显示</pre> </body> </html>
运行结果如下:

标签的标(标签li)

3.图片标签

<img></img>& ltimg & gt& lt/img & gt;

效果如下:

<!DOCTYPE html> <head> <title>美女图片</title> </head> <body> <img src="first.jpg" title="就问你美不美" alt="这里显示第一张图" width="200" height="300"> <img src="second .jpg" title="身材太好了" alt="这里显示第二张图" width="200" height="300"> </body> </html>

注解:在该<img> </img>标签中常用src属性表示图片的来源和名称;用title属性设置鼠标放到图片上时显示的文字;用alt属性设置当图盘无法正常显示时对图片的描述;用width和height属性设置图片的宽和高注意:在这个

效果如下:

标签的标(标签li)

4:链接标签
(1)基本链接介绍

& lta & gt& lt/a & gt;标签实施超链接

<!DOCTYPE html> <html> <head> <title>我是a标签</title> </head> <body> <!-- 版权声明--> <a href="http://www.baidu.com/" title="百度一下,你就知道" target="_self">百度</a> <a href="http://www.163.com" title="网易新闻" target="_blank">网易</a> </body> </html

注意:使用时

详细信息:如果一个页面中的所有超链接都以相同的方式跳转,您可以在

& lt基本目标= & quot_ self & quot& gt& lt/base & gt;代表此网页的所有超链接都显示在原始窗口中。

& lt基本目标= & quot_ blank & quot& gt& lt/base & gt;代表此页面的所有超链接都显示在新窗口中。

(2)页面定位是通过标签实现的。

案例:单击返回页面顶部。

<!DOCTYPE html> <html> <head> <title>网页定位</title> </head> <body> <p id="top">这里是顶部</p> <p>原创作者:蜗牛</p> <p>原创作者:蜗牛</p> <a href="#top">返回顶部</a> </body> </html>

注意:当你点击返回顶部时,页面会被定位在id = "top "标签的位置,它会被定位在顶部,这是通过id属性实现的。这里页面的东西很少,没有影响。你要测试你能在这两者之间添加很多其他的标签,所以效果很明显。

(3)通过标签下载。

注意:您可以通过单击链接自动下载文档并压缩文件。当你无法直接下载图片时,页面会在点击图片后打开图片而不是下载。

<!DOCTYPE html> <html> <head> <title>下载</title> </head> <body> <a href="6用户注册项目.docx">点击下载文档</a> <a href="2017-1-4Jquery.rar">点击下载压缩文件</a> <a href="second .jpg">点击图片</a> </body> </html>

如果要下载图片,需要再加一步;

<body> <a href="first.jpg" download="first.jpg">点击图片</a> <!--download实现图片下载功能--> </body>

5: HTML框架

<!DOCTYPE html> <head> <title>Html框架</title> <!--注意;搭建框架是不能出现<body></body>标签的,所以要先删除<body>标签--> </head> <frameset rows="25%,75%"> <!--frameset用来定义一个框架集 ,row代表有上下两个界面,占比为25%和75%--> <frame src="head.html" name="heand"/> <!--frame代表一个界面,界面内容为head.html中内容--> <frameset cols="25%,75%"> <!--在下面在定义一个框架级,再分为左右两部分 cols代表列--> <frame src="left.html" name="left"/> <frame src="center.html" name="body"/> <!--定义name="body"是有意义的,方便调用--> </frameset> </frameset><noframes></noframes> <!--noframes还未知意义,删了照样运行所以知道的朋友可以给我留言--> </html>

下面是3个框架中的html

1:head.html

<!DOCTYPE html> <head> <title>head.html</title> </head> <body> <h1 align="center" style="color:#FF0000; font-size:50 ">欢迎进入本管理系统</h1> </body> </html>

2:left.html

<!DOCTYPE html> <head> <title>无标题文档</title> </head> <body> <a href="https://www.baidu.com" target="body">百度</a> <!--这里target="body",代表当点击百度时,内容会在name="body"的界面中出现--> <a href="http://www.163.com" target="body">网易</a> </body> </html>

3:center.html

<!DOCTYPE HTML> <html> <head> <title>center.html</title> </head> <body> </body> </html>

运行结果如下:

标签的标(标签li)





更多html标签详解(1)相关文章请关注AdminJS!