初识HTML基础标签

最新推荐文章于 2024-08-05 10:20:29 发布

鲁kk

最新推荐文章于 2024-08-05 10:20:29 发布

阅读量86

点赞数

分类专栏： html 文章标签： html

本文链接：https://blog.csdn.net/weixin_45905955/article/details/114600269

版权

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML基础

HTML：超文本标记语言，是一种用于创建网页的标准标记语言，而不是编程语言

HTML基本骨架

<!-- 

  添加注释快捷键：ctrl+/  

  用来解释说明代码 浏览器不会解析注释内容，在页面上不显示

  注释不能嵌套

-->

<!-- 快速创建HTML骨架快捷键：shift+1 html：5 -->



<!-- 声明：告诉浏览器以HTML5的规范解析文档 -->

<!DOCTYPE html>

 <!-- HTML：根标签，lang（语言）属性，“en”:表示英文，定义语言类型 “zh-cn”:表示中文 -->

<html lang="en">

<head>

  <!-- 

  head：文档头部，主要让浏览器看的

  meta charset="UTF-8" 定义编码方式为utf-8，UTF-8万国码

  作用：防止页面出现乱码情况

  title：网页标题 

  body：文档内容（主体）



  标签之间的关系：并列关系、嵌套关系

   -->

    <meta charset="UTF-8">

  <!-- 移动端窗口设置 -->

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Document</title>

</head>

<body>

  

</body>

</html>

HTML标签分类

块元素：自己独占一行，可以设置宽、高
行元素：宽高和内容相同，不可以设置宽和高
行内块元素：即具有块元素的属性，又具有行元素的属性

常见的块元素：div p h1-h6 ul ol dl

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>常用块标签</title>

</head>

<body>

  <!-- div :分割，一般在垂直方向划分区域 -->

    <div>div是块标签 独占一行</div>

    <div>div是块标签 独占一行</div>

  <!--

     h1-h6:标题标签，也是块标签 独占一行 

     数字越小，字体越大

   -->

  <h1>标题标签</h1>

  <h2>我是二级标题</h2>

  <!-- p标签不能嵌套块标签，浏览器解析时会出错 -->

    <p>我是段落标签，我也独占一行</p>

  <!-- 无序列表 ul只能嵌套li,但是li可以嵌套任何标签（和div使用相同）-->

  <ul>

    <li>列表1</li>

    <li>列表2</li>

    <li>列表3</li>

  </ul>

  <!-- 有序列表和无序列表使用大致相同，语义不同 -->

  <ol>
    <li>选项1</li>

    <li>选项2</li>

    <li>选项3</li>

  </ol>

  <!-- 自定义列表 一个dt对应多个dd-->

  <dl>

    <dt>我是自定义列表</dt>

      <dd>我是自定义子列表</dd>

      <dd>我是自定义子列表</dd>

      <dd>我是自定义子列表</dd>    

  </dl>

</body>

</html>

常见的行标签：span a em 等等

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>常用的行标签</title>
</head>
<body>
    <!-- 
        span 跨度，行标签 从水平方向划分区域 
        
    -->
    <span>我是行标签，不能设置宽度和高度</span>
    <span>内容多宽我多宽</span>
    <strong>用来强调文本</strong>
    <em>我是斜体</em>
    <del>删除文本</del>
    <span>今天11<sup>℃</sup></span>
    <span>下标<sub>1</sub></span>
</body>
</html>

常见的行内块标签：img

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>img标签</title>
</head>
<body>
    <!-- 
    1.img:图片标签 单标签
      src属性：定义图片资源所在的路径
      alt：图片加载失败不显示时，显示alt定义的文本信息 
      title:鼠标悬停时，显示title定义的内容
    2.img设置宽高：建议只设置宽或者高，让图片等比例自动缩放，避免图片失真
    3.图片路径问题:相对路径
      ../表示后退一级
    -->
    <img src="2.jpg" alt="图片加载失败，请重试" title="我是图片" />
    <img src="2.jpg" alt="图片加载失败，请重试" title="我是图片" width="300px"/>
    <img src="img/3.jpg" alt="">
    <img src="../4.jpg" alt="">
    <img src="../imges/5.jpg" alt="">
</body>
</html>

持续更新中…

鲁kk

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初识HTML基础标签

HTML基础HTML：超文本标记语言，是一种用于创建网页的标准标记语言，而不是编程语言HTML基本骨架<!DOCTYPE html> <!-- HTML：
复制链接

扫一扫

专栏目录