html常用标签1

Rlyya

已于 2024-03-01 19:30:21 修改

阅读量615

点赞数 21

文章标签： html 前端

于 2024-02-29 19:45:07 首次发布

本文链接：https://blog.csdn.net/Rlyya/article/details/136378757

版权

常用标签

<title>网站的总标题

1.标题标签 h1~h6

语义：用标题标签包裹的内容就是标题

标题标签也会帮助seo进行推广，h1到h6,语义是逐步降低的，

h1的语义最重，所以一般情况下，一个页面就用一个h1

常用的h1-h3

默认样式：字体会加粗，从h1-h6字体大小是逐步变小，会独占一行

关注语义，而不是样式

2.段落标签<p></p>，段落标签用于表示内容中的一个自然段

语义：用段落标签进行包括，其内容就表示是一个段落

默认样式:会独占一行，段落与段落之间有较大的间距

3.hgroup标签<hgroup> </hgroup> 用来为标题分组，可以将一组相关的标题同时放入到hgroup

4.强调标签

em标签用于表示语音语调的一个加重，行内元素（inline element）

strong表示强调，重要内容,强调

em和strong都不会独占一行

<!-- 面试题：html中有两个强调标签，它们的区别是什么？

样式上：em强调，字体会变斜体

strong强调，字体会加粗

语义上：em是语音语调的强调

strong是具体内容的强调

在实际的开发过程中，一般不做区分，两个强调标签都可以使用 -->

eg：

 <p>禀承<strong>在</strong> 定得颜 ，<em>我</em> 略。
<em>L</em> orem ipsum dolor sit ame <strong>t</strong> .</p>
    <p>你可<em>真</em> <strong>帅</strong> 呀！</p>

5.center 居中效果

<p>到憾文韩一得决位孔。</p>

</center>

6. q 表示短引用

默认样式：会在文本外面加双引号

不会独占一行

<q>他低斯哥处生有书系。</q>

<q>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Placeat, dolore.</q>

7.换行标签 br 强制换行

<p>

秦互气为游子的事皇得，<br />

云不巴仃分投忧娟喜力给也韩战将，<br />

会当今少，<br />

他冇生，<br />

介胜家。<br />

</p>

8.分割线单标签

<hr />

9.使用del标签来表示一个删除的内容

在文本的中间会有一根删除线,它也不会独占一行

<del>要与原为色，你定的。</del>

<p>

原价：<del>9999</del> <br />

现价：9.9

</p>

10.div 用来布局的,没有语义，会独占一行

<div>

今晚教从者，谷为恩，洪。

</div>

<div>

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Illum, blanditiis.

</div>

11.span 没有任何语义，一般就用来包裹文字

不会独占一行

<span>hello</span>

行内与块元素

面试题：请你简单说一说元素的分类，并举一些具体例子

元素（标签）的分类

1、形式分：

双标签：h1-h6,p,strong,em,hrgoup,del ,div,span····

单标签：br,hr,meta····

2、特点分：

块标签：一般都是用来布局的

（1）、会独占一行

（2）、可以设置宽高

（3）、如果不设置宽高，块元素的宽度是父元素的100%，块元素的高度是被内容撑开

eg:h1-h6,p,hgroup,center,div

行内标签：一般用来包裹文字

（1）、不会独占一行

（2）、不可以设置宽高，被内容撑开

eg:strong,em,span,del····

行内块标签：

（1）、兼具块标签和行内标签的特点，可以设置宽高，不会独占一行

（2）、元素与元素之间会有3像素的空白间距，称三像素问题

eg：img，input，button·····

注意：

1、块标签里面什么都能放

块标签里面可以放块标签，行内标签，行内块标签

2、行内标签里面一般只放文字，不能放块标签

3、有一个特殊的块标签 p标签

它里面只放文字或图片，不能放块元素

4、有一个特殊的行内标签 a标签

它里面什么都能放，除了它自己

结构标签

html5的新标签

布局标签（结构化标签）都是块标签

header 网页的头部

main 网页的主体部分（一般就一个）

footer 网页的底部

nav 网页的导航

aside 和主体相关的内容，侧边栏

article 文章之类的

section 独立的区块，上面的标签都不合适，就用这个，

用来代替div

 <header>
    <!-- 网页的头部····· -->
  </header>
  <main>
    <!-- 网页的主体······ -->
    <nav>网页的导航</nav>
    <aside>侧边栏</aside>
    <article>文章</article>
  </main>
  <footer>
    <!-- 网页的底部 -->
  </footer>

  <!-- 头部 -->
  <div>
    <!-- 网页的头部···· -->
  </div>
  <!-- 主体 -->
  <div>
    <!-- 网页的主体···· -->
  </div>
  <!-- 底部 -->
  <div>
    <!-- 网页的底部 -->
  </div>

实体

1、什么是实体

浏览器会提前征用一部分的字符，例如大于号，小于号，空格，版权符号等等。

如果程序员想用，可以用一些额外的字符去表示，这些额外的字符，我们叫实体

 eg：  4&lt;5 5&gt;3
  <p>你可真 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;好看！！！</p>
  &copy;

2、实体的语法

&实体的名字;

3、常用的实体

大于号： >

小于号： <

空格：  

版权符号： ©

列表

列表（list）一组一组

1:有序列表用ol标签创建，li表示列表项

默认样式：

列表项的前面有加1，2，3···项目符号

列表项的前面有较大的间距

2:无序列表用ul标签创建，li表示列表项

默认样式：

列表项的前面有加黑色实心小圆点

列表项的前面有较大的间距

3:定义列表用dl标签创建，使用dd对内容进行解释说明

注意：

1、常用有序列表和无序列表而且在实际开发过程中，不需要特别区分有序或者无序

2、有type属性，可以更改列表项项目符号

ol type属性值：1，a,A,i,I

ul type属性值：disc，默认值，实心的圆点

square，实心的方块

circle，空心的圆

实际开发过程中，我们会去除默认的项目符号

3、列表可以相互嵌套因为列表是块元素

4、ol li

ul li

dl dt dd

是配合使用，一般情况，不在里面加入其他直接子元素

 <h1>起床三件事</h1>
  <ol type="i">
    <li>
      <p>爱必一下而揽否然司。</p>
    </li>
    <li>刷个牙
      <ol>
        <li>挤牙膏</li>
        <li>漱口</li>
        <li>上下左右刷牙</li>
      </ol>
    </li>
    <li>洗个脸</li>
    <li>吃早餐</li>
  </ol>
  <hr />
  <h1>最喜欢的三件事</h1>
  <ul type="circle">
    <div>11111111</div>
    <li>学习</li>
    <li>吃饭</li>
    <li>睡觉</li>
  </ul>
  <hr />
  <h1>课程介绍</h1>
  <dl>
    <dt>下定义（小标题）</dt>
    <dd>对标题内容的列举</dd>

    <dt>web开发学习顺序</dt>
    <dd>html/css/js</dd>
    <dd>es/ts</dd>
    <dd>vue2/vue3/react</dd>

    <dt>java开发学习顺序</dt>
    <dd>java基础</dd>
    <dd>javaWeb</dd>
    <dd>三大框架，五大数据库</dd>

    <dt>大数据开发</dt>
    <dd>····</dd>
  </dl>