标签：-- 标签 前端 基础 标题 跳转 day1 id 属性
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>
标签：--,标签,前端,基础,标题,跳转,day1,id,属性 来源： https://blog.csdn.net/z2431435/article/details/112776520
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。