Html- html基础标签

最新推荐文章于 2021-06-19 22:16:12 发布

guardwhy

最新推荐文章于 2021-06-19 22:16:12 发布

阅读量378

点赞数

分类专栏： # HTML

本文链接：https://blog.csdn.net/hxy1625309592/article/details/109559852

版权

HTML 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文详细介绍了HTML的基础结构，包括注释标签、字符实体、文字和段落标签（如标题、段落、换行、加粗等）、图片标签、超链接、base标签以及列表标签（无序列表、有序列表和定义列表）。通过代码示例，帮助读者掌握这些基本元素的使用方法。

摘要由CSDN通过智能技术生成

1.1 html基本结构

<!DOCTYPE html>
<html lang="en">
<!--头部信息-->
<head>
    <!--页面编码设置-->
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<!--网页主体内容-->
<body>
    <p>hello world</p>
</body>
</html>

1.2 html注释标签

<!-- 要注释的内容 -->
快捷键:Ctrl + /
注释在网页中不显示

1.3 字符实体

在HTML中有的字符是被HTML保留的, 有的HTML字符在HTML中是有特殊含义的, 是不能在浏览器中直接显示出来的, 要想显示出来就必须通过字符实体。

&nbsp	空格, 一个就是一个空格
&lt	小于符号 <
&gt	大于符号 >
&copy	版权符号

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>01-字符实体</title>
</head>
<body>
<p>Curry是&nbsp;&nbsp;&nbsp;MVP！！！</p>

<p>我们学习了&lt;h1&gt;标签, &lt;table&gt;标签, &lt;img&gt;标签....</p>

&copy;
</body>
</html>

执行结果

2-文字和段落标签

2.1 标题标签

<h1></h1>~<h6></h6>

2.2 段落标签

<p> </p>   align是对齐属性值

值	描述
left	左对齐内容。
right	右对齐内容。
center	居中对齐内容。
justify	对行进行伸展，这样每行都可以有相等的长度。

2.3 换行标签

<br/>

2.4 水平线

<hr/>

属性	描述
width	设置水平线宽度，可以像素或百分比
color	设置水平线颜色
align	设置水平线居中对齐
noshade	设置水平线无阴影

2.5 文字斜体

<i></i> 、 <em></em>

2.6 加粗

<b></b> 、<strong></strong>

2.7 上标和下标

- <sub>
- <sup>

2.8 插入和删除内容

- ins
- del

2.9 特殊符号

属性	显示结果	描述
&lt	<	小于号或显示标记
&gt	>	大于号或显示标记
&reg	®	已注册
&copy	©	版权
&trade	™	商标
&nbsp	Space	不断行的空白

2.10 图片标签

图片标签：img 作用：在页面中显示一张图片单标签

<img src=" " alt= …/>

img属性

src：图片显示的路径
alt：如果图片加载不出来，会显示这个属性中的文字
title：介绍这张图片
width：图片的宽度
height：图片的高度

2.10.1 代码示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>图片标签</title>
</head>
<body>
<!--
    图片标签：img  作用：在页面中显示一张图片  单标签

    属性：
      1、src：告诉浏览器要显示哪一张图片
          属性值：路径（当前文件找目标文件的过程）
                  当前文件：当前img标签所在的文件（09-图片标签.html）
                  目标文件：就是要显示的那张图片
          特殊情况：当当前文件和目标文件在同一级目录时，直接写目标文件的名字即可

      2、alt：当图片加载失败（路径写错了）时，才显示的文字

      3、title：图片的标题
                当鼠标悬停在图片上才会显示的文字

      4、width：图片的宽度

      5、height：图片的高度
        注意点：一般来说 图片只会设置width或者height中的一个，如果同时设置了宽度和高度，图片可能会拉伸变形
   -->
    <img src="image/my.jpg" alt="guardwhy" title="mvp" height="200" width="300">
</body>
</html>

2.11 路径问题

1.图像与文件在同一目录下 <img src = "x.jpg"/>
2.图像在上一级目录中 <img src = "../x.jpg"/>
3.图像在下一级目录中 <img src="文件夹名/x.jpg">

2.11.1 代码示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>路径问题</title>
</head>
<body>
  <!--上级目录-->
  <img src="../static/images/my.jpg" width="80" height="95"><br/>
  <!--下级目录-->
  <img src="image/my.jpg" height="200" width="300"><br/>

  <!--同级目录-->
  <img src="my.jpg" height="300">
</body>
</html>

2.12 超链接标签

< a href=" ">内容</a>

属性描述
href	链接地址
target	链接的目标窗口_self、_blank、_top、_parent
title	链接提示文字
name	链接命名

2.12.1 代码示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>超链接标签</title>
</head>
<body>
<!--
  target属性：
    这个属性的作用就是专门用于控制如何跳转
    _self: 用于在当前选项卡中跳转, 也就是不新建界面跳转. 默认就是_self
    _blank: 用于在新的选项卡中跳转, 也就是新建界面跳转
  -->
<a href="https://www.baidu.com" title="坑爹啊" target="_blank">百度一下</a>
</body>
</html>

2.13 base标签

专门用来统一的指定当前网页中所有的超链接(a标签)需要如何打开。

2.13.1 代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>base标签</title>
    <base target="_blank">
</head>
<body>
<!-- 
注意点:
    1.base标签必须写在head标签的开始标签和结束标签之间
    2.如果既在base中指定了target又在a标签中指定了target,那么浏览器会按照a标签中指定的来执行
-->
    <a href="http://news.baidu.com/">新闻</a>
    <a href="https://www.google.com/">google</a>
    <a href="http://map.baidu.com/">地图</a>
    <a href="http://v.baidu.com/">视频</a>
</body>
</html>

2.14 定义锚

2.14.1 同一页面

< a href=“#锚名1”>目录1 </a>
< a href=“#锚名2”>目录2 </a>
    
< a href=“…”name=“锚名1”>内容</a>
< a href=“…”name=“锚名2”>内容</a>

2.14.2 不同页面

网页1:<a href= "网页名称#锚名">...</a>
网页2:<a name= "锚名"></a>

定义锚的位置和锚名。
设置寻找锚的链接

3- 列表标签

3.1 无序列表

基本语法

<ol>
   <li>列表项</li>
   <li>列表项</li>
</ol>

type属性值

值	描述
disc	圆点
square	正方形
circle	空心圆

3.1.1 代码示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>无序列表</title>
</head>
<body>
  <!--
    总结:
    1.ul标签中最好只放li标签。
    2.但是li标签中还可以继续放其它的标签。

     UL格式:
     ul>li 含义: 生成一对ul标签, 然后在这对ul标签中再生成一对li标签(按TAB键)。
     ul>li*3 含义: 生成一对ul标签, 然后在这对ul标签中再生成3对li标签。
  -->
  <h1>物品清单</h1>
  <ul>
    <li>
      <h3>蔬菜</h3>
      <ul>
        <li>白菜</li>
        <li>萝卜</li>
        <li>黄瓜</li>
      </ul>
    </li>
    <li>
      <h3>水果</h3>
      <ul>
        <li>苹果</li>
        <li>桃子</li>
        <li>香蕉</li>
      </ul>
    </li>
  </ul>
</body>
</html>

执行结果

3.2 有序列表

基本语法

<ol>
   <li>列表项</li>
   <li>列表项</li>
</ol>

type属性值

值描述
1 数字1，2……	数字1，2……
a 小写字母a , b……	小写字母a , b……
A 大写字母A , B……	大写字母A , B……
i 小写罗马数字 i	小写罗马数字 i
I 大写罗马数字 I	大写罗马数字 I

3.2.1 代码示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>有序列表</title>
</head>
  <body>
    <ol>
      <li>kobe</li>
      <li>James</li>
      <li>curry</li>
    </ol>
  </body>
</html>

执行结果

3.3 定义列表

基本语法

<dl>
    <dt>定义列表项</dt>
    <dd>列表项描述</dd>
    <dt>定义列表项</dt>
    <dd>列表项描述</dd>
</dl>

3.3.1 代码实现

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>定义列表</title>
</head>
<body>
  <dl>
    <dt>什么是 HTML？</dt>
    <dd>HTML 是用来描述网页的一种语言。</dd>
    <dd>
      <ul>
        <li>HTML 指的是超文本标记语言 (Hyper Text Markup Language)</li>
        <li>HTML 不是一种编程语言，而是一种标记语言 (markup language)</li>
        <li>标记语言是一套标记标签 (markup tag)</li>
        <li>HTML 使用标记标签来描述网页</li>
      </ul>
    </dd>
    <dt>HTML 标签</dt>
    <dd>HTML 标记标签通常被称为 HTML 标签 (HTML tag)</dd>
    <dd>
      <ol>
        <li>HTML 标记标签通常被称为 HTML 标签</li>
        <li>HTML 标签是由尖括号包围的关键词</li>
        <li>HTML 标签通常是成对出</li>
        <li>标签对中的第一个标签是开始标签，第二个标签是结束标签</li>
      </ol>
    </dd>
  </dl>
</body>
</html>

操作结果

guardwhy

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Html- html基础标签

html基本结构<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8"> <title>Title</title></head><body> <p>hello world</p
复制链接

扫一扫

专栏目录