收藏
天蓬老师批改状态：合格
老师批语：作业应该使用markdown编写 , 不需要添加运行功能, 直接配上运行效果图就行
<html lang="en"> <!--头元素,它的内容是不会在页面中显示出来的,这是给浏览器和搜索引擎使用的--> <head> <!-- 当前文档字符编码集--> <meta charset="UTF-8"> <!-- viewport:视口：是指当前文档在浏览器中可以被用户看到的部分--> <!-- device-width:当前显示器屏幕的宽度--> <!-- inital-scale=1.0 :缩放比例为1.0--> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <!-- 页面标题--> <title>Document</title> </head> <body> <!-- body 中的内容是 主体元素， 这些内容会在页面中展示给用户看--> <!--所有标签全部小写，html不区分大小写标签--> <h2></h2> </body> </html>
点击 "运行实例" 按钮查看在线实例
注释：<!--本符号的意思是--> 在html中 作 注释使用，让其他能够看懂代码的含义
元素和属性
HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。需要闭合 eg：<h2></h2>
<!-- 元素是 由双标签表示--> <div> 里面放置元素</div>
<!-- 元素是 由双标签表示--> <div> 里面放置元素</div> <div> <p> <span> <a href=""> 结构示例，层级包裹 </a> </span> </p> </div> <!--一般网站结构--> <!-- 头部、页眉--> <div id="header"> <ul> <li></li> </ul> </div> <!--页面主体--> <div id="main"> <ui> <li> </li> </ui> </div> <!--页面页脚--> <div id="footer"> <ul> <li></li> </ul> </div>
点击 "运行实例" 按钮查看在线实例
一、什么是html语义化标签
语义化标签：让标签具有含义，让看到代码的人看到标签就知道 这个代码大概写的是什么
二、语义化标签的特点
代码结构清晰，方便阅读，有利于团队合作开发。
方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以语义的方式来渲染网页。
有利于搜索引擎优化（SEO）
常见的语义化标签 <!--<title></title>定义文档标题--> <!--<h1>to<h6>定义html文档标题--> <!-- <p></p>定义段落--> <!-- <br>定义简单的拆行--> <!-- <acronym title=""></acronym>定义只取首字母的缩写--> <!--<abbr title=""></abbr>定义缩写--> <!--<address></address>定义文档作者或者拥有者的联系信息--> <!--<b></b>定义粗文本--> <!--<bdi></bdi>定义文本的方向，使其脱离周围文本的方向设置--> <!--<bdo dir=""></bdo>定义文字方向--> <!--<big></big>定义大号文本--> <!--<blockquote></blockquote>定义长的引用--> <!--<center></center>定义居中文本--> <!--<cite></cite>定义引用--> <!--<code></code>定义计算机代码文本--> <!--<del></del>定义被删去文本--> <!--<dfn></dfn>定义定义项目--> <!--<em></em>强调文本--> <!--<font></font>定义文本 的字体尺寸颜色--> <!--<i></i>定义斜体文字--> <!--<ins></ins>定义被插入文本--> <!--<kbd></kbd>定义键盘文本--> <!--<mark></mark>定义有记号的文本--> <!--<meter></meter>定义预定义范围的度量--> <!--<pre></pre>定义预格式文本--> <!--<progress></progress>定义任何类型的任务进度-->
链接元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>链接与列表元素</title> </head> <body> <!--target="_blank" 在新的页面中打开百度首页--> <a href="baidu.com" target="_blank">百度</a> <!--下载文件 自动重命名--> <a href="345.txt" download="html.txt">午后残影</a> <!--打电话--> <a href="tel:13060055730">售后服务热线</a> <!--发邮件--> <a href="mailto:236641104@qq.com">发邮件</a> </body> </html>
点击 "运行实例" 按钮查看在线实例
列表元素
无序列表
<dl> <dt>计算机</dt> <dd>用来计算的仪器 ... ...</dd> <dt>显示器</dt> <dd>以视觉方式显示信息的装置 ... ...</dd> </dl>
点击 "运行实例" 按钮查看在线实例
自定义列表
<dl> <dt>计算机</dt> <dd>用来计算的仪器 ... ...</dd> <dt>显示器</dt> <dd>以视觉方式显示信息的装置 ... ...</dd> </dl>
点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
