html5 块元素、行内元素学习笔记

1.html5

HyperText Markup Language 5.0

超文本标记语言5.0

2.页面基本框架

代码语言：javascript复制

<!--文档类型定义-->
<!DOCTYPE html>
<!--打开html标签-->
<html>
<head>
    <!--包含网页标题，CSS，JavaScript等-->
    <title>标题</title>
</head>
<body>
    <!--网页显示主体-->
    你好鸭
</body>
</html>

3.块元素

块元素包含整个大区域的内容

段落(p)
标题(h1-h6)
水平线(hr)
注释()

块元素——段落(p)

代码语言：javascript复制

<body>
    <p>你好</p>
    <p>hello world</p>-->
</body>

块元素——标题(h1-h6)

代码语言：javascript复制

<body>
    <h1>我是h1</h1>
    <h2>我是h2</h2>
    <h3>我是h3</h3>
    <h4>我是h4</h4>
    <h5>我是h5</h5>
    <h6>我是h6</h6>
</body>

块元素——水平线(hr)

代码语言：javascript复制

<body>
    <p>下边是水平线</p>
    <hr>
    <p>上边是水平线</p>
</body>

块元素——注释()

代码语言：javascript复制

<!--我是注释-->

4.行内元素

行内元素影响少量元素

图像(img)
链接(a)
换行(br)
强调(em, strong)

行内元素——图像(img)

代码语言：javascript复制

<body>
    <img src="img/iloveyou.png" alt="i love you" width="256px" height="256px">
</body>

src属性：图片路径(注意绝对路径和相对路径)

alt属性：描述图片

width：图片的宽度(单位为像素)

height：图片的高度(单位为像素)

行内元素——链接(a)

代码语言：javascript复制

<body>
  <a href="http://www.bilibili.com" target="_blank">bilibili</a> or
  <a href="https://space.bilibili.com/81354679">my acount</a>
</body>

href：链接指向的页面的 URL

target：规定在何处打开链接文档

_blank：在新标签页打开
_self：target默认参数，在本窗口打开

行内元素——换行(br)

代码语言：javascript复制

<body>
  <p>换行在后边<br />换行在前边</p>
</body>

行内元素——强调(em, strong)

代码语言：javascript复制

<body>
  <p>我是<em>倾斜强调</em> , 我是<strong>加粗强调</strong></p>
</body>

em：倾斜强调

strong：加粗强调

height href markup target url

0 人点赞

html5 块元素、行内元素 学习笔记

html5 块元素、行内元素学习笔记