HTML基础 | 青训营笔记

用户1215660874610
113 阅读4分钟

这是我参与「第四届青训营 」笔记创作活动的的第1天

前端

基础三件套：HTML（内容）、CSS（样式）、JavaScript（行为）。

HTML（超文本标记语言）

1.HTML的基础结构以及标签注释。

<!--文档声明，声明当前网页的版本-->
<!dcotype html>
<!--html的根标签（元素），网页中的所有内容都要写根元素里头-->
<!--
<html lang="zh">这个是网页语言设置
-->
<html>
    <!--head是网页头部，head中的内容不会在网页中直接出现，主要用来帮助浏览器或者搜索引擎来解析网页-->
    <head>
        <!--meta标签用来设置网页的元数据，用来设置字符集之类的东西，是给浏览器看的，避免乱码问题-->
        <meta charset="utf-8">
        <!--titile中的内容会出现在浏览器标题栏，用于搜索引擎，不会出现在页面里面-->
        <title>这是一个标题</title>
    </head>
    <!--body是html的子元素，表示网页主体，网页中可见内容都应该写在body里面-->
    <body>
        <!--属性是一个名值对（ x=y）
            属性和标签名或者其他属性应该使用空格隔开
            属性不能瞎写，有规定，有些属性有属性值，则需要用单引号或者双引号引起来，有些属性没有属性值
	-->
        <!--h1是网页一级标题-->
        <h1>
            这是一个<font color="red">大写</font>网页标题
        </h1>
        <!--h2是网页二级标题-->
        <h2>
            这是一个小写网页标题
        </h2>
        <!--p是网页的换行符-->
        <p>
            这是换行标志
        </p>
    </body>
</html>

2.HTML标签（标签有很多，以下为列举，详细可查看W3C手册）

2.1 meta标签（举例一些）

属性名描述
charset指定网页字符集
name指定数据的名称
content指定数据的内容
http-equiv页面重定向
  • utf-8:万国码
  • ketwords:网站关键字,可同时使用多个关键字，用英文逗号隔开
  • description用于指定网站的描述，相当于介绍自己
<meta charset="utf-8">
<meta name="keywords" content="CSS,前端,HTML5">
<meta name="description" content="相当于推文副标题">
<meta http-equiv="refresh" content="3;url=一个需要跳转到的网址">

2.2 语义化标签

  • 块标签：可以独占一行的标签，并且块标签可以设置width和height数值。

    • 标题分组:将一组相关的标题同时放到hgroup
    • HTML块标签有：div、p、h1、h2、h3、h4、h5、h6、ul、ol、li、dl、dt、dd

  • 行内元素：在页面中不会独占一行

    • HTML行标签有：a、span、strong、em、img等

2.3 列表

  • 无序列表

    • ul标签创建无序列表
    • li表示列表项
<ul>
    <li></li>
</ul>

  • 有序列表

    • ol标签创建有序列表
    • li表示列表项
<ol>
    <li></li>
</ol>

  • 定义列表

    • dl标签创建定义列表
    • dt表示定义的内容
    • dd表示对内容进行解释说明
<dl>
    <dt>结构</dt>
    <dd>结构表示网页的结构，结构用来规定网页中哪里是标题，哪里是段落</dd>
</dl>

2.4 超链接与相对路径

  1. 超链接：从一个页面跳转到另一个页面，也可以是跳转到当前页面的其他位置。
  2. 相对路径：以当前文件资源所在的目录为参照基础，链接到目标文件资源(或文件夹)的路径。

使用a标签来定义超链接

  • href指定跳转的目标路径

    • 值可以是一个外部网站的地址，也可以是内部页面网址
    • 值为#默认为跳转到顶部；值为#+目标元素id属性值作为跳转到页面内的任意位置；值为javascript:;认为是一个什么也不会发生的超链接
    • id唯一不重复，每一个标签都可以添加一个id属性，id字母开头，且区分大小写

  • target指定超链接打开的位置

    • _self 默认值 在当前页面中打开超链接
    • blank 在一个新页面中打开超链接

  • 超链接是一个行内元素，在a标签中可以嵌套除本身之外的任何元素

<a href="https://www.baidu.com" target="_self">这是第一个超链接</a>

相对路径在超链接中使用较多

  • 跳转一个服务器内部的页面时，往往使用相对路径，一般用.或者..

    • ./可省略不写，表示当前文件所在目录
    • ../不可以省略，表示当前文件的上一级目录
    <!--以下相对路径仅针对个人目录-->
    <a href="liebiao.html">这是第二个超链接</a>
    <br>
    <a href="./biaoqian.html">这是第三个超链接</a>
    <br>
    <a href="../test2/test.html">这是第四个超链接</a>

2.5 图片标签

  • img标签

    • 属于替换元素，介于块元素与行内元素之间
    • src 指定的是外部图片的路径
    • alt 图片描述，默认情况下不要出现，但网不好的时候会出现，而且鼠标在的时候会出现，搜索引擎会根据alt中的内容分来识别图片，不写的话无法被搜索引擎到
    • width 图片的宽度，单位是像素
    • heigth 图片的高度，与width相互使用，如若只改变其中一个，则另一个会等比例缩放

  • 图片的格式

    • jpg

      • 支持的颜色丰富，不支持透明效果，不支持动图
      • 一般用于显示图片

    • gif

      • 支持颜色少，支持简单透明，支持动图
      • 一般用于显示图片

    • png

      • 支持颜色丰富，支持复杂透明，不支持动图
      • 颜色丰富，复杂透明图片（网页常用）

    • webp

      • 谷歌常用，文件小
      • 缺点：兼容性不好

    • base64

      • 将图片换成base64字符
      • 网页与图片同时加载的情况会使用到

  • 原则：效果一样用小的，效果不一样用效果好的

2.6 音视频标签

   <audio src="">图片展示
   <vudio src="">视频展示

2.7 输入

    <input type="text" name="name">

2.8 内容划分

  • header：页头
  • nav：导航
  • main：主体
  • article：文章
  • aside：侧边栏
  • footer：页尾
avatar
文章
阅读
粉丝