HTML基本元素

最新推荐文章于 2024-08-07 14:19:47 发布

58065768

最新推荐文章于 2024-08-07 14:19:47 发布

阅读量253

点赞数

文章标签： html 前端

本文链接：https://blog.csdn.net/weixin_58065768/article/details/131380419

版权

一、HTML元素

HTML元素指的是从开始标签( start tag ) 到结束标签( end tag )的所有代码。大多数html元素可以嵌套。

二、HTML文档的基本结构

1、网页声明标准的h5文档

<!DOCTYPE html>

2、一个根标签，一个网页只有一个根标签。网页的部分都写在html标签

<html lang="en">
...
...
...
</html>

3、在根标签内部书写，不会直接显示在网页中，会被浏览器解析

<head>
...
</head>

4、在<head></head>标签内，主要有<meta>标签和<title>标签

    <!-- 元数据 meta -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 选项卡标题 -->
    <title>初始html</title>

5、在根标签内部书写<body></body>标签，总体书写形式如下：

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>标题</title>
    </head>
   
    <!-- 网页主题部分 -->
    <body>
        ...
    </body>

</html>

三、HTML标签属性

1、属性是HTML元素提供的附加信息。一般描述于开始标签，属性可以在元素中添加附加信息，属性总是以名称/值对的形式出现。

2、标签都有四个属性,分别是: id class style title

id：唯一标识一个元素

class：标识一类元素

style：给标签设置样式内联样式、行内样式

title：标签的提示说明

img width height ( img 特有属性-----alt：图片加载失败说明)

注：class属性可以多用class=" "(引号里面可以填入多个class属性 )

id属性只能单独设置id=" "( 只能填写一个多个无效)

四、行内元素和块级元素

4.1 行内元素（ inline element ）

1、特点

1.1 和其他行内元素共享一行

1.2 高度由内部内容决定

1.3 无法通过css属性设置宽高（以及margin和padding）

1.4 不建议行内元素嵌套块级元素

2、常见的行内元素

2.1 <span>行内元素</span>

2.2 <i>斜体效果</ i>

2.3 <em>斜体效果</em>

2.4 <cite> 斜体效果</cite>

2.5 <b>加粗效果 </b>

2.6 <strong> 加粗效果</strong>

2.7 <sub> 下标</sub>

2.8 <sup>上标 </sup>

2.9 <strike> 删除线</strike>

2.10<code> 计算机代码 </code>

注意：code和pre标签是可以嵌套使用的，但是必须注意两者的嵌套顺序

<pre>
    <code>
        var a =  10;
    </code>
</pre>

2.11 <a> 锚点

2.12 <br>换行

2.13 <input>输入框

2.14 <img>图片

2.15 <textarea>多行文本输入框

4.2块级元素

1、简介：

块元素又称块级元素，和其对应的是内联元素。大多数HTML元素被定义为块级元素或内联元素，块级元素在浏览器显示时，通常会以新行来开始（和结束）。

2、特点：

2.1 独占一行

2.2 宽度默认是100%

2.3 可以通过css属性设置宽高（以及margin和padding）

2.4 高度由内部内容决定

3、常见的块级元素

3.1 <div> 块级元素</div>

3.2 <p>段落标签 </p>

3.3 <section> </section>

3.4 <header></header>

3.5 <footer> </footer>

3.6 <article< </article>

3.7 <nav> </nav>

3.8 <address> 地址 </address>

3.9 h1-h6标题

3.10 <hr>水平分割线

3.11 <pre>保存计算机中的源代码的文本 </pre>

3.12 <ul> 无序列表</ul> <ol>有序列表</ol> <dl>定义列表</dl>

3.13 <form>交互表单

4.3块级元素和行内元素的差异

块级元素和行内元素的差异是，块级元素一般都从新行开始，相邻的块级元素会在不同行显示。而当加入了css控制以后，块级元素和行内元素的这种差异就不存在了。比如：给行内元素添加display:block 属性，让他也有每次都从新行开始的属性，即称为块级元素；同样我们可以给块级元素加上display:inline这样的属性，让他也在一行上排列。