首页 前端知识 HTML 标签

HTML 标签

2024-05-03 18:05:21 前端知识 前端哥 412 880 我要收藏

1.站点的创建

站点的创建 ( 一个大的文件夹里面四个小的文件夹 : img 文件夹 , css 文件夹 , js 文件夹 , html 文件夹; 和一个小的页面文件: index.html 文件 )

2.快速创建页面结构

快捷键 : shift+!+tab

快捷键 : html:5

3.结构注释语句

快捷键 : ctrl+?

4.标签的含义

HTML 标签, 也称之为元素, 也称之为记号. 三个名字都是同样的意思

5 .标签的基本语法

5.1 单标签

基本语法 : <标签名字 属性="属性值" 属性="属性值" 属性 ="属性值">

5.2 双标签

基本语法 : <标签名字 属性="属性值" 属性="属性值" 属性="属性值"></标签名字>

6. 标签的特点

  1. 所有的标签都需要使用尖角号

  2. 单标签只有开始没有结束, 双标签有开始有结束

  3. 属性和属性值放在开始位置处

  4. 属性和标签名字之间必须带空格

  5. 属性和属性值之间使用等号链接

  6. 属性值需要带引号

  7. 每一组属性和属性值之间需要带空格

  8. 标签可以带一个属性也可以带多个属性甚至一个都不带

7.常用标签

7.1 标题标签

<!-- HTML中使用<h1>、<h2>、<h3>、<h4>、<h5>、<h6>等标签来定义标题部分,其语义格式如下 基本语法:<hn 属性="属性值">标题文档</hn> -->

<!-- 语法如下 -->

  <h1>一级标题</h1>
  <h2>二级标题</h2>
  <h3>三级标题</h3>
  <h4>四级标题</h4>
  <h5>五级标题</h5>
  <h6>六级标题</h6>

<!-- 运行结果如下 -->

70ed4582f393440396150d8445ed68b9.png

7.2.段落标签

<!-- 浏览新闻网页的时候,经常能看见文章段落,经常使用<p>标签实现 基本语法:<p 属性="属性值">段落文本</p> -->

<!-- 语法如下 -->

<p>一段话·············</p>

<!-- 运行结果如下 -->

16129e26849d409d956f847432a266f5.png

7.3 文本格式化标签

<!-- 文本格式化标签就是针对文本进行各种格式化的标签,如加粗,斜体,上标,下标等 -->

文本格式化标签
标签文本显示效果
<strong>强调加粗
<em>强调斜体
<sub>/<sup>上标文本、下标文本
<del>加删除线方式
<ins>加下画线方式

7.3.1 strong

<!-- <strong>标签将文本定义为语气更强的强调语气 -->

<!-- 语法如下 -->

<strong>你好,世界</strong>

<!-- 运行结果如下 --> 

7.3.2 em斜体

<!-- 语法如下 -->

    <em>你好,世界</em>

<!-- 运行结果如下 --> 

7.3.3 sub和sup 上标和下标

<!-- 上标:中间的字符在上方,多用于数学中的次方 -->

<!-- 下标:中间的字符在下方,多用于化学中的符号和公式 -->

<!-- 语法如下 -->

 2<sup>5</sup>
 H<sub>2</sub>O

<!-- 运行结果如下 --> 

7.3.4 del和ins 删除线和下划线

<!-- 语法如下 -->

<del>你好,世界</del>
<ins>你好,世界</ins>

<!-- 运行结果如下 --> 

7.4 引用标签

引用标签分类
标签作用
<blockquote>引用大段的段落解释
<q>引用小段的段落解析
<abbr>缩写或首字母缩略语
<address>引用文档地址信息
<cite>引用著作的标题

7.4.1 blockquote和q

<!-- 语法如下 -->

<q>那个夏天的蝉鸣比哪一年都聒噪,教室窗外枝桠疯长,却总也挡不住烈阳。</q> 
     <blockquote>
    附中明理楼顶层的大课间向来吵闹,高二A班的学委从走廊漂移进教室,叫道:“报--咱班要进人了!""敬事房的小太监又来骗人了。”有人揶揄
    "你他妈才小太监,我说真的。
    "又不是期中又不是期末的,进什么人?"
    “转校生啊。
    </blockquote>

<!-- 运行结果如下 --> 

7.4.2 abbr

<!-- 语法如下 -->

 <abbr title="">某某</abbr>
    <address>晋江文学城</address>
    <cite>木苏里某某</cite>

<!-- 运行结果如下 --> 

7.4.3 address和cite

<!-- 两个标签的效果都为斜体 -->

<!-- 语法如下 -->

 <abbr title="">某某</abbr>
    <address>晋江文学城</address>
    <cite>木苏里某某</cite>

<!-- 运行结果如下 --> 

7.5 水平线标签——hr

水平线标签属性
属性名含义属性取值

align

水平对齐方式可选择left,right,center三个值,默认为center,居中对齐
size水平线粗细以像素(px)为单位,默认2px
width水平线宽度确定的像素值或浏览器窗口的百分比(默认为100%)
color水平线颜色颜色名称,十六进制#RGB,rgb(r,g,b)

<!-- 语法如下 -->

  <hr color="red" width="100px" size="3px" align="center" >

<!-- 运行结果如下 --> 

会持续更新!但是最近在学JS,没有太大的动力!

转载请注明出处或者链接地址:https://www.qianduange.cn//article/6788.html
标签
评论
发布的文章

安装Nodejs后,npm无法使用

2024-11-30 11:11:38

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!