HTML:超文本标记语言
HTML(内容)CSS(修饰)JavaScript(功能)
标记:<>
注释:<!--注释内容-->
一.HTML例子
<!DOCTYPE html>
<html lang="en">
<head> <!--注释:头部信息,不需要显示的内容 -->
<meta charset="utf-8"><!--注释:中文编码格式-->
<title>html练习</title><!--注释:窗口显示信息-->
</head>
<body>
<div style="width:80%;color:red;margin:100px;auto;"><!--CSS格式-->
<h1>h1写标题</h1>
<p>p写段落</p>
</body>
</html>
二.常用标记
1.标题标记
h1~h6
语法:双标记<h1>显示内容</h1>
<h1>我的第一个标题</h1>
<h2>我的第二个标题</h2>
<h3>我的第三个标题</h3>
<h4>我的第四个标题</h4>
<h5>我的第五个标题</h5>
<h6>我的第六个标题</h6>
1.自动加粗2.大小从h1到h6逐渐变小3.每个标签独占一行,整体从上到小依次排列
2.段落标记
<!--段落-->
<!--独占一行,从上到下排列,上下有间距-->
<p>我的第一个段落。</p>
3.图像标记:img
代码:
<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2345536007,2371784920&fm=26&gp=0.jpg" width="100" height="100" alt="孙笑川的美图">
<!--在 HTML 中,图像由<img> 标签定义。
<img/>是单标签,斜杠加后面
要在页面上显示图像,你需要使用源属性(src)。src 指 "source"。源属性的值是图像的路径
属性:
src引入路径属性(重要)
相对路径:../返回上一级
width宽 height高 取值数字 不建议用属性改变宽高
alt 属性用来为图像定义一串预备的可替换的文本,替换文本属性的值是用户定义的。
<img src="boat.gif" alt="Big Boat">
在浏览器无法载入图像时,显示alt文本属性
-->
多张图片并排放出现分割的白条(会影响尺寸)
代码:
<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2345536007,2371784920&fm=26&gp=0.jpg" width="100" height="100" alt="孙笑川的美图"><img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2345536007,2371784920&fm=26&gp=0.jpg" width="100" height="100" alt="孙笑川的美图">
<!--图片间用回车隔开会有白条隔开,需要放在同一行-->
<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2345536007,2371784920&fm=26&gp=0.jpg" width="100" height="100" alt="孙笑川的美图">
4.超链接标记:a
<a>网页显示内容</a>
作用:用户点击后跳转到指定位置
属性:href跳转到地址
格式:<a href="url">链接文本</a>
href = "#id"实现锚点功能,电梯效果,返回本页面的其他指定位置id需要在标签处加入id=""
<p id="p1">我的第一个段落。</p>
<a href="#p1">跳转到p标签</a>
href = "#"只有#没有别的值就是返回顶部
target功能
<a href="https://www.bilibili.com/video/BV1bs411M7i1?from=search&seid=2514703813258322309" target=target_self>天皇震怒!</a>
<!--
浏览器不能打开压缩包(或其他浏览器不能打开的资源),所以跳转到压缩包会自动下载(没法打开)
target=_self:原窗口跳转
target=_blank:打开新窗口跳转
target_parent:文档载入父窗口或者包含来超链接引用的框架的框架集。如果这个引用是在窗口或者在顶级框架中,那么它与目标 _self 等效。
target_top:文档载入包含这个超链接的窗口,用 _top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口。
_blank 在新窗口中打开被链接文档。
_self 默认。在相同的框架中打开被链接文档。
_parent 在父框架集中打开被链接文档。
_top 在整个窗口中打开被链接文档。
framename 在指定的框架中打开被链接文档。在本页面想跳转的地方跳转设置id(唯一标识)<a id="xx"> 新建跳转,连接为href="#xx"
id相同的情况下跳转到第一个指定id的地方
如果target的值错误,只会打开一次新窗口,后面的同样操作基于新打开的那个窗口,即第一次操作起到blank效果,后面起到self效果
-->
代码:
<a href="https://www.bilibili.com/video/BV1bs411M7i1?from=search&seid=2514703813258322309">天皇震怒!</a>
<!--浏览器不能打开压缩包,所以跳转到压缩包会自动下载(没法打开)-->
5.列表
有序列表ol order list
无序列表ul unorder list
列表项li
语法:
<ol>
<li></li>
<li></li>
<li></li>
</ol>
代码:
<ol>
<li>李吼辣么大声干什么嘛</li>
<li>那你去物管啊</li>
<li>你再骂!</li>
<li>阿米西诺!</li>
</ol>
完整代码:
<!DOCTYPE html>
<html lang="en">
<head><!--注释:头部信息,不需要显示的内容-->
<meta charset="utf-8"><!--注释:中文编码格式-->
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>菜鸟教程</title><!--注释:窗口显示信息-->
</head>
<body>
<!--
CSS格式、标签通用属性
id属性:唯一标识
style:样式属性
class:类属性
title属性:所有标签都有的属性,鼠标悬停(放在页面内容上)时浮现出值
-->
<div style="width:80%;color:red;border: 0; margin:0;auto;">
<!--1.自动加粗2.大小从h1到h6逐渐变小3.每个标签独占一行,整体从上到小依次排列-->
<h1>我的第一个标题</h1>
<h2>我的第二个标题</h2>
<h3>我的第三个标题</h3>
<h4>我的第四个标题</h4>
<h5>我的第五个标题</h5>
<h6>我的第六个标题</h6>
<!--段落-->
<!--独占一行,从上到下排列,上下有间距-->
<p id="p1">我的第一个段落。</p>
<p>我的第二个段落。</p>
<!--在 HTML 中,图像由<img> 标签定义。
<img/>是单标签,斜杠加后面
要在页面上显示图像,你需要使用源属性(src)。src 指 "source"。源属性的值是图像的路径
属性:
src引入路径属性(重要)
相对路径:../返回上一级
width宽 height高 取值数字 不建议用属性改变宽高
-->
<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2345536007,2371784920&fm=26&gp=0.jpg" width="100" height="100" alt="孙笑川的美图" title="孙哥的美貌"><img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2345536007,2371784920&fm=26&gp=0.jpg" width="100" height="100" alt="孙笑川的美图" title="孙哥的美图">
<!--图片间用回车隔开会有白条隔开,需要放在同一行-->
<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2345536007,2371784920&fm=26&gp=0.jpg" width="100" height="100" alt="孙笑川的美图">
<!--
多图片显示规则:大小足够不换行,从左往右依次排列,一行显示不下,自动换行
alt 属性用来为图像定义一串预备的可替换的文本,替换文本属性的值是用户定义的。
<img src="boat.gif" alt="Big Boat">
在浏览器无法载入图像时,显示alt文本属性
-->
<br><!--换行-->
<!--
a跳转作用:用户点击后跳转到指定位置
属性:href跳转到地址
href = "#id"实现锚点功能,电梯效果,返回本页面的其他指定位置id需要在标签处加入id=""
href = "#"只有#没有别的值就是返回顶部
-->
<a href="https://www.bilibili.com/video/BV1bs411M7i1?from=search&seid=2514703813258322309" target=target_self>天皇震怒!</a>
<a href="https://www.bilibili.com/video/BV1bs411M7i1?from=search&seid=2514703813258322309" target="target_parent">天皇震怒!</a>
<a href="https://www.bilibili.com/video/BV1bs411M7i1?from=search&seid=2514703813258322309" target=_top>天皇震怒!</a>
<a href="https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=%E5%AD%99%E7%AC%91%E5%B7%9D&step_word=&hs=0&pn=14&spn=0&di=198330&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&istype=2&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=-1&cs=2345536007%2C2371784920&os=480719738%2C3786853738&simid=3510676177%2C363014778&adpicid=0&lpn=0&ln=1600&fr=&fmq=1610954730893_R&fm=result&ic=&s=undefined&hd=&latest=©right=&se=&sme=&tab=0&width=&height=&face=undefined&ist=&jit=&cg=&bdtype=0&oriquery=&objurl=https%3A%2F%2Fgimg2.baidu.com%2Fimage_search%2Fsrc%3Dhttp%3A%2F%2Fi2.hdslb.com%2Fbfs%2Fface%2F4205f5a7fad0a3b122c10c8b3568cffb2848ec69.jpg%26refer%3Dhttp%3A%2F%2Fi2.hdslb.com%26app%3D2002%26size%3Df9999%2C10000%26q%3Da80%26n%3D0%26g%3D0n%26fmt%3Djpeg%3Fsec%3D1613549469%26t%3Daefaa0cbcb897247d13470b2d0d80217&fromurl=ippr_z2C%24qAzdH3FAzdH3F4_z%26e3Bktstktst_z%26e3Bv54AzdH3Fet1j5AzdH3Fwecbbcdcd_z%26e3Bip4s&gsm=f&rpstart=0&rpnum=0&islist=&querylist=&force=undefined" target=_blank>跳转到图片 </a>
<a href="#p1">跳转到p标签</a>
<!--
浏览器不能打开压缩包(或其他浏览器不能打开的资源),所以跳转到压缩包会自动下载(没法打开)
target=_self:原窗口跳转
target=_blank:打开新窗口跳转
target_parent:文档载入父窗口或者包含来超链接引用的框架的框架集。如果这个引用是在窗口或者在顶级框架中,那么它与目标 _self 等效。
target_top:文档载入包含这个超链接的窗口,用 _top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口。
_blank 在新窗口中打开被链接文档。
_self 默认。在相同的框架中打开被链接文档。
_parent 在父框架集中打开被链接文档。
_top 在整个窗口中打开被链接文档。
framename 在指定的框架中打开被链接文档。在本页面想跳转的地方跳转设置id(唯一标识)<a id="xx"> 新建跳转,连接为href="#xx"
id相同的情况下跳转到第一个指定id的地方
如果target的值错误,只会打开一次新窗口,后面的同样操作基于新打开的那个窗口,即第一次操作起到blank效果,后面起到self效果
-->
</div>
<!--
有序列表ol order list
有序type:取值默认1,还有A,a,I
有序列表比无序列表多一个起止位置 start ="",“”中必须是数字,不然第一个是0,后面按照tpye的值开始按顺序排序
如果start的值很大,如type = "A" start="25",Y,Z后出现AA,AB
<ol type = "1" start="5"> 从5开始
无序列表ul unorder list
无序type属性:列表标识的类型 取值 默认disc实心圆 square实心方形 circle 空心圆
列表项li
语法:
<ol>
<li></li>
<li></li>
<li></li>
</ol>
列表项:独占一行,从上到下排序,上下,左侧有间距
<dl>
<dt></dt>
<dd></dd>
</dl>
-->
<ol type = "A" start="1">
<li>李吼辣么大声干什么嘛</li>
<li>那你去物管啊</li>
<li>你再骂!</li>
<li>阿米西诺!</li>
</ol>
<dl>
<dt>孙笑川</dt>
<dd>日本天皇,又叫孙狗</dd>
</dl>
</body>
</html>