html--前端基本标签内容讲解

body里面分为两类标签:块级标签和内联标签。

1、块级标签:<p><h1><table><ol><ul><form><div>

2、内联标签:<a><input><img><sub><sup><textarea><span>

块级标签元素的特点
  ① 总是在新行上开始;
  ② 高度,行高以及外边距和内边距都可控制;
  ③ 宽度缺省是它的容器的100%,除非设定一个宽度。
  ④ 它可以容纳内联元素和其他块元素

内联标签元素的特点
  ① 和其他元素都在一行上;
  ② 高,行高及外边距和内边距不可改变;
  ③ 宽度就是它的文字或图片的宽度,不可改变
  ④ 内联元素只能容纳文本或者其他内联元素

对行内元素,需要注意如下 
  设置宽度width 无效。
  设置高度height 无效,可以通过line-height来设置。
  设置margin 只有左右margin有效,上下无效。
  设置padding 只有左右padding有效,上下则无效。注意元素范围是增大了,但是对元素周围的内容是没影响的。

 1、基本标签

  <hn>: n的取值范围是1~6; 从大到小. 用来表示标题.

  <p>: 段落标签. 包裹的内容被换行.并且也上下内容之间有一行空白.

  <b> <strong>: 加粗标签.

  <strike>: 为文字加上一条中线.

  <em>: 文字变成斜体.

扫描二维码关注公众号,回复: 7803329 查看本文章

  <sup>和<sub>: 上角标 和 下角表.

  <br>:换行.

  <hr>:水平线

   <div><span>

示例:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta http-equiv="refresh" content="2">
 6     <meta name="keywords" content="前端,html,网页">
 7     <title>这是做的第一个网页</title>
 8 </head>
 9 <body>
10 <h1>yusheng_liang</h1>
11 <h2>yusheng_liang</h2>
12 <h3>yusheng_liang</h3>
13 <h4>yusheng_liang</h4>
14 <h5>yusheng_liang</h5>
15 <h6>yusheng_liang</h6>
16 <hr>
17 <p>这是第一个段落</p>
18 <p>这是第二个段落</p>
19 <hr>
20 <b>文本字体加粗方法一</b>
21 <br>
22 <strong>文本字体加粗方法二</strong>
23 <hr>
24 <p>商品原价:<strike>100</strike>商品活动价:50</p>
25 <hr>
26 <em>我是一个斜体字标签</em>
27 <hr>
28 <p>2<sup>3</sup>我是一个上角标</p>
29 <p>O<sub>2</sub>我是一个下角标</p>
30 <hr>
31 我是一个大于号:&lt;
32 我是一个小于号:&gt;
33 我是一个空格:&nbsp;
34 
35 </body>
36 </html>

结果图示:

2、图形标签<img>

  src: 要显示图片的路径.

  alt: 图片没有加载成功时的提示.

  title: 鼠标悬浮时的提示信息.

  width: 图片的宽

  height:图片的高 (宽高两个属性只用一个会自动等比缩放.)

<img src="http.png" height="283px" width="531px" title="模拟http请求">

图示:

3、<a>标签:

3.1、超链接标签:

  href:要连接的资源路径 格式如下: href="http://www.baidu.com" 

  target: _blank : 在新的窗口打开超链接. 框架名称: 在指定框架中打开连接内容.

  name: 定义一个页面的书签.

  用于跳转 href : #书签名称.

<a href="http://www.baidu.com" target="_blank">百度一下</a>

3.2、锚标签:常用于从网页底部快速回到顶部设置

本页标签跳转,通过定义ID来进行查找到内容

<a href="#a">李白</a>
<div id="a" style="background-color: #197991">床前明月光,<br>疑是地上霜。<br>举头望明月,<br>低头思故乡。</div>

猜你喜欢

转载自www.cnblogs.com/june-L/p/11828613.html