Web学习笔记HTML+CSS+JS(一)

    技术2022-07-11  68

    Web学习笔记/HTML+CSS+JS/(一)

    文章目录

    Web学习笔记/HTML+CSS+JS/(一)1、meta标签2、布局标签(结构化语义标签)3、列表(list)

    1、meta标签

    <meta> 元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。以及页面编码语言、搜索引擎的优化等等。

    <meta> 标签位于文档的头部,不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。

    (1) charset指定网页的字符集

    <meta charset="UTF-8">

    (2) name 指定的数据的名称,对应的属性是content(content 指定的数据的内容),以便搜索引擎进行分类

    ​ 基本语法:

    <meta name="参数" content="参数值"/>

    keywords 表示网站的关键字,可以同时指定多个关键字,关键字间使用,隔开

    例如:<meta name="keywords" content="小Try,博客,工科生,前端学习">

    description 用于指定网站的描述

    例如:<meta name="description" content="这是我的学习笔记">

    viewport 表示用于设计移动端网页。最常范例如下:

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

    author 标注网页制作的作者

    例如:<meta name="author" content="小Try,xxxxxxxx@gmail.com">

    copyright 标注网页制作的版权问题

    例如:<meta name="copyright" content="小Try">

    generator 用来说明网站制作所采用的编辑器

    例如:(这个还不确定,之后在补充)

    (3) http-equiv 相当于http的文件头作用(个人见解);相当于http的作用,比如定义一些http参数啥的。

    ​ meta标签中http-equiv属性 具体语法格式为:

    <meta http-equiv="参数" content="具体的描述">

    refresh 自动刷新并指向某一个网页(将页面重新定向到另一页面)

    例如:<meta http-equiv="refresh" content="5;URL=http://www.xxxx/"> //意思是2秒后跳转

    X-UA-Compatible 用于告知浏览器以哪一版本渲染页面(一般用最新模式)

    例如:<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>

    2、布局标签(结构化语义标签)

    header 表示网页的头部

    main 表示网页的主体部分(一个页面中只会有一个main)

    footer 表示网页的底部

    aside 侧边栏

    article 表示一个独立的文章

    section 表示一个独立的区块,以上标签都不能进行表示时使用section

    div 没有语义,用来表示一个区块,主要用div来布局元素

    span 行内元素,也没有语义,一般用于在网页中选中文字

    3、列表(list)

    html 中的列表一共有三种,并且列表之间可以互相嵌套:

    有序列表

    使用 ol 标签来创建有序列表,使用 li 表示列表项

    例如:

    <ol> <li>AA</li> <li>BB</li> <li>CC</li> </ol>

    无序列表

    使用 ul 标签来创建无序列表,使用 li 表示列表项

    例如:

    <ul> <li>11</li> <li>22</li> <li>33</li> </ul>

    定义列表

    使用 dl 标签来创建一个定义列表;使用 dt 来表示定义的内容;使用 dd 来对内容进行解释说明

    <dl> <dt>HTML</dt> <dd>HTML称为超文本标记语言,是一种标识性的语言</dd> <dd>HTML称为超文本标记语言,是一种标识性的语言</dd> <dd>HTML称为超文本标记语言,是一种标识性的语言</dd> </dl>
    Processed: 0.013, SQL: 9