Html基本标签 小灰灰 2022-06-15 12:19 187阅读 0赞 **一. 基本结构:** **1. <!DOCTYPE>:** 文档类型声明 告诉浏览器以什么标准来展示和渲染页面 文档声明在Html文件中必须要有,而且必须写在文件最上方。 **如:<!DOCTYPE html>** **2. <html>** <!--Html Html页面最外层的标签 包含所有内容--> **3. <head>** <!--head 在head中声明当前网页的相关信息和引入相关文件--> **a. <meta charset="utf-8" />** <!--meta 声明当前网页的相关信息(编码方式)--> **b. <title>Title</title>** <!--title 声明当前网页的相关信息(页面标签标题)--> **4. <body>** <!--body 用来展示页面内容 所有的页面内容都要写在body内部--> **二. 基本标签** <!--1.块级标签:显示为块状,独占一行。 2.行级标签:宽度和内容等宽。--> **1.块级标签:** <h?></h?>标签 <hr />标签 <p></p>标签 <br/>标签 <pre>标签 <blockquote></blockquote>块引用标签 **a. <h?></h?>标题标签,显示为黑体加粗!!!** 标题标签一共6种: h1~h6:h1最大,h6最小! **如:<h1>这是H1标签</h1>** **<h2>这是H2标签</h2>** **<h3>这是H3标签</h3>** **<h4>这是H4标签</h4>** **<h5>这是H5标签</h5>** **<h6>这是H6标签</h6>** **b. <hr />标签:表示一条水平线。** **如:<hr />** **c. <p></p>标签:表示段落标签。相当于文章中的一段文字。** **如:<p></p>** **d. <br/>标签:换行符。** 注意:在代码中直接换行浏览器是不认识的,必须使用换行符<br/>告诉浏览器 这里要还行。 **如:<br/>** **e. <pre>标签:表示预格式标签。** 会保留代码中的空格、回车等符号,直接在浏览器上显示。常用于在网页中显示代码, 保留代码格式。 **如:<pre></pre>** **f.<blockquote></blockquote>:块引用标签,表明一段话是从其他网站引用的。** 有一个重要属性:cite:""表示这段话的引用来源,常放一个网站的地址。但浏览器不 显示。 **如:<blockquote cite="http:www.jredu100.com"></blockquote>** **g. (列表)** <!--有序列表 OrderList--> <!--无序列表 UnOrderList--> <!--定义列表 DefineList--> **(1) <ol>有序列表:** **如:<ol>** **<li>** **</li>** **</ol>** **(2) <ul>无序列表:** **如:<ul>** **<li>** **</li>** **</ul>** **(3) <dl>定义列表:** **如:<dl>** <!--标题--> **<dt>** **</dt>** <!--描述--> **<dd>** **</dd>** **</dl>** **h. <figure>组合标签:** <figure> <img /> <figcaption> </figcaption> </figure> **2. 行级标签:** <span> </span> <img /> <a> </a> <em> </em> <i> </i> <strong> </strong> <b> </b> <q> </q> <small> </small> **a. <span> </span>标签: 本身无任何样式,是行级标签。** <!--span 本身无任何样式,是行级标签--> **如:<p>商品价格:仅售<span style="font-size: 50px;color: red;">10</span>** **元</p>** **b. <img />标签:加载图片** <!--img src 源 alt 图片加载失败时显示的信息--> **如:<img src="../img/icon.jpg" alt="图片加载失败" />** **c. <a> </a>标签:超链接标签(可以做锚点)** <!--a 超链接 target="\_blank"新的选项卡中打开--> **如: (超链接)<a href="** [**https://www.baidu.com/**][https_www.baidu.com] **" target="\_blank">jredu</a>** **(锚点)<a name="top"></a>** **<div style="background-color: red;height: 1500px;">我是一个** **div</div>** **<a href="\#top">返回顶部</a>** **d. <em> </em>标签:倾斜而且强调** 不仅倾斜,而且强调,浏览器可以识别 **如:<em>标签</em>** **e. <i> </i>标签:倾斜** 仅倾斜,看起来和em标签,但是没有强调作用 **如:<i>标签</i>** **f. <strong> </strong>标签:加粗且强调** **如:<strong>标签</strong>** **g. <b> </b>标签:加粗** 仅加粗,没有强调 **如:<b>标签</b>** **h. <q> </q>标签:短引用标签** 和行级引用标签<blockquote>类似,但是内容自动加双引号 **如:<q>谦虚使人进步--毛泽东</q>** **i. <small> </small>标签:比一般文字小** **如:<small>标签</small>** 练习如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>常用页面布局</title> </head> <body> <h1>商品信息</h1> <h2>产品类别</h2> <hr /> <ul> <li>数码 <ul> <li>笔记本</li> <li>手机</li> <li>家电</li> </ul> </li> <li>美容</li> <li>服装</li> </ul> <hr /> <dl> <dt>联想电脑</dt> <dd>产品型号:联想IdeaPad Y450A-TFU(NBA纪念版)</dd> <dd>价格:4999元</dd> <dd>所在地:北京</dd> </dl> <hr /> <h2>购买流程</h2> <ol> <li>确认购买信息</li> <li>付款到贵美</li> <li>确认收货</li> <li>付款给商家</li> <li>双方评价</li> </ol> </body> </html> 运行结果: **![Center][]** [https_www.baidu.com]: https://www.baidu.com/ [Center]: /images/20220615/e4a3c04c1004453a83bc231f2dbc8af4.png
还没有评论,来说两句吧...