恒恒恒咩

V1

2022/07/02阅读:26主题:重影

HTML笔记

HTML

1.基础了解

网页是由一对对标签构成的

<!--在网页中HTML专门负责网页的结构,在使用HTML标签的时候,应该关注的是标签的语义,而不是它的样式。css负责网页的表现-->

格式:<标签名>

<!-- 结构--><html>
    <!--根标签 -->
    <html lang="en">
        <!-- 向搜索引擎表示该页面是html语言,并且语言为英文网站,其"lang"的意思就是“language”,语言的意思,而“en”即表示english-->
    <head>
        <!--head是网页的头部,head中的内容不会在网页中直接出现,主要用来帮助浏览器或搜索引擎来解析网页 -->
            <meta charset="utf-8">
             <title>
                  网页名称
             </title>
    </head>
    <body>
        <!-- 网页的主题,所有可见内容写进body -->
         
            页面内容
    </body>
</html>
    
 <head><body>都是<html>的子标签  <head>里是网页的标题   <body>里是网页的主体
标签一般成对出现,但是也存在一些自结束标签<img> <input>

- 注释:<!--   --> 不会在网页中显示,可以在源码中查看,对代码进行解释说明

- 标签的属性:是一个键值对结构<x=y>;用来设置标签中的内容如何显示。
<h1><font color="red">第三个</font></h1>
<!-- color就是属性名字 red就是属性值
     有些属性没有属性值,如果有,属性值用引号引起来   -->

  • 文档声明:用来告诉浏览器当前网页的版本
 <!doctype html>
 <!Doctype html>
 <!DOCTYPE HTML>
<!--都表明是HTML5版本 写到代码最上面 -->
  • meta标签
<meta charset="utf-8"> 
<!--用于设置网页的元数据,这里meta用来设置网页的字符类,避免乱码问题 在head中写
    charse 指定网页的字符集
  name  指定数据的名称
    content 指定数据的内容
                      
-->

<meta name="keywords" content="html,前端,LOL">
<!--  keywords表示网络关键字,可以指定多个关键字,下面的html,前端,lol都是指定的关键字-->
<meta description="keywords" content="淘宝是中国的什么什么啥东西">
<!--description用于指定网站的描述,会显示在搜索引擎的结果中-->
<meta http-equiv="refresh" content="3;url=网址">
<!--3表示三秒跳转 url表示跳转的网址  -->
  • 实体

​ 在HTML中有时候不能书写一些特殊符号。比如多个空格等, 如果我们需要在网页中书写这种特殊的符号,则 需要HTML中的实体(转义字符)

<!--实体的名字-->
&nbsp; <!-- 表示空格-->
&gt;<!-- 表示大于号-->
&lt;<!-- 表示小于号-->

2.语义化标签

  1. 标题标签:

    <h1>一级标题</h1><!--h1~h6总共六级标题,重要程度依次递减,h1在网页中的重要性仅次于title标签,一般情况下一个页面中只会有一个h1-->
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
  2. 段落标签:

    <p>内容1 </p>
    <p>内容2 </p>

​ 标题标签与段落标签都被称为块元素

​ 在页面中独占一行的 元素称为块元素(block element)

  1. 标题组:

    <hgroup>
        <h1>绝句</h1>
        <h2>其一</h2>
    </hgroup>
  2. em标签

    <p>我要<em>狠狠</em>给你一拳</p>
    <!--表示语音语调的一个加重  不会独占一行  叫做行内元素  -->
  3. strong标签

    <p><strong>我要</strong>给你一拳</p>
    <!--表示强调 -->
  4. 引用标签

    <blockquote>
       这句话我没说过
    </blockquote>
    <!--表示长引用-->
    <q>
       学而时习之
    </q>
    <!--表示短引用-->
  5. 换行

    <br></br>
  6. 布局标签

    <header></header><!--表示网页的头部,一个网页可以有很多-->
    <main></main><!--表示网页的主体部分,一个网页中只有一个-->
    <footer></footer><!--表示网页的底部,一个网页可以有很多-->
    <nav></nav><!--导航-->
    <aside></aside><!--边栏-->
    <article></article><!--文章-->
    <section></section><!--表示一个独立的区块-->

    div表示块
    span行内元素 这两个可以代替上述所有

3.列表

1.龙
2.虎
3.蛇 这就是一个列表
html中列表一共有三种
1.无序列表:用ul标签来创建无序列表,使用li来表示列表项
<ul>
    <li></li> <!--    ·龙     -->
    <li></li> <!--    ·虎     -->
    <li></li> <!--    ·蛇     -->
</ul>

2.有序列表:用ol标签来创建有序列表,使用li来表示列表项
<ol>
    <li></li> <!--  1.龙      -->
    <li></li> <!--  2.虎      -->
    <li></li> <!--  3.蛇      -->
</ol>

3.定义列表:用dl标签来创建定义列表,使用dt来表示定义内容。用dd来对内容进行解释说明
<dl>
    <dt>cxk</dt>
    <dd>一种动物</dd>
</dl>
列表之间可以互相嵌套

4.超链接

让我们从一个页面跳转到其他页面
使用a标签来定义超链接
        属性:href  指定目标路径
              可以是一个外部网站地址
              也可以一个内部页面地址
是一个行内元素,a标签中可以嵌套任何元素,除了自身 
<a href=“https://www.baidu.com”></a>

当我们需要跳转一个服务器内部页面时,一般我们会使用相对路径
      用./或者../开头   如果不屑./或者../默认写了./
  区别:
      ./表示当前文件所在的目录
      ../表示当前文件的所在目录的上一级目录
---------------------------------------------------------------------------
其他用法
    target属性,用来指定超链接的打开的位置
         可选值:
             _self 默认值 在当前页面中打开超链接
             _blank在一个新的页面中打开超链接
  <a href=“https://www.baidu.com” target="_blank"></a>


<a href="#bottom">去底部</a>
<!--去最后a的位置,则需要将底部的a特殊标记-->
     id属性(唯一不重复的属性)
    每一个标签都可以添加一个id属性
                相当于身份证号,不可重复
将href的属性设置为#可以回到当前页面的顶部位置
<a id="bottom" href="#">回到顶部</a>
想去哪标记一下id,然后#id就可以了
<!--在开发中可以将#作为超链接的路径的占位符号
     也可以使用 a href=“javascript:;”
-->


5.图片标签

用于引入一个外部的图片

使用img标签,是一个自结束标签
src 属性指的是外部图片的路径
alt  图片的描述
width 图片的宽度(单位是像素)
height 图片的高度
  -宽度和高度若只修改一个,另一个会同比例缩放
<img width="500" src="超链接" alt=“”>
<!--alt中的东西为照片的描述,但有的浏览器在图片显示不出来时候可以显示出来搜索引擎会根据alt来识别图片-->

图片的格式

jpg(jpeg)
-支持的颜色比较丰富,不支持透明效果,不支持动图
-一般用来显示照片
gif
-支持的颜色比较少,支持简单透明,支持动图
-颜色单一的图片,动图
png
-支持的颜色比较少,支持复杂透明,不支持动图
-颜色丰富,复杂透明图片
webp
-谷歌专门表示网页中的图片中的一种格式
—具备所有优点
-但是兼容性不好

base64
 -将图片转化为字符,通过字符来引入

选择标准:
效果一样,用小的(内存小的)
效果不一样,用效果好的

6.内联框架

用于向当前页面引入一个其他页面

<iframe src=""frameborder="0"></iframe> <!--相当于在该网页嵌套了一个另一个网页-->

7.音视频

audio标签
  用来向页面中引入一个外部的音频文件,默认情况下不允许用户自己控制
     属性:
          controls 是否允许用户可以控制,有就可以控制,没有就不能控制
          autoplay  音频文件是否自动播放,有就自动播放,没有就手动
          loop    音乐是否循环播放
      三个属性都没有值,功能与写不写这几个属性有关
 <audio src=""controls autoplay></audio>
或者
<audio  control>
   <source src="">
</audio>
<!--如果设置了autoplay则可以自动播放 但现在大部分浏览器不可以自动播放-->
video标签
  用来向网页中引入视频
  属性与audio基本相同

分类:

前端

标签:

HTML

作者介绍

恒恒恒咩
V1