html基本的知识片段

最新推荐文章于 2024-10-29 09:59:51 发布

cuter、

最新推荐文章于 2024-10-29 09:59:51 发布

阅读量225

点赞数 2

分类专栏： web前端 html+css 文章标签： html css css3 html5

本文链接：https://blog.csdn.net/weixin_45077672/article/details/115452396

版权

web前端 html+css 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

什么是html？

HTML是超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用，HTML 不是一种编程语言，而是一种标记语言 (markup language)，是网页制作所必备的。
页面内可以包含图片、链接，甚至音乐、程序等非文字元素，结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。

从各个标签说起：

标签一：html

<!DOCTYPE html>
<!-- 文档类型声明标签：告诉浏览器采取html5版本来显示页面 -->
<html lang="en">
<!-- 显示语言：en:英语；zh-CN：中文    定义为中文也可以写英文，定义为英文也可以写中文 -->

标签二：
charset：字符集 charset的常用的值有：GB2312、BIG5、UTF-8，其中UTF-8也被称为万国码，包含了所有国家有需要的字符,不写会出现乱码情况

<meta charset="UTF-8">
    <!--字符集  charset的常用的值有：GB2312、BIG5、UTF-8，其中UTF-8也被称为万国码，包含了所有国家有需要的字符,不写会出现乱码情况  -->

标签三：
h1~h6

 <!-- 标签<h1>-<h6>  语义：作为标题使用，并且依据重要性递减-->
    <h1>标题一共六级选</h1>
    <h2>文字加粗一行显</h2>
    <h3>由大到小依次减</h3>
    <h4>从重到轻随之变</h4>
    <h5>语法规范书写后</h5>
    <h6>具体刷新效果见</h6>

在这里插入图片描述
标签四：
br换行标签。用于强制换行。
标签五：
文本格式化标签

<!-- 文本格式化标签4个！
    加粗：<strong></strong>或<b></b>
    倾斜：<em></em>或<i></i>
    删除线：<del></del>或<s></s>
    下划线：<ins></ins>或<u></u> 
    加粗倾斜牢记！
    推荐用第一组标签！！！-->
    <strong>加粗</strong>的文字
    <b>加粗</b>的文字
    <em>倾斜</em>的文字
    <i>倾斜</i>的文字
    <del>删除</del>的文字
    <s>删除</s>的文字
    <ins>下划线</ins>的文字
    <u>下划线</u>的文字

在这里插入图片描述
标签五：
div和span标签

 <!-- div标签和span标签 ：布局网页的！
    他们就是一个盒子，没有语义，用来装内容的
    div是division的缩写，表示分割分区。span意为跨度、跨距
    特点：div标签用来布局，但是一行只能放一个div，独占一行的大盒子
          span标签用来布局，一行可以放多个span，小盒子
    -->
    <div>我是一个div标签，我一个人单独占一行</div>123
    <div>我是一个div标签，我一个人单独占一行</div>123

    <span>百度</span>
    <span>搜狐</span>
    <span>新浪</span>
    <br/>

标签六：
图像标签

 <!-- 图像标签 <img>定义html页面中的图像
    <img src="图像URL"/>
     src是img的必须属性，必须要写，它用于指定图像文件的路径和文件名，简单理解就是图像标签的特性 
    注：属性之间不分先后的
        属性等于值 -->
    <h4>src 图像标签的使用</h4>
    <img src="images/1.jpg" />

    <h4>alt 替换文本，图像显示不出来的时候，用文字替换</h4>
    <img src="images/1.jpg" alt="许" />

    <h4>title 提示文本，鼠标放在图像上提示的文字</h4>
    <img src="images/1.jpg" alt="许" title="许江涛" />

    <h4>width 给图像设定宽度</h4>
    <img src="images/1.jpg" alt="许" title="许江涛" width="100" />

    <h4>height 给图像设定高度及绝对路径</h4>
    <img src="D:\xujiang_tao.jpg" alt="许" title="许江涛" height="100" />
    <!-- 要么修改高度，要么修改宽度 -->
    <h4>border 给图像设定边框</h4>
    <img src="images/1.jpg" alt="许" title="许" width="100" border="15" />

标签七：
图像标签和路径

  <!-- 图像标签和路径 
  目录文件夹：跟这个网站相关的素材，还有网页
  根目录：最外面那一层文件夹打开后就是根目录

   相对路径
   新建一个文件夹，把图像都放在文件夹里面
   相对路径：以引用文件所在位置为参考基础，而建立出的相对路径。简单来说：图片相对于html页面的位置
   同一级路径：图像文件位于html文件同一级 如<img src="1.jpg"/>
   下一级路径：图像文件位于html文件下一级如images文件夹里的图片  如<img src="images/1.jpg"/>
   上一级路径：图像文件位于html文件上一级        如：<img src="../1.jpg"/>

   绝对路径：是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径
   例如"D:\we\images\1.jpg"  或者  完整的完整的网络图片链接的地址"http//:www.baidutupian.com"
   
-->
    <img src="https://pics0.baidu.com/feed/d31b0ef41bd5ad6e1e55f063b3d379d3b7fd3caf.jpeg?token=6c6f79664c33eacef7474e28d39d0ab9&s=7D90CC1B41DE45CC4855FCD40300D0B1" title="终止合作" />

标签八：
超链接标签

 <!-- 超链接标签
        1.链接的语法格式
        <a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
        属性：
        href：用于指定链接目标的url地址，当标签为href时就有了超链接的功能。
        targe：用于链接页面的打开方式，其中_self为默认值为当前窗口打开页面，_blank为在新窗口中打开页面方式。
        2.链接分类
        外部链接：要添加http//：  如：<a href="http://www.qq.com" target="_blank">腾讯</a>
        内部链接：网站内部的链接  如：<a href="Case1 Pe news.html" target="_blank">体育新闻</a>
        空链接：没有确定链接目标时 用#代替目标链接  如<a href="#">公司介绍</a>
        下载链接：如果href地址是一个压缩包或者文件，会下载这个文件。如  <a href="images/1.zip">下载链接</a>
        网页元素链接：图片超链接<a href="http://www.qq.com"><img src="images/1.jpg"></a>

        锚点链接：点击链接，可以快速定位到页面中某个位置
          在链接文本的href属性中，设置属性值为#名字的形式，如<a href="#xu">他多高？</a>
          找到目标位置标签，里面添加一个id属性=刚才的名字，如：<h3 id="xu">许多高介绍</h3>
     -->
    <h4>外部链接</h4>
    <a href="http://www.qq.com" target="_blank">腾讯</a>
    <a href="http://www.qq.com">腾讯</a>
    <h4>内部链接</h4>
    <a href="Case1 Pe news.html" target="_blank">体育新闻</a>
    <h4>空链接</h4>
    <a href="#">公司介绍</a>
    <h4>下载链接：地址链接的是 文件.exe或者zip等压缩包形式子</h4>
    <a href="images/1.zip">下载链接</a>
    <h4>图片超链接</h4>
    <a href="http://www.qq.com"><img src="images/1.jpg"></a>

标签九：
注释标签和特殊标签（空格，大于，小于）


    <!-- 注释标签
    不用显示的文字，但注释后可以方便我们阅读和理解
    -->



    <!-- 特殊字符 
   在HTML中，一些特殊的符号很难或者不方便直接使用，此时我们用下面的字符来代替
              空格符号   &nbsp；
              大于号    &gt；
              小于号    &lt；

   -->

    <br/>我是&nbsp;&nbsp;空格
    <br/>&lt;p &gt;这是一个段落标签