[JavaScript知识库] html与css

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> html与css -> 正文阅读

[JavaScript知识库]html与css

*什么是html?

HTML(hypertext Markup lanhuage)

超文本标记语言

网页文档的结构和格式的定义是又htnl 元素来完成的，html 元素是由单个或一对标签定义的包含范围。

一个标签包括开始标签，结束标签，

标签之内的就是元素

* a元素

表示超链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a href="" herf="#chapter1">章节1</a>
 <h2 id="chapter1">章节1</h2>
    <p>Lorem.</p>

属性：

## herf 属性

happer reference:通常表示跳转地址

1.跳转地址

2.跳转某个锚点

id属性：全局属性，表示元素在文档中的唯一编号

3.功能链接

点击后，触发某个功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a href="tel:xxxxxxxxxxx">
        点击给我拨打电话

    </a>
</body>
</html>

-执行JS代码,javascript:

-发送邮件，mailto:

要求用户计算机上安装有邮件发送软件，exchange

-拨号，tel:

要求用户计算机上安装有拨号软件，或使用的是移动端访问

## target属性

表示跳转窗口位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a href="https://douyin.com"target="_blank"title="抖音，记录美好生活">
        抖音
    </a>
    
</body>
</html>

target的取值：

_self：表示在当前页面窗口中打开，默认值

_blank:在新窗口中打开

图片元素

# 图片元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <figure>
        <a target="blank" href=" https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=02003390_80_hao_pg&wd=%E5%A4%AA%E9%98%B3%E7%B3%BB%E7%99%BE%E5%BA%A6%E7%99%BE%E7%A7%91&fenlei=256&rsv_pq=c61a2afc0001ff7e&rsv_t=64dcfl2lpdTFu5FsmYtwNJWUFfSBq4g3wBFkdml0H0kVU0dR7Y3y4lHz4q%2FkwMLr%2Bz8FX1EnWHSL&rqlang=cn&rsv_dl=ib&rsv_enter=1&rsv_sug3=19&rsv_sug1=17&rsv_sug7=101">
            <img usemap="#solarMap"src="https://img2.baidu.com/it/u=2960898785,1802048753&fm=26&fmt=auto">
        </a>
        <figcaption>
            <h2>
                太阳系
            </h2>

        </figcaption>
       
        <p>
            说明
        </p>

    </figure>
   
    <map name="solarMap">
        <area shape="circle" coords="360,204,48" href="https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&tn=02003390_55_hao_pg&wd=%E6%9C%A8%E6%98%9F&oq=bili&rsv_pq=f0b1554e000c6876&rsv_t=1837jI6alvAQqIkBRMmX5sLywjpzneaKdDqpwE3UwKN57aj50JVl4EOD%2FsJ7SZ2lZPP8mEKYlWtk&rqlang=cn&rsv_dl=tb&rsv_enter=1&rsv_sug3=12&rsv_sug1=10&rsv_sug7=101&rsv_sug2=0&rsv_btype=t&inputT=8020&rsv_sug4=8451" alt=""target="_blank">
        <area shape="rect"coords="360,204,48" href="https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&tn=02003390_55_hao_pg&wd=%E6%9C%A8%E6%98%9F&oq=bili&rsv_pq=f0b1554e000c6876&rsv_t=1837jI6alvAQqIkBRMmX5sLywjpzneaKdDqpwE3UwKN57aj50JVl4EOD%2FsJ7SZ2lZPP8mEKYlWtk&rqlang=cn&rsv_dl=tb&rsv_enter=1&rsv_sug3=12&rsv_sug1=10&rsv_sug7=101&rsv_sug2=0&rsv_btype=t&inputT=8020&rsv_sug4=8451" alt="">
    </map>
</body>
</html>

## img元素

image缩写，空元素

src属性：source

alt属性：当图片资源失效的时候，将使用该属性的文字替代图片

## 和a 元素联用

## 和map元素

map:地图

map的子元素：area

衡量坐标时，为了避免衡量误差，需要使用专业的衡量工具

ps,pxcook ,cutpro

## 和figure元素

指代，定义，通常用于吧图片，图片标题，描述包裹起来

子元素：figcaption

多媒体元素

video 视频

audio 音频

## video

controls: 控制控件的显示，取值只能为controls

某些属性，只有两种状态，1.不写 ? ?2.取值为属性名，这种属性叫做布尔属性

布尔属性，在html5中，可以不用书写属性值

autoplay:布尔属性，自动播放

muted：布尔属性，静音播放

loop：布尔属性，循环播放

## audio

和视频完全一致

## 兼容性

1.旧版本的浏览器不支持这两个元素

2.不同的浏览器支持的音视频格式可能不一致

MP4，webm

# 列表元素

## 有序列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    把大象装进冰箱，总共分几步？

    <ol reversed>
           <li>打开冰箱门</li>
        <li>大象进去</li>
        <li>关上冰箱门</li>   
        <li>打开冰箱门</li>
        <li>大象进去</li>
        <li>关上冰箱门</li>
        <li>打开冰箱门</li>
        <li>大象进去</li>
        <li>关上冰箱门</li>
        <li>打开冰箱门</li>
        <li>大象进去</li>
        <li>关上冰箱门</li>
        <li>打开冰箱门</li>
        <li>大象进去</li>
        <li>关上冰箱门</li>  

    </ol>
</body>
</html>

ol： orderd list

li : ?list item

## 无序列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    xxx学校招生条件：

    <ul>
        <li>学习成绩优异</li>
        <li>获得国家奖项</li>
    </ul>
</body>
</html>

把ol改成ul

ul: unordered list

无序列表常用于制作菜单或新闻列表

## 定义列表

通常用于一些术语的定义

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    html中的术语解释：

    <dl>
        <dt>html</dt>
        <dd>
            超文本标记语言，xxxxx
        </dd>
        <dt>元素</dt>
        <dd>
            组成html 文档的单元，每个元素xxxxx
        </dd>
    </dl>
</body>
</html>

dl : definition list

dt: ?definition title

dd : ?definition description

# 容器元素

容器元素：该元素代表一块区域，内部用于放置其他元素

## div元素

没有语义

<div>
        <div>
            <img src="" alt="">
        </div>
       
    </div>
    <div>
        <ul>
            <li>菜单</li>
            <li>菜单</li>
            <li>菜单</li>
            <li>菜单</li>
        </ul>
    </div>

## 语义化容器元素

 <header>
           <h1></h1>
    </header>
    <section>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat dolores atque, iusto sit hic non in quibusdam ipsum debitis suscipit optio neque provident amet illum ad nihil, laboriosam natus? Aut.</p>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Maxime sed itaque omnis eius rem, pariatur tenetur vitae provident magnam perferendis, dicta delectus distinctio mollitia suscipit nulla voluptatibus voluptate aut nesciunt.</p>
    </section>
    <article>

    </article>
    <footer>

    </footer>

header：通常用于表示页头，也可以用于表示文章的头部

footer:通常用于表示页脚，也可以用于表示文章的尾部

article:通常用于表示整篇文章

section:通常用于表示文章的章节

aside:通常用于表示侧边栏